Event Listening"

From Documentation
m
 
(45 intermediate revisions by 7 users not shown)
Line 1: Line 1:
{{ZKComponentReferencePageHeader}}
+
{{ZKDevelopersReferencePageHeader}}
  
There are two ways to listen an event: an event handler and an event listener.
 
  
= Listen by use of an Event Handler =
+
 
 +
= Listen by Use of an Event Listener =
 +
 
 +
== Event Listener ==
 +
 
 +
An event listener is a class implementing <javadoc type="interface">org.zkoss.zk.ui.event.EventListener</javadoc>. For example,
 +
 
 +
<source lang="java">
 +
public class MyListener implements EventListener {
 +
    public void onEvent(Event event) {
 +
        Messagebox.show("Hello");
 +
    }
 +
}
 +
</source>
 +
 
 +
Then, you can register an event listener to the component that might receive the event by the use of <javadoc method="addEventListener(java.lang.String, org.zkoss.zk.ui.event.EventListener)">org.zkoss.zk.ui.Component</javadoc>. For example,
 +
 
 +
<source lang="java">
 +
button.addEventListener("onClick", new MyListener());
 +
</source>
 +
 
 +
This is a typical approach to handle events. However, it is a bit tedious to register event listeners one-by-one if there are a lot of listeners. Rather, it is suggested to use a composer as described in the following section.
 +
 
 +
== Composer and Event Listener Autowiring ==
 +
 
 +
