ZK Demoトップページレイアウトコード

<borderlayout id="main" apply="org.zkoss.zkdemo.userguide.MainLayoutComposer">  
    <north border="none" size="100px" sclass="demo-header" collapsible="true">  
        <div>  
            <div sclass="demo-logo pointer" onClick='Executions.sendRedirect("http://www.zkoss.org")'>  
                <image width="90px" height="80px" src="/img/ZK-Logo.gif" mce_src="img/ZK-Logo.gif"/>  
            </div>  
            <categorybar zclass="demo-categorybar" id="header">  
                <category forEach="${main.categories}" id="${each.id}" src="${each.icon}" mce_src="${each.icon}" label="${each.label}"/>  
            </categorybar>  
        </div>  
    </north>  
    <west title="ZK ${desktop.webApp.version} Live Demo" size="250px" flex="true" splittable="true"  
        minsize="210" maxsize="500" collapsible="true">  
        <panel>  
            <toolbar>  
                <label value="Search:"/><textbox id="searchBox" ctrlKeys="#down#up" focus="true" sclass="demo-search-inp"/>  
            </toolbar>  
            <panelchildren>  
                <listbox id="itemList" oddRowSclass="non-odd" sclass="demo-items"  
                    itemRenderer="${main.itemRenderer}" model="${main.selectedModel}" fixedLayout="true" vflex="true">                      
                </listbox>  
            </panelchildren>  
        </panel>  
    </west>  
    <center autoscroll="true" flex="true">  
        <include style="padding:3px;" mce_style="padding:3px;" id="xcontents" />  
    </center>  
</borderlayout>