Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
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.......................
Thanks in Advance...
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> <west title="Navigation" collapsible="true"> <vlayout> <label value="Menu Item 1"/> <label value="Menu Item 2"/> <label value="Menu Item 3"/> </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> <label value="Menu Item 1" /> <label value="Menu Item 2" /> <label value="Menu Item 3" /> </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
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....
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>
<west title="Navigation" collapsible="true">
<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;
public void onClickMenu(Event event) {
lbl.setValue(event.getOrigin().getTarget().getValue() + " goes here");
}
}
zul
<zk> <window apply="MyComposer" height="100%"> <borderlayout> <west title="Navigation" collapsible="true"> <vlayout> <label value="Section 1" forward="onClick=onClickMenu()"/> <label value="Section 2" forward="onClick=onClickMenu()"/> <label value="Section 3" forward="onClick=onClickMenu()"/> </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
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?
zknewbie1,
Try this:
Composer
import org.zkoss.zk.ui.util.GenericForwardComposer;
public class MyComposer extends GenericForwardComposer {
protected Include centerSection;
public void onClickMenu(Event event) {
centerSection.setSrc(event.getOrigin().getTarget().getId() + ".zul");
}
}
main.zul
<zk> <window apply="MyComposer" height="100%"> <borderlayout> <west title="Navigation" collapsible="true"> <vlayout> <label value="Section 1" id="section1" forward="onClick=onClickMenu()"/> <label value="Section 2" id="section2" forward="onClick=onClickMenu()"/> <label value="Section 3" id="section3" forward="onClick=onClickMenu()"/> </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
Hi all,
I have problem,please help me.
I have layout consist of : North,west,center
West : Ha ve tree menu
Center: to load page when user click on menu in the left.Defend on menu,the content will be load in center.
The same http://www.zkoss.org/zksandbox/#l1 demo.When click menu on the left,the content will be load into center.
Please help
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
Asked: 2012-03-05 07:40:08 +0800
Seen: 990 times
Last updated: Dec 11 '12