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