ZK Listening/Processing Event in ZUL Page or Java Code

Introduction

In ZK, you can listen to and process an event of a component in ZUL page, or listen to and process an event by adding an EventListener by java code.

This article will describe the two methods to listen/process event.

Pre-request

ZK Basic MVC Pattern with GenericForwardComposer
http://ben-bai.blogspot.tw/2012/10/zk-basic-mvc-pattern-with.html

The Program

listening_and_processing_event_in_zul_or_java.zul

There are two buttons in this page, the first one listening and processing the onClick event in zul page directly, an EventListener will be added to the second button by java code in ListeningProcessingEventTestComposer.java.

<zk>
    <!-- tested with ZK 6.0.2 -->
    <div apply="test.ListeningProcessingEventTestComposer">
        <textbox id="tb" />
        <!-- the button below listening and processing in zul page
             -->
        <button label="button one">
            <!-- the fragment below is equal to
                addEventListener("onClick", new EventListener () {
                    public void onEvent (Event event) {
                        tb.setValue("button one clicked !");
                    }
                });
                where the 'tb' here will mapping to the component that id is 'tb'
                in the zul page by ZK automatically -->
            <attribute name="onClick"><![CDATA[
                tb.setValue("button one clicked !");
            ]]></attribute>
        </button>
        <button id="btnTwo" label="button two" />
    </div>
</zk>

ListeningProcessingEventTestComposer.java

Simply add an EventListener to btnTwo in doAfterCompose method

package test;

import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Button;
import org.zkoss.zul.Textbox;

/**
 * tested with ZK 6.0.2
 * @author ben
 *
 */
@SuppressWarnings("serial")
public class ListeningProcessingEventTestComposer extends GenericForwardComposer {
    Button btnTwo;
    Textbox tb;
    public void doAfterCompose (Component comp) throws Exception {
        super.doAfterCompose(comp);
        btnTwo.addEventListener( // add an EventListener
            "onClick", // listen to onClick event
            new EventListener () { // create an EventListener instance to add
                public void onEvent (Event event) { // the method will be called while onClick event triggered
                    tb.setValue("button two clicked !"); // set some string to the Textbox tb !
                }
            }
        );
    }
}

The Result

View demo on line
http://screencast.com/t/nLZ72Lj9X

Reference

Event listening and processing
http://books.zkoss.org/wiki/ZK%20Developer's%20Guide/ZK%20in%20Depth/Event%20listening%20and%20processing

Download

Files at github

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

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

Demo flash
https://github.com/benbai123/ZK_Practice/blob/master/Components/demos/listening_processing_event_in_zul_or_java.swf