https://www.zkoss.org/_w/index.php?title=Small_Talks/2009/August/ZK_5:_Chat_with_Event_Queue&feed=atom&action=historySmall Talks/2009/August/ZK 5: Chat with Event Queue - Revision history2024-03-29T07:45:59ZRevision history for this page on the wikiMediaWiki 1.35.1https://www.zkoss.org/_w/index.php?title=Small_Talks/2009/August/ZK_5:_Chat_with_Event_Queue&diff=53782&oldid=prevHawk: correct highlight (via JWB)2022-01-20T04:17:03Z<p>correct highlight (via JWB)</p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 04:17, 20 January 2022</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l9" >Line 9:</td>
<td colspan="2" class="diff-lineno">Line 9:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>''The best way to use the server push is not to know the server push at all.''</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>''The best way to use the server push is not to know the server push at all.''</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>When the server push was introduced in ZK 3, we minimized the server-push API to two methods: <<del class="diffchange diffchange-inline">tt</del>>activate</<del class="diffchange diffchange-inline">tt</del>> and <<del class="diffchange diffchange-inline">tt</del>>deactivate</<del class="diffchange diffchange-inline">tt</del>>. Once activated, a developer can access any component in any way he like. It is straightforward. However, it still requires some knowledge of thread programming<ref>Robbie wrote a tutorial about server push: [[Small Talks/2007/August/Simple and Intuitive Server Push with a Chat Room Example|Simple and Intuitive Server Push with a Chat Room Example]].</ref> A couple weeks ago, Henri told me we can and shall encapsulate the use of server push in form of event firing and listening, and the event queue (introduced in ZK 3.5) is a good candidate.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>When the server push was introduced in ZK 3, we minimized the server-push API to two methods: <<ins class="diffchange diffchange-inline">code</ins>>activate</<ins class="diffchange diffchange-inline">code</ins>> and <<ins class="diffchange diffchange-inline">code</ins>>deactivate</<ins class="diffchange diffchange-inline">code</ins>>. Once activated, a developer can access any component in any way he like. It is straightforward. However, it still requires some knowledge of thread programming<ref>Robbie wrote a tutorial about server push: [[Small Talks/2007/August/Simple and Intuitive Server Push with a Chat Room Example|Simple and Intuitive Server Push with a Chat Room Example]].</ref> A couple weeks ago, Henri told me we can and shall encapsulate the use of server push in form of event firing and listening, and the event queue (introduced in ZK 3.5) is a good candidate.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Here is the result: application-scope event queue (<<del class="diffchange diffchange-inline">tt</del>>org.zkoss.zk.ui.event.EventQueue</<del class="diffchange diffchange-inline">tt</del>>).</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Here is the result: application-scope event queue (<<ins class="diffchange diffchange-inline">code</ins>>org.zkoss.zk.ui.event.EventQueue</<ins class="diffchange diffchange-inline">code</ins>>).</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>We extends the event queue to support the concept of scope. Currently, there are two scopes: desktop and application. With a desktop scope, an event queue is visible only to the associated desktop. With an application scope, an event queue is visible to the whole application and any thread (not just event listeners) can access it. The application-scope event queue is based on the server push but the developer doesn't need to know that and he doesn't need to do any thread programming, which is handled automatically by the event queue.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>We extends the event queue to support the concept of scope. Currently, there are two scopes: desktop and application. With a desktop scope, an event queue is visible only to the associated desktop. With an application scope, an event queue is visible to the whole application and any thread (not just event listeners) can access it. The application-scope event queue is based on the server push but the developer doesn't need to know that and he doesn't need to do any thread programming, which is handled automatically by the event queue.</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l36" >Line 36:</td>
<td colspan="2" class="diff-lineno">Line 36:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== How to locate an event queue ==</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== How to locate an event queue ==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>An event queue is identified by an unique name. To locate one, just invoke the <<del class="diffchange diffchange-inline">tt</del>>lookup</<del class="diffchange diffchange-inline">tt</del>> method of <javadoc>org.zkoss.zk.ui.event.EventQueues</javadoc>. For example, we can locate an application-scope event queue as follows.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>An event queue is identified by an unique name. To locate one, just invoke the <<ins class="diffchange diffchange-inline">code</ins>>lookup</<ins class="diffchange diffchange-inline">code</ins>> method of <javadoc>org.zkoss.zk.ui.event.EventQueues</javadoc>. For example, we can locate an application-scope event queue as follows.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang="java"></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang="java"></div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l46" >Line 46:</td>
<td colspan="2" class="diff-lineno">Line 46:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== How to publish an event ==</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== How to publish an event ==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>To publish, just invoke the <<del class="diffchange diffchange-inline">tt</del>>publish</<del class="diffchange diffchange-inline">tt</del>> method of the <javadoc>org.zkoss.zk.ui.event.EventQueue</javadoc> interface (returned by <<del class="diffchange diffchange-inline">tt</del>>lookup</<del class="diffchange diffchange-inline">tt</del>>). For example,</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>To publish, just invoke the <<ins class="diffchange diffchange-inline">code</ins>>publish</<ins class="diffchange diffchange-inline">code</ins>> method of the <javadoc>org.zkoss.zk.ui.event.EventQueue</javadoc> interface (returned by <<ins class="diffchange diffchange-inline">code</ins>>lookup</<ins class="diffchange diffchange-inline">code</ins>>). For example,</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang="java"></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang="java"></div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l57" >Line 57:</td>
<td colspan="2" class="diff-lineno">Line 57:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== How to subscribe to an event queue ==</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== How to subscribe to an event queue ==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>The event being published will be sent to each subscriber by calling the event listener the subscriber subscribe. To subscribe, just invoke the <<del class="diffchange diffchange-inline">tt</del>>subscribe</<del class="diffchange diffchange-inline">tt</del>> method. For example,</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>The event being published will be sent to each subscriber by calling the event listener the subscriber subscribe. To subscribe, just invoke the <<ins class="diffchange diffchange-inline">code</ins>>subscribe</<ins class="diffchange diffchange-inline">code</ins>> method. For example,</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang="java"></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang="java"></div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l150" >Line 150:</td>
<td colspan="2" class="diff-lineno">Line 150:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>On the other hand, the comet server push is implemented with a pre-established and 'virtual' permanent connection. It is like sending a taxi to the server, and waiting in the server until there is data to send back. Meanwhile, the client-polling server is like sending a taxi periodically to the server, and leave immediately if no data is available.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>On the other hand, the comet server push is implemented with a pre-established and 'virtual' permanent connection. It is like sending a taxi to the server, and waiting in the server until there is data to send back. Meanwhile, the client-polling server is like sending a taxi periodically to the server, and leave immediately if no data is available.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>By default, the comet server push is used. If you prefer to use the client-polling approach, just specify the following in <<del class="diffchange diffchange-inline">tt</del>>WEB-INF/zk.xml</<del class="diffchange diffchange-inline">tt</del>><ref>Like most ZK features, you can provide your own implementation if you like.</ref>.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>By default, the comet server push is used. If you prefer to use the client-polling approach, just specify the following in <<ins class="diffchange diffchange-inline">code</ins>>WEB-INF/zk.xml</<ins class="diffchange diffchange-inline">code</ins>><ref>Like most ZK features, you can provide your own implementation if you like.</ref>.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang="xml"></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang="xml"></div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l168" >Line 168:</td>
<td colspan="2" class="diff-lineno">Line 168:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Like most ZK features, the event queue is extensible. The location and creation of an event queue is actually done by a so-called event queue provider. An event-queue provider must implement the <javadoc>org.zkoss.zk.ui.event.impl.EventQueueProvider</javadoc> interface.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Like most ZK features, the event queue is extensible. The location and creation of an event queue is actually done by a so-called event queue provider. An event-queue provider must implement the <javadoc>org.zkoss.zk.ui.event.impl.EventQueueProvider</javadoc> interface.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>To customize it, just provide an implementation, and then specify the class name in the property called <<del class="diffchange diffchange-inline">tt</del>>org.zkoss.zk.ui.event.EventQueueProvider.class</<del class="diffchange diffchange-inline">tt</del>>.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>To customize it, just provide an implementation, and then specify the class name in the property called <<ins class="diffchange diffchange-inline">code</ins>>org.zkoss.zk.ui.event.EventQueueProvider.class</<ins class="diffchange diffchange-inline">code</ins>>.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>For example, let us say we want to introduce the JMS scope, then we can implement as follows (only pseudo-code):</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>For example, let us say we want to introduce the JMS scope, then we can implement as follows (only pseudo-code):</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l188" >Line 188:</td>
<td colspan="2" class="diff-lineno">Line 188:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>}</source></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>}</source></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Then, specify the property in <<del class="diffchange diffchange-inline">tt</del>>WEB-INF/zk.xml</<del class="diffchange diffchange-inline">tt</del>></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Then, specify the property in <<ins class="diffchange diffchange-inline">code</ins>>WEB-INF/zk.xml</<ins class="diffchange diffchange-inline">code</ins>></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang="xml"></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang="xml"></div></td></tr>
</table>Hawkhttps://www.zkoss.org/_w/index.php?title=Small_Talks/2009/August/ZK_5:_Chat_with_Event_Queue&diff=16217&oldid=prevTomyeh: /* Overview */2011-01-12T11:18:51Z<p><span dir="auto"><span class="autocomment">Overview</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 11:18, 12 January 2011</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l9" >Line 9:</td>
<td colspan="2" class="diff-lineno">Line 9:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>''The best way to use the server push is not to know the server push at all.''</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>''The best way to use the server push is not to know the server push at all.''</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>When the server push was introduced in ZK 3, we minimized the server-push API to two methods: <tt>activate</tt> and <tt>deactivate</tt>. Once activated, a developer can access any component in any way he like. It is straightforward. However, it still requires some knowledge of thread programming<ref>Robbie wrote a tutorial about server push: [[Simple and Intuitive Server Push with a Chat Room Example]].</ref> A couple weeks ago, Henri told me we can and shall encapsulate the use of server push in form of event firing and listening, and the event queue (introduced in ZK 3.5) is a good candidate.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>When the server push was introduced in ZK 3, we minimized the server-push API to two methods: <tt>activate</tt> and <tt>deactivate</tt>. Once activated, a developer can access any component in any way he like. It is straightforward. However, it still requires some knowledge of thread programming<ref>Robbie wrote a tutorial about server push: [[<ins class="diffchange diffchange-inline">Small Talks/2007/August/Simple and Intuitive Server Push with a Chat Room Example|</ins>Simple and Intuitive Server Push with a Chat Room Example]].</ref> A couple weeks ago, Henri told me we can and shall encapsulate the use of server push in form of event firing and listening, and the event queue (introduced in ZK 3.5) is a good candidate.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Here is the result: application-scope event queue (<tt>org.zkoss.zk.ui.event.EventQueue</tt>).</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Here is the result: application-scope event queue (<tt>org.zkoss.zk.ui.event.EventQueue</tt>).</div></td></tr>
</table>Tomyehhttps://www.zkoss.org/_w/index.php?title=Small_Talks/2009/August/ZK_5:_Chat_with_Event_Queue&diff=7743&oldid=prevElton776: moved Small Talks/ZK 5: Chat with Event Queue to Small Talks/2009/August/ZK 5: Chat with Event Queue2010-09-21T01:36:20Z<p>moved <a href="/wiki/Small_Talks/ZK_5:_Chat_with_Event_Queue" class="mw-redirect" title="Small Talks/ZK 5: Chat with Event Queue">Small Talks/ZK 5: Chat with Event Queue</a> to <a href="/wiki/Small_Talks/2009/August/ZK_5:_Chat_with_Event_Queue" title="Small Talks/2009/August/ZK 5: Chat with Event Queue">Small Talks/2009/August/ZK 5: Chat with Event Queue</a></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<tr class="diff-title" lang="en">
<td colspan="1" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="1" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 01:36, 21 September 2010</td>
</tr><tr><td colspan="2" class="diff-notice" lang="en"><div class="mw-diff-empty">(No difference)</div>
</td></tr></table>Elton776https://www.zkoss.org/_w/index.php?title=Small_Talks/2009/August/ZK_5:_Chat_with_Event_Queue&diff=6259&oldid=prevElton776: Created page with '{{Template:Smalltalk_Author| |author=Tom Yeh, Potix Corporation |date=August 4, 2009 |version=ZK 5.0.0 }} = Overview = ''The best way to use the server push is not to know the …'2010-09-13T07:44:13Z<p>Created page with '{{Template:Smalltalk_Author| |author=Tom Yeh, Potix Corporation |date=August 4, 2009 |version=ZK 5.0.0 }} = Overview = ''The best way to use the server push is not to know the …'</p>
<p><b>New page</b></p><div>{{Template:Smalltalk_Author|<br />
|author=Tom Yeh, Potix Corporation<br />
|date=August 4, 2009<br />
|version=ZK 5.0.0<br />
}}<br />
<br />
= Overview =<br />
<br />
''The best way to use the server push is not to know the server push at all.''<br />
<br />
When the server push was introduced in ZK 3, we minimized the server-push API to two methods: <tt>activate</tt> and <tt>deactivate</tt>. Once activated, a developer can access any component in any way he like. It is straightforward. However, it still requires some knowledge of thread programming<ref>Robbie wrote a tutorial about server push: [[Simple and Intuitive Server Push with a Chat Room Example]].</ref> A couple weeks ago, Henri told me we can and shall encapsulate the use of server push in form of event firing and listening, and the event queue (introduced in ZK 3.5) is a good candidate.<br />
<br />
Here is the result: application-scope event queue (<tt>org.zkoss.zk.ui.event.EventQueue</tt>).<br />
<br />
We extends the event queue to support the concept of scope. Currently, there are two scopes: desktop and application. With a desktop scope, an event queue is visible only to the associated desktop. With an application scope, an event queue is visible to the whole application and any thread (not just event listeners) can access it. The application-scope event queue is based on the server push but the developer doesn't need to know that and he doesn't need to do any thread programming, which is handled automatically by the event queue.<br />
<br />
The event queue is extensible. For example, you can extend it to support the communication across different virtual machine by use of, say, JMS or other service.<br />
<br />
<blockquote><br />
----<br />
<references/><br />
</blockquote><br />
<br />
= What is an event queue? =<br />
<br />
An event queue is an event-based publish-subscribe solution for application information delivery and messaging. It provides asynchronous communications for different modules/roles in a loosely-coupled and autonomous fashion.<br />
<br />
By publishing, a module (publisher) sends out messages without explicitly specifying or having knowledge of intended recipients. By subscribing, a receiving module (subscriber) receives messages that the subscriber has registered an interest in, without explicitly specifying or knowing the publisher.<br />
<br />
[[Image:Eventqueue-concept.jpg]]<br />
<br />
== The scope of an event queue ==<br />
<br />
Depending on the visibility of the event queues, there are two scopes: desktop and application. A desktop-scope event queue is visible only within a given desktop, while an application-scope event queue is visible across the whole application.<br />
<br />
== How to locate an event queue ==<br />
<br />
An event queue is identified by an unique name. To locate one, just invoke the <tt>lookup</tt> method of <javadoc>org.zkoss.zk.ui.event.EventQueues</javadoc>. For example, we can locate an application-scope event queue as follows.<br />
<br />
<source lang="java"><br />
EventQueue eq = EventQueues.lookup("foo", EventQueues.APPLICATION, true);<br />
</source><br />
<br />
where the first argument is the name of the event queue, and the third argument is whether to create one automatically if not found.<br />
<br />
== How to publish an event ==<br />
<br />
To publish, just invoke the <tt>publish</tt> method of the <javadoc>org.zkoss.zk.ui.event.EventQueue</javadoc> interface (returned by <tt>lookup</tt>). For example,<br />
<br />
<source lang="java"><br />
EventQueues.lookup("my super queue", EventQueues.APPLICATION, true)<br />
.publish(new Event("onSomethingHapping", null, new SomeAdditionInfo()));<br />
</source><br />
<br />
The message used to communicate among publishers and subscribes are the event instances, so you can use any event you prefer.<br />
<br />
== How to subscribe to an event queue ==<br />
<br />
The event being published will be sent to each subscriber by calling the event listener the subscriber subscribe. To subscribe, just invoke the <tt>subscribe</tt> method. For example,<br />
<br />
<source lang="java"><br />
EventQueues.lookup("my super queue", EventQueues.APPLICATION, true).subscribe(<br />
new EventListener() {<br />
public void onEvent(Event evt) {<br />
//handle the event just like any other event listener<br />
}<br />
});</source><br />
<br />
The event listener is invoked just like a normal event. You can manipulate the component or do whatever as you want.<br />
<br />
= An example: chat =<br />
<br />
Let us put them together with a chat application. Here is the code snippet:<br />
<br />
<source lang="xml"><br />
<window title="Chat" border="normal"><br />
<zscript><![CDATA[<br />
import org.zkoss.zk.ui.event.*;<br />
EventQueue que = EventQueues.lookup("chat", EventQueues.APPLICATION, true);<br />
que.subscribe(new EventListener() {<br />
public void onEvent(Event evt) {<br />
new Label(evt.getData()).setParent(inf);<br />
}<br />
}); <br />
void post(Textbox tb) {<br />
String text = tb.value;<br />
if (text.length() > 0) {<br />
tb.value = "";<br />
que.publish(new Event("onChat", null, text));<br />
}<br />
}<br />
]]></zscript><br />
<br />
Say <textbox onOK="post(self)" onChange="post(self)"/><br />
<separator bar="true"/><br />
<vbox id="inf"/><br />
</window><br />
</source><br />
<br />
Subscribe and publish. Straightforward, isn't it? No multi-thread programming, no explicit server-push.<br />
<br />
Then, you can chat with two or more different computers.<br />
<br />
= More about event queues =<br />
== More about the scope of event queues ==<br />
<br />
In the example above, we use the application-scope event queue since it is a queue shared by different desktops<ref>In ZK terminology, a browser window is a desktop</ref>.<br />
This can be tested by opening to different instances of browsers and chatting between them.<br />
<br />
Here is a list of differences:<br />
<br />
{|border="1" cellspacing="0" width="100%"<br />
|-<br />
! <br />
! Desktop-scope<br />
! Application-scope<br />
|-<br />
| visibility<br />
| visible only to the same desktop<br />
| visible to the whole application<br />
|-<br />
| publish<br />
| it can be invoked only in an event listener, or when the current execution is available.<br />
| it can be invoked anytime, anywhere<br />
|-<br />
| subscribe<br />
| it can be invoked only in an event listener, or when the current execution is available.<br />
| it can be invoked only in an event listener, or when the current execution is available.<br />
|-<br />
| multi-thread<br />
| Not used<br />
| Used but transparent to the user<br />
|-<br />
| server-push<br />
| Not used<br />
| Used but transparent to the user<br />
|}<br />
<br />
<blockquote><br />
----<br />
<references/><br />
</blockquote><br />
<br />
== Event queues and server push ==<br />
<br />
When an application-scope event queue is used, the server push is enabled for each desktop that subscribers belong to. In additions, a thread is created to forward the event to subscribers.<br />
<br />
ZK has two kinds of server push: client-polling and comet<ref>[http://en.wikipedia.org/wiki/Comet_(programming) Comet Programming]</ref>. The client-polling server push is implemented with an implicit timer at the client. The interval of the timer depends on the loading of the server. For example, the interval becomes longer if the time to get a response has become longer.<br />
<br />
On the other hand, the comet server push is implemented with a pre-established and 'virtual' permanent connection. It is like sending a taxi to the server, and waiting in the server until there is data to send back. Meanwhile, the client-polling server is like sending a taxi periodically to the server, and leave immediately if no data is available.<br />
<br />
By default, the comet server push is used. If you prefer to use the client-polling approach, just specify the following in <tt>WEB-INF/zk.xml</tt><ref>Like most ZK features, you can provide your own implementation if you like.</ref>.<br />
<br />
<source lang="xml"><br />
<device-config><br />
<device-type>ajax</device-type><br />
<server-push-class>org.zkoss.zk.ui.impl.PollingServerPush</server-push-class><br />
</device-config><br />
</source><br />
<br />
<blockquote><br />
----<br />
<references/><br />
</blockquote><br />
<br />
== How to extend the event queue ==<br />
<br />
Like most ZK features, the event queue is extensible. The location and creation of an event queue is actually done by a so-called event queue provider. An event-queue provider must implement the <javadoc>org.zkoss.zk.ui.event.impl.EventQueueProvider</javadoc> interface.<br />
<br />
To customize it, just provide an implementation, and then specify the class name in the property called <tt>org.zkoss.zk.ui.event.EventQueueProvider.class</tt>.<br />
<br />
For example, let us say we want to introduce the JMS scope, then we can implement as follows (only pseudo-code):<br />
<br />
<source lang="java"><br />
public class MyEventQueueProvider extends org.zkoss.zk.ui.event.impl.EventQueueProviderImpl {<br />
public EventQueue lookup(String name, String scope, boolean autocreate) {<br />
if ("jms".equals(scope)) {<br />
//create an event queue based on JMS's name<br />
} else<br />
return super.lookup(name, scope, autocreate);<br />
}<br />
public boolean remove(String name, String scope) {<br />
if ("jms".equals(scope)) {<br />
//remove the event queue based on JMS's name<br />
} else<br />
return super.removename, scope);<br />
}<br />
}</source><br />
<br />
Then, specify the property in <tt>WEB-INF/zk.xml</tt><br />
<br />
<source lang="xml"><br />
<library-property><br />
<name>org.zkoss.zk.ui.event.EventQueueProvider.class</name><br />
<value>MyEventQueueProvider</value><br />
</library-property><br />
</source><br />
<br />
<comment>/smalltalks/chatWithEventQueue/index.dsp</comment><br />
<br />
<br />
[[Category:ZK]]<br />
[[Category:Overview]]<br />
[[Category:Server Push]]<br />
[[Category:Event Queue]]<br />
{{Template:Smalltalk_Footer|<br />
|name=Potix Corporation<br />
}}</div>Elton776