Pass Event to Other Component

Introduction

Some times we want to change a component while some event of another component is triggered, we can achieve this by posting an event with some data to the component we want to change instead of modify it directly in the event listener of another component.

This seems a little bit weird and useless but this would be helpful in some situation such like implementing inplace editing of grid with renderer under MVVM (will be described in another article later)

Pre-request

(must)
Basic MVC with SelectorComposer
http://ben-bai.blogspot.tw/2012/10/zk-basic-mvc-pattern-with_31.html

The Composer

PasseventTestComposer.java

Simply post an event to label while the value of textbox is changed, update label's value in the event listener itself.

package test.event.passeventtest;

import java.util.HashMap;
import java.util.Map;

import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.Events;
import org.zkoss.zk.ui.event.InputEvent;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Label;

/**
 * Tested with ZK 6.0.2
 * 
 * Test passing event with data from one component to another
 * 
 * This seems a little bit weird and useless here
 * but this would be helpful in some situation
 * such like implement inplace editing of grid with renderer
 * under MVVM
 * (will be described in another article later)
 * 
 * @author benbai
 *
 */
public class PasseventTestComposer extends SelectorComposer {
    @Wire
    Label lb;

    /**
     * Post an event with the new value to label
     * while the value of textbox is changed
     * instead of modify the value of label directly
     * @param event
     */
    @Listen("onChange=#tbx")
    public void onChange$tbx (InputEvent event) {
        Map data = new HashMap();
        data.put("value", event.getValue());
        Events.postEvent("onValueChange", lb, data);
    }
    /**
     * Really modify the value of label here
     * @param event
     */
    @Listen("onValueChange=#lb")
    public void onValueChange$lb (Event event) {
        Map data = (Map)event.getData();
        String value = (String)data.get("value");
        lb.setValue(value);
    }
}

The ZUL Page

pass_event_to_other_component.zul

<zk>
    <!-- Tested with ZK 6.0.2 -->
    <window apply="test.event.passeventtest.PasseventTestComposer">
        <label id="lb" value="label" />
        <textbox id="tbx" />
    </window>
</zk>

The Result

View demo on line
http://screencast.com/t/9wYBLE3lubaF

Reference

http://books.zkoss.org/wiki/ZK_Developer's_Reference/Event_Handling/Event_Firing

Download

Files at github

pass_event_to_other_component.zul
https://github.com/benbai123/ZK_Practice/blob/master/Components/projects/Components_Practice/WebContent/pass_event_to_other_component.zul

PasseventTestComposer.java
https://github.com/benbai123/ZK_Practice/blob/master/Components/projects/Components_Practice/src/test/event/passeventtest/PasseventTestComposer.java

pass_event_to_other_component.swf
https://github.com/benbai123/ZK_Practice/blob/master/Components/demos/pass_event_to_other_component.swf