Thursday, December 20, 2012

ZK Listening/Processing Event in ZUL Page or Java Code


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.


ZK Basic MVC Pattern with GenericForwardComposer

The Program


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

    <!-- 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 !");
        <button id="btnTwo" label="button two" />

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
public class ListeningProcessingEventTestComposer extends GenericForwardComposer {
    Button btnTwo;
    Textbox tb;
    public void doAfterCompose (Component comp) throws Exception {
        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


Event listening and processing's%20Guide/ZK%20in%20Depth/Event%20listening%20and%20processing


Files at github


Demo flash


  1. Hi

    Great Blog. I do not know how to send email to you.

    I have the following question.

    if you create examples for this in your blog,
    that would be great

    1. It's okay, actually I seldom check my mail (I guess over 3 months...), usually check blog/SF directly.

    2. Hi Senthil,

      I'm not sure whether the EventQueues ( is the answer?

  2. I have another question.
    Since you have extended GenericForwardComposer,
    so i can simply write as

    public void onClick$btnTwo()

    Then why have to add event listener and receive the event

    1. Because addEventListener is more general, you can use this anywhere if you have the component's instance, and is more fit to this purpose "Processing Event in Java Code" (or it should be "in GFC" instead of "in Java Code").