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.
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>
