ZK Border Layout–Another example

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:

image

Output:

image

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
Labels: