Thursday, December 20, 2012

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

5 comments:

  1. Hi

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

    I have the following question.

    http://www.zkoss.org/forum/listComment/21545-Passing-Parameter-between-two-zul-files

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

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

      Delete
    2. Hi Senthil,

      I'm not sure whether the EventQueues (http://books.zkoss.org/wiki/Small_Talks/2009/August/ZK_5:_Chat_with_Event_Queue) is the answer?

      Delete
  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

    ReplyDelete
    Replies
    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").

      Delete