0

Menu Links on Left Side and Page Content on Right Side

asked 2012-03-05 07:40:08 +0800

raviteja gravatar image 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.......................

Thanks in Advance...

delete flag offensive retag edit

17 Replies

Sort by ยป oldest newest

answered 2012-03-05 16:01:37 +0800

twiegand gravatar image 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>
			<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

link publish delete flag offensive edit

answered 2012-03-05 16:10:09 +0800

zknewbie1 gravatar image 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....

link publish delete flag offensive edit

answered 2012-03-05 16:24:30 +0800

twiegand gravatar image twiegand
1807 3

zknewbie1,

Which version of the example do you want your modifications?

Todd

link publish delete flag offensive edit

answered 2012-03-05 16:43:06 +0800

zknewbie1 gravatar image 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..

link publish delete flag offensive edit

answered 2012-03-05 17:42:53 +0800

twiegand gravatar image 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>
			<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

link publish delete flag offensive edit

answered 2012-03-05 18:02:51 +0800

zknewbie1 gravatar image 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?

link publish delete flag offensive edit

answered 2012-03-05 18:31:36 +0800

twiegand gravatar image twiegand
1807 3

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

link publish delete flag offensive edit

answered 2012-03-05 20:37:15 +0800

zknewbie1 gravatar image zknewbie1
370 4

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

link publish delete flag offensive edit

answered 2012-03-06 07:25:10 +0800

boloi gravatar image boloi
105

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

link publish delete flag offensive edit

answered 2012-03-06 09:39:55 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

updated 2012-03-06 09:40:18 +0800

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

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2012-03-05 07:40:08 +0800

Seen: 987 times

Last updated: Dec 11 '12

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More