-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hi everyone,
I'm new in ZK, I'm using the template pattern from the ZK template pattern live demo and I would like to know what do I have to do in order to update the content area once I click on one menu option from the left area of this template.
Thank you in advance.
I think you are talking about this sample.
http://www.zkoss.org/zkdemo/composite/template_pattern
In case to update the content from left navigation , that's actually the process below.
1.There should exist some event handler in the left navigation for those menu options. (the sidebar.zul in the sample )
Then you will send a message to the content to update the content.
2.Then you want to change the content , that means actually you have to include a new zul or update some data from the content page.
It's actually the include in "template/fixed-center.zul" .
It's more like a cross include communication for your real question ,
for my suggestion , you could reference to this sample for how to send message to another zul.
And then you could update the content according to the message.
package j379s7ev$v3.consts;public class MyConsts {
public final static String EVENTQUEUE_CONNECTION = "connection";
public final static String EVENT_MESSAGE_1 = "sendMessage1";
}
package j379s7ev$v3;import j379s7ev$v3.consts.MyConsts;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.event.EventQueue;
import org.zkoss.zk.ui.event.EventQueues;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Label;
public class Include2Composer extends GenericForwardComposer{
private Label lbl;/*
* create "connection" EventQueue , all the "connection" EventQueue could talke to each other.
*
* (You could change the naming of "connection" to anything you like. ;) )
*
* Note: we use desktop level EventQueue , only EventQueue in the same desktop will get the published event.
*
* That means if there are different session or different desktop , it won't have any side effect to others.
But if you are using "application scope" EventQueue , you have to take care of taht.
*
*
* More reference.
* http://books.zkoss.org/wiki/ZK_Developer's_Reference/Event_Handling/Event_Queues
*/
private EventQueue qe= EventQueues.lookup(MyConsts.EVENTQUEUE_CONNECTION,true);
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
//subcribe event
qe.subscribe(new EventListener() {
public void onEvent(Event event) throws Exception {//If you have many event go through this event queue,
// you have to handle the event name by yourself now.
//All the event will publish to every subcriber.
if(MyConsts.EVENT_MESSAGE_1.equals(event.getName())){
//Recieved from Include1
String message = (String) event.getData();
lbl.setValue(message);
}
}
});
}
}
package j379s7ev$v3;import j379s7ev$v3.consts.MyConsts;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventQueue;
import org.zkoss.zk.ui.event.EventQueues;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Textbox;public class Include1Composer extends GenericForwardComposer {
private Textbox msg;
/*
* create "connection" EventQueue , all the "connection" EventQueue could talke to each other.
*
* (You could change the naming of "connection" to anything you like. ;) )
*
* Note: we use desktop level EventQueue , only EventQueue in the same desktop will get the published event.
*
* That means if there are different session or different desktop , it won't have any side effect to others.
But if you are using "application scope" EventQueue , you have to take care of taht.
*
*
* More reference.
* http://books.zkoss.org/wiki/ZK_Developer's_Reference/Event_Handling/Event_Queues
*/
EventQueue qe = EventQueues.lookup(MyConsts.EVENTQUEUE_CONNECTION, true);public void onClick$btn(Event e) {
//publish event to include1 by connection EventQueue
//Note here the third argument is event data , you could get the event from reciever.
//if you need to pass multiple objects , you could consider to pass a List/Map.
qe.publish(new Event(MyConsts.EVENT_MESSAGE_1,null,msg.getValue()));
}
}
<?page title="Include talk by event queue sample - include2 " ?>
<zk><div apply="j379s7ev$v3.Include2Composer">
<div>
<zscript>
Date d = new Date();
</zscript>
Last Invalidate:${d}
</div>
Received from Include.zul :<label id="lbl" ></label>
</div>
</zk>
<?page title="Include talk by event queue sample - include1 " ?>
<zk>
<div apply="j379s7ev$v3.Include1Composer">
<div>
<zscript>
Date d = new Date();
</zscript>
Last Invalidate:${d}
</div>
<textbox id="msg" value="test" ></textbox>
<button id="btn" label="Send message to Include2" ></button>
</div>
</zk>
<?page title="Include talk by event queue sample" ?>
<zk>
<vlayout>
<groupbox >
<caption label="Include.zul" />
<include src="include.zul" />
</groupbox>
<groupbox >
<caption label="Include2.zul" />
<include src="include2.zul" />
</groupbox>
</vlayout></zk>
Thank you very much for your help Tony, although I was not talking about this your comments gave me new ideas, however, what I meant is to load the entire page depending on what the user clicked on the main menu which is located on the left zul page inside the template.
This is, on the left page I have all the menu options, if the user clicks on the "Create document" option, the content page will change to the page in charge to collect the document creation info, an entire diferent page will be displayed if the user click on a different option from the left side menu, for instance "Show all the documents created".
I really appreciate your help.
I am not sure what you mean about "an entire different page" , but I am sure I am talking the same thing , let me try to explain it more.
Usually there's two way to load a entire different page ,
1. go to a new url , you could use Executions.getCurrent().sendRedirect() to do this (most common way )
if you are looking for this , that's all.
2.Using include component to load the full content page , when user click a link , we actually change the include component 's "src" attribute ,
and my previous post is talking about this solution.
How could the content page get the event from left navigation and know which page to go ?
EventQueue will be a good idea.
In the previous sample it's talking about send a string to another composer , but if you treat the string as a page source , if could do the job you want.
Asked: 2011-08-04 17:21:48 +0800
Seen: 217 times
Last updated: Aug 05 '11