Revision history [back]

click to hide/show revision 1
initial version

answered 2018-09-28 15:31:09 +0800

BrotherRichard gravatar image BrotherRichard

Thank so much! With the benefit of your help, I was able to get it working.

There can only be one component outside the borderlayout. I had a div, then a vbox, then the borderlayout. I also had added a style="" to the directive. That created another outside container. When I removed the style element from page and used only one container, it worked exactly as I wanted it to. The one container needed to be a div. A vbox or vlayout did not work. And, as you showed above, it needed to have a vflex="1" attribute. Here is what I ended up with (with all proprietary information removed and some style factoring yet to be done):

<zk>

    <navmenu id="navmenu" menuClass="" visible='false'
        viewModel="@id('nvm') @init('')" />
    <include id="usermenu" src="/widgets/menu/userMenu.zul" />

    <borderlayout sclass="mainBorder"  >
        <north sclass="mainHeader" splittable="false" >
            <hbox hflex="1" vflex="0" align="center" pack="center">
                <toolbarbutton id="" sclass="mainButton" src="" onClick="@command('showNavMenu')"/>
                <div hflex="1" sclass="mainHeaderCenter">
                    <div sclass="mainHeaderCenterIcon" onClick="@command('goHome')">
                        <image sclass="mainIcon" src="" />
                    </div>
                </div>
                <toolbarbutton id="userMenuButton" sclass="" imageContent="@load()" onClick="@command('showUserMenu')" />
            </hbox>
        </north>
        <center sclass="mainCenter" vflex="1" autoscroll="true">
            <vbox hflex="1" vflex="1" pack="top" align="center" sclass="mainCenterContent" >
                <label value="@load()" style="font-style: bold; font-size: 16pt"/>
                <label value="@load()" style="font-size: 12pt" />

                <include id="content" mode="instant" src="@load()" />
            </vbox>
        </center>
        <south sclass="mainFooter" splittable="false" >
            <hbox hflex="1" vflex="0" align="center" pack="center">
                <label value="@load(avm.status)" sclass="@load(avm.statusClass)" />
            </hbox>
        </south>
    </borderlayout>

</zk>

Thank so much! With the benefit of your help, I was able to get it working.

There can only be one component outside the borderlayout. I had a div, then a vbox, then the borderlayout. I also had added a style="" to the directive. That created another outside container. When I removed the style element from page and used only one container, it worked exactly as I wanted it to. The one container needed to be a div. A vbox or vlayout did not work. And, as you showed above, it needed to have a vflex="1" attribute. Here is what I ended up with (with all proprietary information removed and some style factoring yet to be done):

<zk>

<?link rel="stylesheet" type="text/css" href="/style/common.css"?>
<?page title="" ?>
<?component name="navmenu" class="" ?>
<zk>
    <div id="application" sclass="main"
        viewModel="@id('avm') @init('')"
        apply="org.zkoss.bind.BindComposer"
        hflex="1" vflex="1"
        style="border: 4px solid red"
        validationMessages="@id('vmsgs')" >

        <navmenu id="navmenu" menuClass="" visible='false'
         viewModel="@id('nvm') @init('')" />
     <include id="usermenu" src="/widgets/menu/userMenu.zul" />

     <borderlayout sclass="mainBorder"  >
         <north sclass="mainHeader" splittable="false" >
             <hbox hflex="1" vflex="0" align="center" pack="center">
                 <toolbarbutton id="" sclass="mainButton" src="" onClick="@command('showNavMenu')"/>
                 <div hflex="1" sclass="mainHeaderCenter">
                     <div sclass="mainHeaderCenterIcon" onClick="@command('goHome')">
                         <image sclass="mainIcon" src="" />
                     </div>
                 </div>
                 <toolbarbutton id="userMenuButton" sclass="" imageContent="@load()" onClick="@command('showUserMenu')" />
             </hbox>
         </north>
         <center sclass="mainCenter" vflex="1" autoscroll="true">
             <vbox hflex="1" vflex="1" pack="top" align="center" sclass="mainCenterContent" >
                 <label value="@load()" style="font-style: bold; font-size: 16pt"/>
                 <label value="@load()" style="font-size: 12pt" />

                 <include id="content" mode="instant" src="@load()" />
             </vbox>
         </center>
         <south sclass="mainFooter" splittable="false" >
             <hbox hflex="1" vflex="0" align="center" pack="center">
                 <label value="@load(avm.status)" sclass="@load(avm.statusClass)" />
             </hbox>
         </south>
     </borderlayout>
 </div>
</zk>

</zk>

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More