ZK Border Layout–Menu on the left and content on the right.

In this post, let us see how we can load all our project menu in the left and on click of each of menu, then we will load individual zul file on the right side. Here, we are going to use border layout, where north border going to content menu and west border will be used to load the individual zul file.

Many thanks Stephan who helped me to complete this task. Here is the forum thread
http://www.zkoss.org/forum/listComment/18840-Menu-Links-on-Left-Side-and-Page-Content-on-Right-Side?lang=en

ZK Version : ZK 6

Project Name :BorderLayout

Project Structure;

Demo.zul

<zk>

    <window border="none" width="100%" height="100%" id="main">
        <separator />
        <div left="20px" height="25px">
            <image src="/images/zklogo_s.png"
                style="padding-left: 10px;" height="30px" width="auto" />
        </div>
        <separator />
        <borderlayout id="mainlayout">
            <north border="normal" height="70px">
                <div id="Menu" sclass="Mainmenudiv">
                    <include src="mainmenu.zul" />
                </div>
            </north>
            <west title=" " size="20%" flex="true" splittable="true"
                collapsible="true">
                <div id="nav" style="background:white; height:100%">
                    <include src="navmenu.zul" />
                </div>
            </west>
            <center border="normal">
                <div height="99%" id="Screen"></div>
            </center>
            <south height="70px">
                <div align="center">
                    <label
                        value="Copyright © 2012 xxxxxxxx All Rights Reserved. Powered By xxxxx"
                        sclass="loginlabel" />
                </div>
            </south>
        </borderlayout>
    </window>
</zk>

democomposer.java

package mydomain;

import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.MouseEvent;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.Path;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Borderlayout;
import org.zkoss.zul.Center;
import org.zkoss.zul.Messagebox;

public class democomposer extends GenericForwardComposer {

    public void onClickMenu(MouseEvent event) {

        String zulFilePathName;
        Borderlayout bl = (Borderlayout) Path.getComponent("/main/mainlayout");
        /* get an instance of the searched CENTER layout area */
        Center center = bl.getCenter();

        /* clear the center child comps */
        center.getChildren().clear();

        //Messagebox.show("inside"  + event.getTarget().getId());
        zulFilePathName = event.getTarget().getId() + ".zul";
        /* create the page and put it in the center layout area */
        Executions.createComponents(zulFilePathName, center, null);
    }
}

zk.zul

<?page title="Main Menu" contentType="text/html;charset=UTF-8"?>
<zk>
    <label value="ZK Contents goes here" style="color: #696569; font-size : 34px; font-weight: bold;" />
</zk>

 

blog.zul

<?page title="Main Menu" contentType="text/html;charset=UTF-8"?>
<zk>
    <label value="ZK blog Contents goes here" style="color: #696569; font-size : 34px; font-weight: bold;" />
</zk>

Contributors.zul

<?page title="Main Menu" contentType="text/html;charset=UTF-8"?>
<zk>
    <label value="ZK Contributors Contents goes here" style="color: #696569; font-size : 34px; font-weight: bold;" />
</zk>

forum.zul

<?page title="Main Menu" contentType="text/html;charset=UTF-8"?>
<zk>
    <label value="ZK forum goes here" style="color: #696569; font-size : 34px; font-weight: bold;" />
</zk>

mainmenu.zul

<?page title="Main Menu" contentType="text/html;charset=UTF-8"?>
<zk>
    <label value="Welcome to ZK" style="color: #696569; font-size : 34px; font-weight: bold;" />
</zk>

navmenu.zul

<?page title="Method3"?>