With [[ZK Developer's Reference/MVC]], you generally do not need to register event listeners manually. Rather, they can be registered automatically by the use of the [[ZK Developer's Reference/MVC/Controller/Wire Event Listeners|auto-wiring]] feature of [[ZK Developer's Reference/MVC/Controller|a composer]]. For example,
 +
 
 +
<source lang="java">
 +
public class MyComposer extends SelectorComposer {
 +
    @Listen("onClick = button#hi")
 +
    public void showHi() {
 +
        Messsagebox.show("Hello");
 +
    }
 +
    @Listen("onClick = button#bye")
 +
    public void showBye() {
 +
        Messsagebox.show("Bye");
 +
    }
 +
    @Listen("onOK = window#mywin")
 +
    public void onOK() {
 +
        Messsagebox.show("OK pressed");
 +
    }
 +
}
 +
</source>
 +
 
 +
As shown above, the method to listen is annotated with the <javadoc>org.zkoss.zk.ui.select.annotation.Listen</javadoc> annotation using the event name followed by a selector string identifying the component(s) (for more selector syntax examples see <javadoc>org.zkoss.zk.ui.select.SelectorComposer</javadoc>). The composer will register each annotated method as an event listener to the selected component automatically '''in the same [[ZK%20Developer's%20Reference/UI%20Composing/ID%20Space | ID space]]'''. Then, in the ZUL page, you can specify the <code>apply</code> attribute to associate the composer with a component.
 +
 
 +
<source lang="xml">
 +
<window id="mywin" apply="MyComposer">
 +
    <textbox/>
 +
    <button id="hi"/>
 +
    <button id="bye"/>
 +
</window>
 +
</source>
 +
 
 +
If the listener needs to access the event, just declare it as the argument:
 +
 
 +
<source lang="java">
 +
    @Listen("onClick = button#hi")
 +
    public void showHi(MouseEvent event) {
 +
      Messsagebox.show("Hello, " + event.getName());
 +
    }
 +
</source>
 +
 
 +
Though not limited, a composer is usually associated with an ID space (such as <javadoc>org.zkoss.zul.Window</javadoc>) to handle events and components within the given ID space. You could associate any component that properly represents a scope of your application to manage.
 +
 
 +
For more information please refer to the [[ZK Developer's Reference/MVC/Controller/Wire Event Listeners|Wire Event Listeners]] section.
 +
 
 +
== Deferrable Event Listeners ==
 +
 
 +
By default, events are sent to the server when it is fired at the client. However, many event listeners are just used to maintain the status on the server, rather than providing visual responses to the user. In other words, there is no need to send the events for these listeners immediately. Rather, they shall be sent at once to minimize the traffic between the client and the server so as to improve the server's performance. For the sake of convenience, we call them the deferrable event listeners.
 +
 
 +
To make an event listener deferrable, you have to implement <javadoc type="interface">org.zkoss.zk.ui.event.Deferrable</javadoc> (with <code>EventListener</code>) and return true for the <code>isDeferrable</code> method as follows.
 +
 
 +
<source lang="java" >
 +
public class DeferrableListener implements EventListener, Deferrable {
 +
    private boolean _modified;
 +
    public void onEvent(Event event) {
 +
        _modified = true;
 +
    }
 +
    public boolean isDeferrable() {
 +
        return true;
 +
    }
 +
}
 +
</source>
 +
 +
When an event is fired at the client (e.g., the user selects a list item), ZK won't send the event if no event listener is registered for it or only deferrable listeners are registered. Instead, the event is queued at the client.
 +
 
 +
On the other hand, if at least one non-deferrable listener is registered, the event will be sent immediately with all queued events to the server at once. No event is lost and the arriving order is preserved.
 +
 
 +
<blockquote>
 +
----
 +
'''Tip''': Use the deferrable listeners for maintaining the server status, while the non-deferrable listeners for providing the visual responses for the user.
 +
</blockquote>
 +
 
 +
== Page-level Event Listener ==
 +
Developers could add event listeners to a page (<javadoc type="interface">org.zkoss.zk.ui.Page</javadoc>) dynamically by <javadoc type="interface" method="addEventListener(java.lang.String, org.zkoss.zk.ui.event.EventListener)">org.zkoss.zk.ui.Page</javadoc>. Once added, all events of the specified name sent to any components of the specified page will be sent to the listener.
 +
 
 +
All event listeners added to a page (so-called page-level event listeners) are assumed to be deferrable, no matter if <javadoc type="interface">org.zkoss.zk.ui.event.Deferrable</javadoc> is implemented or not.
 +
 
 +
A typical example is to use a page-level event listener to maintain the modification flag as follows (pseudo code).
 +
 
 +
<source lang="java">
 +
page.addEventListener("onChange", new EventListener() {
 +
    public void onEvent(Event event) {
 +
        modified = true;
 +
    }
 +
});
 +
</source>
 +
 
 +
 
 +
= Listen by the use of an Event Handler =
  
 
An event handler is a method specified as an event attribute of a ZK page or as a member of a component class.
 
An event handler is a method specified as an event attribute of a ZK page or as a member of a component class.
  
== Declare an Event Handler in a ZUL page ==
+
== Declare an Event Handler in ZUML ==
An event handler can be declared in a ZUL page by specifying an event attribute<ref>An event attribute is an attribute starting with <tt>on</tt></ref>. For example,
+
An event handler can be declared in a ZUL page by specifying an event attribute<ref>An event attribute is an attribute starting with <code>on</code></ref>. For example,
  
 
<source lang="xml">
 
<source lang="xml">
Line 14: Line 123:
 
</source>
 
</source>
  
where the content of the event handler is the code snippet in Java. The event handler will be interpreted at the run time (by use of BeanShell). If you prefer to use other language, you could specify the language name in front of it. For example, the following uses Groovy as the interpreter:
+
where the content of the event handler is the code snippet in Java. The event handler will be interpreted at run time (by use of BeanShell). If you prefer to use another language, you could specify the language name in front of it. For example, the following uses Groovy as the interpreter:
  
 
<source lang="xml">
 
<source lang="xml">
Line 24: Line 133:
 
* event - the event being received. In the previous example, it is an instance of <javadoc>org.zkoss.zk.ui.event.MouseEvent</javadoc>.
 
* event - the event being received. In the previous example, it is an instance of <javadoc>org.zkoss.zk.ui.event.MouseEvent</javadoc>.
  
Notice that the event handler declared in this way is interpreted at the run time, so it inherits all advantages and disadvantage of interpreter-based execution.
+
Notice that the event handler declared in this way is interpreted at run time, so it inherits all advantages and disadvantages of interpreter-based execution.
  
Advantange:
+
Advantages:
  
 
* It can be changed on the fly without recompiling and reloading the application.
 
* It can be changed on the fly without recompiling and reloading the application.
 
* Easy to maintain if the code snippet is small.
 
* Easy to maintain if the code snippet is small.
  
Disadvantage:
+
Disadvantages:
  
 
* Slower to run.
 
* Slower to run.
* Compilation error can not be known in advance.
+
* Compilation errors can not be known in advance.
 
* Hard to maintain if mixing business logic with user interface.
 
* Hard to maintain if mixing business logic with user interface.
  
Line 42: Line 151:
  
 
== Declare an Event Handler in Java ==
 
== Declare an Event Handler in Java ==
The other way to have an event listener is to declare it as a member of a component class. For example,
+
The other way to have an event handler is to declare it as a member of a component class. For example,
  
<source lang="Java">
+
<source lang="java">
 
public class MyButton extends Button {
 
public class MyButton extends Button {
 
     public void onClick() {
 
     public void onClick() {
Line 54: Line 163:
 
If the event handler needs to handle the event, it can declare the event as the argument as follows.
 
If the event handler needs to handle the event, it can declare the event as the argument as follows.
  
<source lang="Java">
+
<source lang="java">
 
public class MyButton extends Button {
 
public class MyButton extends Button {
 
     public void onClick(MouseEvent event) {
 
     public void onClick(MouseEvent event) {
Line 64: Line 173:
 
Suggestions:
 
Suggestions:
  
* It is suggested to use this approach for component development, since it is subtle for application developers to notice its existence. In additions, it requires to extend the component class.
+
* It is suggested to use this approach for component development, since it is subtle for application developers to notice its existence. In addition, it requires to extend the component class.
  
 
<blockquote>
 
<blockquote>
Line 71: Line 180:
 
</blockquote>
 
</blockquote>
  
= Listen by Use of an Event Listener =
 
 
== Event Listener ==
 
 
An event listener is a class implementing <javadoc type="interface">org.zkoss.zk.ui.event.EventListener</javadoc>. For example,
 
 
<source lang="java">
 
public class MyListener implements EventListener {
 
    public void onEvent(Event event) {
 
        Messages.show("Hello");
 
    }
 
}
 
</source>
 
 
Then, you can register an event listener to the component that might receive the event by use of <javadoc method="addEventListener(java.lang.String, org.zkoss.zk.ui.event.EventListener)">org.zkoss.zk.ui.Component</javadoc>. For example,
 
 
<source lang="java">
 
button.addEventListener("onClick", new MyListener());
 
</source>
 
 
This is a typical approach to handle events. However, it is a bit tedious to register event listeners one-by-one if there are a lot of listeners. Rather, it is suggested to use a composer as described in the following section.
 
 
== Composer and Event Listener Autowiring ==
 
  
If there are a lot of event listeners to register, it is suggested to use the auto-wiring feature of a composer. For example,
+
=Precedence of Listeners=
  
<source lang="java">
+
The order of precedence for listeners from the highest to the lowest is as follows.
public class MyComposer extends GenericForwardComposer {
 
    public void onClick$hi() {
 
      Messsagebox.show("Hello");
 
    }
 
    public void onClick$bye() {
 
      Messsagebox.show("Bye");
 
    }
 
}
 
</source>
 
  
As shown above, the method for lsitening an event shall be named by starting with the event name, separating with <tt>$</tt>, and ending with the component's ID. The composer will search all matched methods and register the event listener automatically. Then, in the ZUL page, you can specify the <tt>apply</tt> attribute to associate the composer with a component.
+
# Event listeners implemented with <javadoc type="interface">org.zkoss.zk.ui.event.Express</javadoc>, and registered by <javadoc type="interface" method="addEventListener(java.lang.String, org.zkoss.zk.ui.event.EventListener)">org.zkoss.zk.ui.Component</javadoc>
 
+
# Event handlers defined in a ZUML document
<source lang="xml">
+
# Event listeners registered by <javadoc type="interface" method="addEventListener(java.lang.String, org.zkoss.zk.ui.event.EventListener)">org.zkoss.zk.ui.Component</javadoc> (and without <javadoc type="interface">org.zkoss.zk.ui.event.Express</javadoc>)
<window apply="MyComposer">
+
#* It includes the method of a composer wired by <javadoc>org.zkoss.zk.ui.util.GenericForwardComposer</javadoc> because the event listener is used.
    <button id="hi"/>
+
# Event handlers defined as a class's method
    <button id="bye"/>
+
# Event listeners registered to a page by <javadoc type="interface" method="addEventListener(java.lang.String, org.zkoss.zk.ui.event.EventListener)">org.zkoss.zk.ui.Page</javadoc>
</window>
 
</source>
 
 
 
If the listener needs to access the event, just declare it as the argument:
 
 
 
<source lang="java">
 
    public void onClick$hi(MouseEvent event) {
 
      Messsagebox.show("Hello, " + event.getName());
 
    }
 
</source>
 
  
Though not limited, a composer is usually associated with an ID space (such as <javadoc>org.zkoss.zul.Window</javadoc>) to handle events and component within the give ID space. You could associate any component that properly represents a scope of your application to manage.
+
== Abort the Invocation Sequence ==
 +
You could abort the calling sequence by calling <javadoc method="stopPropagation()">org.zkoss.zk.ui.event.Event</javadoc>. Once one of the event listeners invokes this method, all the following event handlers and listeners are ignored.
  
 
=Version History=
 
=Version History=
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-
| &nbsp;
+
| 5.0.6
| &nbsp;
+
| November 2010
| &nbsp;
+
| <javadoc type="interface">org.zkoss.zk.ui.event.SerializableEventListener</javadoc> was introduced to simplify the instantiation of a serializable anonymous class
 
|}
 
|}
  
{{ZKComponentReferencePageFooter}}
+
{{ZKDevelopersReferencePageFooter}}

Latest revision as of 09:34, 26 January 2024


Listen by Use of an Event Listener

Event Listener

An event listener is a class implementing EventListener. For example,

public class MyListener implements EventListener {
    public void onEvent(Event event) {
        Messagebox.show("Hello");
    }
}

Then, you can register an event listener to the component that might receive the event by the use of Component.addEventListener(String, EventListener). For example,

button.addEventListener("onClick", new MyListener());

This is a typical approach to handle events. However, it is a bit tedious to register event listeners one-by-one if there are a lot of listeners. Rather, it is suggested to use a composer as described in the following section.

Composer and Event Listener Autowiring

With ZK Developer's Reference/MVC, you generally do not need to register event listeners manually. Rather, they can be registered automatically by the use of the auto-wiring feature of a composer. For example,

public class MyComposer extends SelectorComposer {
    @Listen("onClick = button#hi")
    public void showHi() {
        Messsagebox.show("Hello");
    }
    @Listen("onClick = button#bye")
    public void showBye() {
        Messsagebox.show("Bye");
    }
    @Listen("onOK = window#mywin")
    public void onOK() {
        Messsagebox.show("OK pressed");
    }
}

As shown above, the method to listen is annotated with the Listen annotation using the event name followed by a selector string identifying the component(s) (for more selector syntax examples see SelectorComposer). The composer will register each annotated method as an event listener to the selected component automatically in the same ID space. Then, in the ZUL page, you can specify the apply attribute to associate the composer with a component.

<window id="mywin" apply="MyComposer">
    <textbox/>
    <button id="hi"/>
    <button id="bye"/>
</window>

If the listener needs to access the event, just declare it as the argument:

    @Listen("onClick = button#hi")
    public void showHi(MouseEvent event) {
      Messsagebox.show("Hello, " + event.getName());
    }

Though not limited, a composer is usually associated with an ID space (such as Window) to handle events and components within the given ID space. You could associate any component that properly represents a scope of your application to manage.

For more information please refer to the Wire Event Listeners section.

Deferrable Event Listeners

By default, events are sent to the server when it is fired at the client. However, many event listeners are just used to maintain the status on the server, rather than providing visual responses to the user. In other words, there is no need to send the events for these listeners immediately. Rather, they shall be sent at once to minimize the traffic between the client and the server so as to improve the server's performance. For the sake of convenience, we call them the deferrable event listeners.

To make an event listener deferrable, you have to implement Deferrable (with EventListener) and return true for the isDeferrable method as follows.

 public class DeferrableListener implements EventListener, Deferrable {
     private boolean _modified;
     public void onEvent(Event event) {
         _modified = true;
     }
     public boolean isDeferrable() {
         return true;
     }
 }

When an event is fired at the client (e.g., the user selects a list item), ZK won't send the event if no event listener is registered for it or only deferrable listeners are registered. Instead, the event is queued at the client.

On the other hand, if at least one non-deferrable listener is registered, the event will be sent immediately with all queued events to the server at once. No event is lost and the arriving order is preserved.


Tip: Use the deferrable listeners for maintaining the server status, while the non-deferrable listeners for providing the visual responses for the user.

Page-level Event Listener

Developers could add event listeners to a page (Page) dynamically by Page.addEventListener(String, EventListener). Once added, all events of the specified name sent to any components of the specified page will be sent to the listener.

All event listeners added to a page (so-called page-level event listeners) are assumed to be deferrable, no matter if Deferrable is implemented or not.

A typical example is to use a page-level event listener to maintain the modification flag as follows (pseudo code).

page.addEventListener("onChange", new EventListener() {
    public void onEvent(Event event) {
        modified = true;
    }
});


Listen by the use of an Event Handler

An event handler is a method specified as an event attribute of a ZK page or as a member of a component class.

Declare an Event Handler in ZUML

An event handler can be declared in a ZUL page by specifying an event attribute[1]. For example,

<button label="hi" onClick='alert("Hello")'/>

where the content of the event handler is the code snippet in Java. The event handler will be interpreted at run time (by use of BeanShell). If you prefer to use another language, you could specify the language name in front of it. For example, the following uses Groovy as the interpreter:

<button label="hi" onClick="groovy:alert('Hi, Groovy')"/>

Important Builtin Variables

  • self - the component receiving the event. In the previous example, it is the button itself.
  • event - the event being received. In the previous example, it is an instance of MouseEvent.

Notice that the event handler declared in this way is interpreted at run time, so it inherits all advantages and disadvantages of interpreter-based execution.

Advantages:

  • It can be changed on the fly without recompiling and reloading the application.
  • Easy to maintain if the code snippet is small.

Disadvantages:

  • Slower to run.
  • Compilation errors can not be known in advance.
  • Hard to maintain if mixing business logic with user interface.

Suggestion:

  • It is generally suggested to use this approach for 1) prototyping, or 2) simple event handling.

Declare an Event Handler in Java

The other way to have an event handler is to declare it as a member of a component class. For example,

public class MyButton extends Button {
    public void onClick() {
        Messagebox.show("Hello");
    }
}

If the event handler needs to handle the event, it can declare the event as the argument as follows.

public class MyButton extends Button {
    public void onClick(MouseEvent event) {
        Messagebox.show("Hello, "+event.getName());
    }
}

Suggestions:

  • It is suggested to use this approach for component development, since it is subtle for application developers to notice its existence. In addition, it requires to extend the component class.

  1. An event attribute is an attribute starting with on


Precedence of Listeners

The order of precedence for listeners from the highest to the lowest is as follows.

  1. Event listeners implemented with Express, and registered by Component.addEventListener(String, EventListener)
  2. Event handlers defined in a ZUML document
  3. Event listeners registered by Component.addEventListener(String, EventListener) (and without Express)
  4. Event handlers defined as a class's method
  5. Event listeners registered to a page by Page.addEventListener(String, EventListener)

Abort the Invocation Sequence

You could abort the calling sequence by calling Event.stopPropagation(). Once one of the event listeners invokes this method, all the following event handlers and listeners are ignored.

Version History

Version Date Content
5.0.6 November 2010 SerializableEventListener was introduced to simplify the instantiation of a serializable anonymous class



Last Update : 2024/01/26

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.