<zk>
    <zscript>
    String edition = WebApps.getEdition();
    </zscript>
    <label value="You are using ZK ${edition} ${desktop.webApp.version}"/>
    <borderlayout id="borderLayout" width="550px" vflex="min">
        <center vflex="min">
            <columnlayout id="layout" width="500px" style="border: 1px solid blue; margin: 10px;">
                <columnchildren id="left" width="44%">
                    <grid vflex="1" hflex="1">
                        <columns>
                            <column label="Left box" />
                        </columns>
                        <rows>
                            <row>
                                <div height="100px" hflex="1" style="background: #ccc;"/>
                            </row>
                        </rows>
                    </grid>
                </columnchildren>
                <columnchildren id="middle" width="9%">
                    <div width="50px" height="100px" style="border: 1px solid red;"/>
                </columnchildren>
                <columnchildren id="right" width="44%">
                    <div style="border: 1px solid green; background: #0ee" height="100px">
                        <label value="Right box"/>
                    </div>
                </columnchildren>
            </columnlayout>
        </center>
        <south>
            <div>
                <button label="Invalidate" onClick="layout.invalidate()"/>
                        
                <button label="Max Left"  onClick='right.visible=false; middle.visible=false; left.width="99%";' />
                <button label="Min Left"  onClick='right.visible=true;  middle.visible=true;  left.width="44%"' />
                <button label="Max Right" onClick='left.visible=false;  middle.visible=false; right.width="99%";'/>
                <button label="Min Right" onClick='left.visible=true;   middle.visible=true;  right.width="44%";'/>
            </div>
        </south>
    </borderlayout>
</zk>