# Menu Links on Left Side and Page Content on Right Side

raviteja
90

Hai All,

i want to show my page as menulinks on left side and the related content on right side of the same page how can i achevie this by using zk.
i want to use only div tags not an iframe .................
can any body help me out of this by posting any example code.......................

delete retag edit

## 17 Replies

twiegand
1807 3

raviteja,

I would suggest that the easiest way to accomplish this is through the use of ZK's borderlayout component - like this:

<zk>
<window height="100%">
<borderlayout>
<vlayout>
</vlayout>
</west>
<center>
<div align="center">
Content goes here
</div>
</center>
</borderlayout>
</window>
</zk>


However, if you really want to do this with only <div> tags, then you could do something like this:

<zk>
<window height="100%">
<div width="30%" style="float:left;">
<vlayout>
</vlayout>
</div>
<div width="70%" style="float:left;">
<div align="center">
Content goes here
</div>
</div>
<div style="clear:both;"/>
</window>
</zk>


Hopefully that will give you a couple of ideas.

Regards,

Todd

zknewbie1
370 4

I'd like to see the code to dynamically update the content of the right div area when clicking the menu item on the left div area, for example, if I click "Menu Item 1", then the right div area will display the text "This is Menu Item 1 contents....", if clicking "Menu Item 2", then right div will display "This is Menu Item 2 contents", etc....

twiegand
1807 3

zknewbie1,

Which version of the example do you want your modifications?

Todd

zknewbie1
370 4

I'd like to see both if not too much trouble. Else, if I could see the easiest way to do it. Thanks very much Twiegand..

twiegand
1807 3

zknewbie1,

Let's start with the <borderlayout> version.  This first example just uses event handling to set the label in the center section.

<zk>
<window height="100%">
<borderlayout>
<vlayout>
<label value="Section 1" onClick='lbl.setValue("Section 1 Content Here")'/>
<label value="Section 2" onClick='lbl.setValue("Section 2 Content Here")'/>
<label value="Section 3" onClick='lbl.setValue("Section 3 Content Here")'/>
</vlayout>
</west>
<center>
<div align="center">
<label id="lbl"/>
</div>
</center>
</borderlayout>
</window>
</zk>


Next, let's add a controller to the above example:

Composer

import org.zkoss.zk.ui.util.GenericForwardComposer;

public class MyComposer extends GenericForwardComposer {
protected Label lbl;
lbl.setValue(event.getOrigin().getTarget().getValue() + " goes here");
}
}


zul

<zk>
<window apply="MyComposer" height="100%">
<borderlayout>
<vlayout>
</vlayout>
</west>
<center>
<div align="center">
<label id="lbl"/>
</div>
</center>
</borderlayout>
</window>
</zk>


Using the forward event in this manner lets you have a single method that determines which menu item the user clicked and then sets the content label accordingly.

Note that if you wanted to set an ID on the menu label, you could interrogate that instead of the label's value by changing the statement in the onClickMenu() method to look like this instead:

lbl.setValue(event.getOrigin().getTarget().getId() + " goes here");


I hope that helps,

Todd

zknewbie1
370 4

Thanks Todd. I was thinking about the contents of each menu item as a separate Zul page, for example, MenuItem1 is tied to Content1.zul, MenuItem2 is to Content2.zul, .... So, from your example, which method should I use to dynamically associate the <center> area with the appropriate content zul file?

twiegand
1807 3

zknewbie1,

Try this:

Composer

import org.zkoss.zk.ui.util.GenericForwardComposer;

public class MyComposer extends GenericForwardComposer {
protected Include centerSection;
centerSection.setSrc(event.getOrigin().getTarget().getId() + ".zul");
}
}


main.zul

<zk>
<window apply="MyComposer" height="100%">
<borderlayout>
<vlayout>
</vlayout>
</west>
<center>
<div align="center">
<include id="centerSection" />
</div>
</center>
</borderlayout>
</window>
</zk>


section1.zul

<zk>
<separator height="50px"/>
Section 1 Content
</zk>


section2.zul

<zk>
<separator height="50px"/>
Section 2 Content
</zk>


section3.zul

<zk>
<separator height="50px"/>
Section 3 Content
</zk>


Hope that helps,

Todd

zknewbie1
370 4

Hi Todd, that's perfect. Thanks so much for all your help..

boloi
105

Hi all,
I have layout consist of : North,west,center
West : Ha ve tree menu
The same http://www.zkoss.org/zksandbox/#l1 demo.When click menu on the left,the content will be load into center.

9393 3 7 16
http://www.oxitec.de/

You must modify the attached sample codes to your component names which are declared in your zul-file..

/* get an instance of the borderlayout defined in the zul-file */
Borderlayout bl = (Borderlayout) Path.getComponent("/outerIndexWindow/borderlayoutMain");

/* get an instance of the searched CENTER layout area */
Center center = bl.getCenter();

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

/* create the page and put it in the center layout area */
Executions.createComponents(zulFilePathName, center, null);


best
Stephan

[hide preview]