ZK Developer's Reference/Event Handling/Event Forwarding

Overview

For easy programming, ZK does not introduce any complex event flow. When an event is sent to a target component, only the event listeners registered for the target component will be called. It is the application's job to forward an event to another component if necessary.

For example, you might have a menu item and a button to trigger the same action, say, opening a dialog, and then it is more convenient to have a single listener to open the dialog, and register the listener to the main window rather than register to both the menu item and button.

Event Forwarding in Java

Forwarding an event is straightforward: just posting or sending the event again. However, there is a better way: composer. The composer can be the central place to handle the events. For example, you could invoke openDialog in the event handler for the menu item and button as shown below:

public class FooComposer extends SelectorComposer {
   @Listen("onClick = menuitem#item1; onClick = button#btn")
   private void openDialog() {
     //whatever you want
   }
}

Event Forwarding in ZUML

Event forwarding can be done with the forward attribute in ZUML. For example,

<window id="mywin">
	<button label="Save" forward="onSave"/>
	<button label="Cancel" forward="onCancel"/>
</window>

Then, window will receive the onSave event when the Save button is clicked.

With this approach we could introduce an abstract layer between the event and the component. For example, window needs only to handle the onSave event without knowing which component causes it. Therefore, you could introduce another UI to trigger onSave without modifying the event listener. For example,

	<menuitem label="Save" forward="onSave"/>

Of course, you can use the composer and ZUML's forward together to have more maintainable code.

1 public class BetterComposer
2 extends org.zkoss.zk.ui.select.SelectorComposer {
3     @Listen("onSave = #mywin")
4     public void doSave(ForwardEvent event) { //signature if you care about the event
5         ...
6     }
7     @Listen("onCancel = #mywin")
8     public void doCancel() { //signature if you don't care about the event
9         ...

Notice that, as shown above, the event being forwarded is wrapped as an instance of ForwardEvent. To retrieve the original event, you could invoke ForwardEvent.getOrigin().

Using a component Path

You can also use a component Path within your ZUML pages to specify a target component to which you would like to forward a specific event. This is especially useful if you want to forward events across different IdSpace such as forwarding events from a component in an included ZUML page to the main page component. For example,

<?page id="mainPage" ?>
<window id="mainWindow" apply="BetterComposer">
...
    <include src="incDetails.zul" />
...
</window>

Now in your included page use Path while forwarding events to mainWindow Window component.

   <button forward="//mainPage/mainWindow.onSave" /> <!-- default forward event is onClick -->

Forward with Parameters

You can specify any application-specific data in the forward attribute by surrounding it with the parenthesis as shown below:

 <button forward="onCancel(abort)"/><!-- "abort" is passed -->
 <button forward="onPrint(${inf})"/><!-- the object returned by ${inf} is passed -->

Then, you can retrieve the application-specific data by ForwardEvent.getData().

Notice: When using forward attribute in the ZUML(.zul) with ZK MVC controller, you have to get the original event by using getOrigin(), then you can access the data by getData()

• Example : ZUL

<tabbox id="ctrl" apply="composer1">
  <tabs>
     <tab id="tb1" label="News" forward="ctrl.onSelectTab(0)"></tab>
     <tab id="tb2" label="News Images" forward="ctrl.onSelectTab(1)"></tab>
  </tabs>
</tabbox>

• Example Composer (composer1)

	@Listen("onSelectTab = #ctrl")
	public void doChangeTab(ForwardEvent e) { 
	    MouseEvent me = (MouseEvent) e.getOrigin();
	    System.out.println(me.getData());
	}

Foward Multiple Events

If you want to forward several events at once, you can specify them in the forward attribute by separating them with commas ,. For example,

 <textbox forward="onChanging=onUpdating, onChange=some.onUpdate"/>

In addition, the target component and the event data can be specified in EL expressions, while the event names cannot.