Requirement Constraints: ZK Layout

This examples show how you can use ZK Border Layout to show the product information on clicking image.

ZK Version 6
Project Name : BorderLayout2
Project Structure:

Output:

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>

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>
                <image id = "product1" src="/img/product1.png"  forward="onClick=onClickMenu()"
                    style="padding-left: 10px; cursor: pointer" height="100px" width="auto" />
                    <separator bar="true" width="250px"/>
                <image id = "product2"  src="/img/product2.png"  forward="onClick=onClickMenu()"
                    style="padding-left: 10px; cursor: pointer" height="100px" width="auto" />
                    <separator bar="true" width="250px"/>
                <image id = "product3"  src="/img/product3.png"  forward="onClick=onClickMenu()"
                    style="padding-left: 10px; cursor: pointer" height="100px" width="auto" />
                    <separator bar="true" width="250px"/>

            </vbox>
        </groupbox>

    </window>
</zk>

product1.zul

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

product2.zul

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

product3.zul

<?page title="Main Menu" contentType="text/html;charset=UTF-8"?>
<zk>
    <label value="Product 3 Information goes here" style="color: #696569; font-size : 34px; font-weight: bold;" />
</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);
    }
}

You can download source here

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.

Left hug 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>

Requirement Constraints

Tuesday, 26 June 2012

ZK Border Layout–Another example

You can download source here

Monday, 18 June 2012

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

ZK Version : ZK 6

Project Name :BorderLayout

Project Structure;

Demo.zul

democomposer.java

zk.zul

blog.zul

Contributors.zul

forum.zul

mainmenu.zul

navmenu.zul

ZKCalender.zul

ZKPiv.zul

ZKSandbox.zul

ZKSpread.zul

ZkSpring.zul

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

Popular Posts

Categories

Blog Archive

About Me