<zk>
    <style>
        .z-groupbox-3d-hm { background-image: none; background-color:
        #0A246A !important; } .z-groupbox-3d-header .z-caption { color:
        yellow; font-weight: bold;; } .z-groupbox-3d-cnt{
        background-image: none; background-color: #EAECF0 !important; }

        .open-true {float:right; background:url('img/UP201.png')
        no-repeat right 0; height: 16px; padding-right: 20px;
        font-weight: bold; }

        .open-false {float:right; background:url('img/Down201.png')
        no-repeat right 0; height: 16px; padding-right: 20px;
        font-weight: bold; }

    </style>
    <window title="Administration" border="normal" width="270px" apply="mydomain.democomposer">
        <groupbox width="250px" mold="3d">
            <attribute name="onOpen"><![CDATA[
    arrow1.setSclass("open-" + self.isOpen());
]]></attribute>
            <caption label="Products">
                <div id="arrow1" class="open-true"></div>
            </caption>

            <vbox>
                <toolbarbutton id="ZK" label="ZK"  forward="onClick=onClickMenu()"/>
                <toolbarbutton id="ZkStudio" label="ZK Studio" forward="onClick=onClickMenu()"/>
                <toolbarbutton id="ZkSpring" label="ZK Spring" forward="onClick=onClickMenu()"/>
                <toolbarbutton id="ZKSpread" label="ZK SpreadSheet" forward="onClick=onClickMenu()"/>
            </vbox>
        </groupbox>
        <groupbox width="250px" mold="3d">
            <attribute name="onOpen"><![CDATA[
    arrow2.setSclass("open-" + self.isOpen());
]]></attribute>
            <caption label="ZK Demo">
                <div id="arrow2" class="open-true"></div>
            </caption>

            <vbox>
                <toolbarbutton id="ZKCalender"
                    label="ZK Calender" forward="onClick=onClickMenu()"/>
                <toolbarbutton id="ZKWebmail" label="ZK Web Mail" forward="onClick=onClickMenu()"/>
                <toolbarbutton id="ZKSandbox"
                    label="ZK Sand Box" forward="onClick=onClickMenu()"/>
                <toolbarbutton id="ZKPiv" label="ZK Pivottable" forward="onClick=onClickMenu()"/>
            </vbox>
        </groupbox>
        <groupbox width="250px" mold="3d">
            <attribute name="onOpen"><![CDATA[
    arrow.setSclass("open-" + self.isOpen());
]]></attribute>
            <caption label="Community">
                <div id="arrow" class="open-true"></div>
            </caption>

            <vbox>
                <toolbarbutton id="forum"
                    label="forum" forward="onClick=onClickMenu()"/>
                <toolbarbutton id="blog"
                    label="Blog" forward="onClick=onClickMenu()"/>
                <toolbarbutton id="Contributors"
                    label="ZK Contributors" forward="onClick=onClickMenu()"/>
            </vbox>
        </groupbox>

    </window>
</zk>

ZKCalender.zul

<?page title="Main Menu" contentType="text/html;charset=UTF-8"?>
<zk>
    <label value="ZK calender contents goes here" style="color: #696569; font-size : 34px; font-weight: bold;" />
</zk>

ZKPiv.zul

<?page title="Main Menu" contentType="text/html;charset=UTF-8"?>
<zk>
    <label value="ZK pivottable contents goes here" style="color: #696569; font-size : 34px; font-weight: bold;" />
</zk>

ZKSandbox.zul

<?page title="Main Menu" contentType="text/html;charset=UTF-8"?>
<zk>
    <label value="ZK sandbox goes here" style="color: #696569; font-size : 34px; font-weight: bold;" />
</zk>

ZKSpread.zul

<?page title="Main Menu" contentType="text/html;charset=UTF-8"?>
<zk>
    <label value="ZK spreadsheet content goes here" style="color: #696569; font-size : 34px; font-weight: bold;" />
</zk>

ZkSpring.zul

<?page title="Main Menu" contentType="text/html;charset=UTF-8"?>
<zk>
    <label value="ZK spring content goes here" style="color: #696569; font-size : 34px; font-weight: bold;" />
</zk>

Now run the demo.zul and Click on the links on the left menu

Click here to see the demo

Download the source as war file