Use Echo Events"

From Documentation
m
(4 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
Event echoing is useful for implementing a long operation.
 
Event echoing is useful for implementing a long operation.
  
As described in the previous section, HTTP is a request-and-response protocol, so the user won't see any feedback until the request has been served and responsed. Thus, if the processing of a request takes long to execute, the user has no idea if the request is being process, or he doesn't, say, click the button successfully. The user usually tends to click again to ensure it is really clicked, but it only causes the server much slower to response.
+
As described in the previous section, HTTP is a request-and-response protocol, so the user won't see any feedback until the request has been served and responsed. Thus, if the processing of a request takes too long to execute, the user has no idea if the request is being process, or he doesn't, say, click the button successfully. The user usually tends to click again to ensure it is really clicked, but it only causes the server much slower to response.
  
The better approach is to send back some busy message to let the user know what happens, and then process the long operation. It can be done easily with event echoing. If you prefer to allow the user to keep accessing other functions, please refer to the [[ZK Developer's Reference/UI Patterns/Long Operations/Use Event Queues|Use Event Queues]] section, which is powerful but more sophisticated to implement.
+
The better approach is to send back some busy message to let the user know what happens during processing the long operation. It can be done easily with event echoing. If you prefer to allow the user to keep accessing other functions, please refer to the [[ZK Developer's Reference/UI Patterns/Long Operations/Use Event Queues|Use Event Queues]] section, which is powerful but more sophisticated to implement.
  
 
Event echoing for a long operation basically takes three steps
 
Event echoing for a long operation basically takes three steps
# Invoke <javadoc method="showBusy(java.lang.String, boolean)">org.zkoss.zk.ui.util.Clients</javadoc> to show a busy message and blocking the user from accessing any function
+
# Invoke <javadoc method="showBusy(java.lang.String)">org.zkoss.zk.ui.util.Clients</javadoc> to show a busy message and blocking the user from accessing any function
#*Of course, you could have any effect you like, such as showing [[ZK Component Reference/Containers/Window|a modal window]]. <javadoc method="showBusy(java.lang.String, boolean)">org.zkoss.zk.ui.util.Clients</javadoc> is yet a built-in approach for showing the busy message.
+
#*Of course, you could have any effect you like, such as showing [[ZK Component Reference/Containers/Window|a modal window]]. <javadoc method="showBusy(java.lang.String)">org.zkoss.zk.ui.util.Clients</javadoc> is yet a built-in approach for showing the busy message.
 
# Invoke <javadoc method="echoEvent(java.lang.String, org.zkoss.zk.ui.Component, java.lang.Object)">org.zkoss.zk.ui.event.Events</javadoc> to echo an event
 
# Invoke <javadoc method="echoEvent(java.lang.String, org.zkoss.zk.ui.Component, java.lang.Object)">org.zkoss.zk.ui.event.Events</javadoc> to echo an event
 
# Listen to the event being echoed and do the long operation in the listener
 
# Listen to the event being echoed and do the long operation in the listener
Line 20: Line 20:
 
   <attribute name="onLater">
 
   <attribute name="onLater">
 
   doLongOperation(); //take long to execute
 
   doLongOperation(); //take long to execute
   Clients.showBusy(null, false); //remove the busy message
+
   Clients.clearBusy(); //remove the busy message
 
   </attribute>
 
   </attribute>
 
   
 
   
 
   <button label="Echo Event">
 
   <button label="Echo Event">
 
   <attribute name="onClick">
 
   <attribute name="onClick">
   Clients.showBusy("Execute...", true); //show a busy message to user
+
   Clients.showBusy("Execute..."); //show a busy message to user
 
   Events.echoEvent("onLater", w, null); //echo an event back  
 
   Events.echoEvent("onLater", w, null); //echo an event back  
 
   </attribute>
 
   </attribute>
Line 34: Line 34:
 
= Better Feedback with Button's autodisable =
 
= Better Feedback with Button's autodisable =
  
With event echoing, it might still take hundreds milliseconds to have the busy message, especially with the slow connection. The feedback to user can be further improved by use of <javadoc method="setAutodisable(java.lang.String)">org.zkoss.zul.Button</javadoc>. For example,
+
With event echoing, it might still take hundreds of milliseconds to have the busy message, especially with the slow connection. The feedback to user can be further improved by the use of <javadoc method="setAutodisable(java.lang.String)">org.zkoss.zul.Button</javadoc>. For example,
  
 
<source lang="xml">
 
<source lang="xml">

Revision as of 09:23, 15 August 2012

Event echoing is useful for implementing a long operation.

As described in the previous section, HTTP is a request-and-response protocol, so the user won't see any feedback until the request has been served and responsed. Thus, if the processing of a request takes too long to execute, the user has no idea if the request is being process, or he doesn't, say, click the button successfully. The user usually tends to click again to ensure it is really clicked, but it only causes the server much slower to response.

The better approach is to send back some busy message to let the user know what happens during processing the long operation. It can be done easily with event echoing. If you prefer to allow the user to keep accessing other functions, please refer to the Use Event Queues section, which is powerful but more sophisticated to implement.

Event echoing for a long operation basically takes three steps

  1. Invoke Clients.showBusy(String) to show a busy message and blocking the user from accessing any function
  2. Invoke Events.echoEvent(String, Component, Object) to echo an event
  3. Listen to the event being echoed and do the long operation in the listener
    • At the end of the event listener, remember to remove the busy message, and update the UI if necessary

For example, assume the long operation is called doLongOperation, then:

<window id="w" width="200px" title="Test echoEvent" border="normal">
  <attribute name="onLater">
  doLongOperation(); //take long to execute
  Clients.clearBusy(); //remove the busy message
  </attribute>
 
  <button label="Echo Event">
  <attribute name="onClick">
  Clients.showBusy("Execute..."); //show a busy message to user
  Events.echoEvent("onLater", w, null); //echo an event back 
  </attribute>
  </button>
</window>

Better Feedback with Button's autodisable

With event echoing, it might still take hundreds of milliseconds to have the busy message, especially with the slow connection. The feedback to user can be further improved by the use of Button.setAutodisable(String). For example,

  <button label="Echo Event" autodisable="self">
...

Then, the button will be disabled automatically when it is pressed, and enabled automatically when the request has been served.

Version History

Last Update : 2012/08/15


Version Date Content
     



Last Update : 2012/08/15

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