0

About the template pattern update.

asked 2011-08-04 17:21:48 +0800

AntonioRAlarcon gravatar image AntonioRAlarcon
6

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.

delete flag offensive retag edit

3 Replies

Sort by » oldest newest

answered 2011-08-04 18:13:23 +0800

TonyQ gravatar image TonyQ
642
https://www.masterbranch....

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.

ZKFiddle-Link

MyConsts.java
package j379s7ev$v3.consts;

public class MyConsts {
public final static String EVENTQUEUE_CONNECTION = "connection";
public final static String EVENT_MESSAGE_1 = "sendMessage1";
}


Include2Composer.java
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);

}
}
});
}
}


Include1Composer.java
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()));
}
}


include2.zul
<?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>


include.zul
<?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>

index.zul
<?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>

link publish delete flag offensive edit

answered 2011-08-05 08:44:37 +0800

AntonioRAlarcon gravatar image AntonioRAlarcon
6

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.

link publish delete flag offensive edit

answered 2011-08-05 11:29:27 +0800

TonyQ gravatar image TonyQ
642
https://www.masterbranch....

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.

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: 2011-08-04 17:21:48 +0800

Seen: 217 times

Last updated: Aug 05 '11

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