https://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Guide/Migrate/Integrate_Other_UI_frameworks/SWING/Richlets&feed=atom&action=history
ZK Developer's Guide/Migrate/Integrate Other UI frameworks/SWING/Richlets - Revision history
2024-03-29T05:03:47Z
Revision history for this page on the wiki
MediaWiki 1.35.1
https://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Guide/Migrate/Integrate_Other_UI_frameworks/SWING/Richlets&diff=53414&oldid=prev
Hawk: correct highlight (via JWB)
2022-01-19T10:39:18Z
<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 10:39, 19 January 2022</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l16" >Line 16:</td>
<td colspan="2" class="diff-lineno">Line 16:</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>=== Implement the org.zkoss.zk.ui.Richlet 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>=== Implement the org.zkoss.zk.ui.Richlet interface ===</div></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>All richlets must implement the <javadoc type="interface">org.zkoss.zk.ui.Richlet</javadoc> interface. To simplify the task of implementing the required methods, you can extend <javadoc>org.zkoss.zk.ui.GenericRichlet</javadoc>. Then, when the specified URL is requested, the <<del class="diffchange diffchange-inline">tt</del>>service</<del class="diffchange diffchange-inline">tt</del>> method is called, and you can create the user interface then.</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>All richlets must implement the <javadoc type="interface">org.zkoss.zk.ui.Richlet</javadoc> interface. To simplify the task of implementing the required methods, you can extend <javadoc>org.zkoss.zk.ui.GenericRichlet</javadoc>. Then, when the specified URL is requested, the <<ins class="diffchange diffchange-inline">code</ins>>service</<ins class="diffchange diffchange-inline">code</ins>> method is called, and you can create the user interface then.</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-l51" >Line 51:</td>
<td colspan="2" class="diff-lineno">Line 51:</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;"><div> </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> </div></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>Like servlets, you can implement the <<del class="diffchange diffchange-inline">tt</del>>init</<del class="diffchange diffchange-inline">tt</del>> and <<del class="diffchange diffchange-inline">tt</del>>destroy</<del class="diffchange diffchange-inline">tt</del>> methods to initialize and to destroy the richlet when it is loaded. Like servlet, a richlet is loaded once and serves all requests for the URL with which it is associated.</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>Like servlets, you can implement the <<ins class="diffchange diffchange-inline">code</ins>>init</<ins class="diffchange diffchange-inline">code</ins>> and <<ins class="diffchange diffchange-inline">code</ins>>destroy</<ins class="diffchange diffchange-inline">code</ins>> methods to initialize and to destroy the richlet when it is loaded. Like servlet, a richlet is loaded once and serves all requests for the URL with which it is associated.</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>==== One Richlet per URL ====</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>==== One Richlet per URL ====</div></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>Like servlets, a single richlet is created and shared for all users. In other words, the richlet (at least the <<del class="diffchange diffchange-inline">tt</del>>service</<del class="diffchange diffchange-inline">tt</del>> method) must be thread-safe. On the other hand, components are not shareable. Each desktop has an independent set of components. Therefore, it is generally not a good idea to store components as a data member of a richlet.</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>Like servlets, a single richlet is created and shared for all users. In other words, the richlet (at least the <<ins class="diffchange diffchange-inline">code</ins>>service</<ins class="diffchange diffchange-inline">code</ins>> method) must be thread-safe. On the other hand, components are not shareable. Each desktop has an independent set of components. Therefore, it is generally not a good idea to store components as a data member of a richlet.</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>There are many ways to solve this issue. A typical one is to use another class for holding the components for each desktop, as illustrated below.</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>There are many ways to solve this issue. A typical one is to use another class for holding the components for each desktop, as illustrated below.</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l84" >Line 84:</td>
<td colspan="2" class="diff-lineno">Line 84:</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>=== Configure web.xml and zk.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>=== Configure web.xml and zk.xml ===</div></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>After implementing the richlet, you can define the richlet in <<del class="diffchange diffchange-inline">tt</del>>zk.xml</<del class="diffchange diffchange-inline">tt</del>> with the following statement:</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>After implementing the richlet, you can define the richlet in <<ins class="diffchange diffchange-inline">code</ins>>zk.xml</<ins class="diffchange diffchange-inline">code</ins>> with the following statement:</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-l93" >Line 93:</td>
<td colspan="2" class="diff-lineno">Line 93:</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>After declaring a richlet, you can map it to any number of URLs using the <<del class="diffchange diffchange-inline">tt</del>>richlet-mapping</<del class="diffchange diffchange-inline">tt</del>> element as shown below.</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>After declaring a richlet, you can map it to any number of URLs using the <<ins class="diffchange diffchange-inline">code</ins>>richlet-mapping</<ins class="diffchange diffchange-inline">code</ins>> element as shown below.</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-l106" >Line 106:</td>
<td colspan="2" class="diff-lineno">Line 106:</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>By default, richlets are disabled. To enable them, add the following declaration to <<del class="diffchange diffchange-inline">tt</del>>web.xml</<del class="diffchange diffchange-inline">tt</del>>. Once enabled, you can add as many as richlets as you want without modifying <<del class="diffchange diffchange-inline">tt</del>>web.xml</<del class="diffchange diffchange-inline">tt</del>> any more.</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, richlets are disabled. To enable them, add the following declaration to <<ins class="diffchange diffchange-inline">code</ins>>web.xml</<ins class="diffchange diffchange-inline">code</ins>>. Once enabled, you can add as many as richlets as you want without modifying <<ins class="diffchange diffchange-inline">code</ins>>web.xml</<ins class="diffchange diffchange-inline">code</ins>> any more.</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-l117" >Line 117:</td>
<td colspan="2" class="diff-lineno">Line 117:</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>Then, you can visit [http://localhost:8080/PROJECT_NAME/zk/test http://localhost:8080/PROJECT_NAME/zk/test] to request the richlet.</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>Then, you can visit [http://localhost:8080/PROJECT_NAME/zk/test http://localhost:8080/PROJECT_NAME/zk/test] to request the richlet.</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 URL specified in the <<del class="diffchange diffchange-inline">tt</del>>url-pattern</<del class="diffchange diffchange-inline">tt</del>> element must start with <<del class="diffchange diffchange-inline">tt</del>>/</<del class="diffchange diffchange-inline">tt</del>>. If the URI ends with <<del class="diffchange diffchange-inline">tt</del>>/*</<del class="diffchange diffchange-inline">tt</del>>, then it is matched to all request with the same prefix. To retrieve the request's actual URL, you can check the value returned by the <<del class="diffchange diffchange-inline">tt</del>>getRequestPath</<del class="diffchange diffchange-inline">tt</del>> method of the current page.</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 URL specified in the <<ins class="diffchange diffchange-inline">code</ins>>url-pattern</<ins class="diffchange diffchange-inline">code</ins>> element must start with <<ins class="diffchange diffchange-inline">code</ins>>/</<ins class="diffchange diffchange-inline">code</ins>>. If the URI ends with <<ins class="diffchange diffchange-inline">code</ins>>/*</<ins class="diffchange diffchange-inline">code</ins>>, then it is matched to all request with the same prefix. To retrieve the request's actual URL, you can check the value returned by the <<ins class="diffchange diffchange-inline">code</ins>>getRequestPath</<ins class="diffchange diffchange-inline">code</ins>> method of the current page.</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-l127" >Line 127:</td>
<td colspan="2" class="diff-lineno">Line 127:</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;"><div> </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> </div></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>'''Tip''': By specifying <<del class="diffchange diffchange-inline">tt</del>>/*</<del class="diffchange diffchange-inline">tt</del>> as the <<del class="diffchange diffchange-inline">tt</del>>url-pattern</<del class="diffchange diffchange-inline">tt</del>>, you can map all unmatched URLs to your richlet.</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>'''Tip''': By specifying <<ins class="diffchange diffchange-inline">code</ins>>/*</<ins class="diffchange diffchange-inline">code</ins>> as the <<ins class="diffchange diffchange-inline">code</ins>>url-pattern</<ins class="diffchange diffchange-inline">code</ins>>, you can map all unmatched URLs to your richlet.</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>{{ ZKDevelopersGuidePageFooter}}</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>{{ ZKDevelopersGuidePageFooter}}</div></td></tr>
</table>
Hawk
https://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Guide/Migrate/Integrate_Other_UI_frameworks/SWING/Richlets&diff=9672&oldid=prev
Tomyeh: deprecated
2010-11-08T04:53:34Z
<p>deprecated</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:53, 8 November 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1" >Line 1:</td>
<td colspan="2" class="diff-lineno">Line 1:</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>{{ZKDevelopersGuidePageHeader}}</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>{{ZKDevelopersGuidePageHeader}}</div></td></tr>
<tr><td colspan="2"> </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><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </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><ins style="font-weight: bold; text-decoration: none;">{{Old Version</ins></div></td></tr>
<tr><td colspan="2"> </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><ins style="font-weight: bold; text-decoration: none;">|url=http://books.zkoss.org/wiki/ZK_Developer%27s_Reference/UI_Composing/Richlet</ins></div></td></tr>
<tr><td colspan="2"> </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><ins style="font-weight: bold; text-decoration: none;">|}}</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>A richlet is a small Java program that creates all necessary components in response to user's request.</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>A richlet is a small Java program that creates all necessary components in response to user's request.</div></td></tr>
</table>
Tomyeh
https://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Guide/Migrate/Integrate_Other_UI_frameworks/SWING/Richlets&diff=3433&oldid=prev
Char at 08:38, 19 July 2010
2010-07-19T08:38:37Z
<p></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 08:38, 19 July 2010</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 choice between ZUML pages and richlets depends on your preference. Most developers find ZUML pages simpler and more readable.</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 choice between ZUML pages and richlets depends on your preference. Most developers find ZUML pages simpler and more readable.</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>It is straightforward to implement a richlet. First, implement the <<del class="diffchange diffchange-inline">tt</del>>org.zkoss.zk.ui.Richlet</<del class="diffchange diffchange-inline">tt</del>> interface and then declare the association of the richlet with a URL.</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>It is straightforward to implement a richlet. First, implement the <<ins class="diffchange diffchange-inline">javadoc typpe="interface"</ins>>org.zkoss.zk.ui.Richlet</<ins class="diffchange diffchange-inline">javadoc</ins>> interface and then declare the association of the richlet with a URL.</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>=== Implement the org.zkoss.zk.ui.Richlet 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>=== Implement the org.zkoss.zk.ui.Richlet interface ===</div></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>All richlets must implement the <<del class="diffchange diffchange-inline">tt</del>>org.zkoss.zk.ui.Richlet</<del class="diffchange diffchange-inline">tt</del>> interface. To simplify the task of implementing the required methods, you can extend <<del class="diffchange diffchange-inline">tt</del>>org.zkoss.zk.ui.GenericRichlet</<del class="diffchange diffchange-inline">tt</del>>. Then, when the specified URL is requested, the <tt>service</tt> method is called, and you can create the user interface then.</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>All richlets must implement the <<ins class="diffchange diffchange-inline">javadoc type="interface"</ins>>org.zkoss.zk.ui.Richlet</<ins class="diffchange diffchange-inline">javadoc</ins>> interface. To simplify the task of implementing the required methods, you can extend <<ins class="diffchange diffchange-inline">javadoc</ins>>org.zkoss.zk.ui.GenericRichlet</<ins class="diffchange diffchange-inline">javadoc</ins>>. Then, when the specified URL is requested, the <tt>service</tt> method is called, and you can create the user interface then.</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>
</table>
Char
https://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Guide/Migrate/Integrate_Other_UI_frameworks/SWING/Richlets&diff=3432&oldid=prev
Char: Created page with '{{ZKDevelopersGuidePageHeader}} A richlet is a small Java program that creates all necessary components in response to user's request. When a user requests the content of an UR…'
2010-07-19T08:34:59Z
<p>Created page with '{{ZKDevelopersGuidePageHeader}} A richlet is a small Java program that creates all necessary components in response to user's request. When a user requests the content of an UR…'</p>
<p><b>New page</b></p><div>{{ZKDevelopersGuidePageHeader}}<br />
<br />
A richlet is a small Java program that creates all necessary components in response to user's request.<br />
<br />
When a user requests the content of an URL, the ZK loader checks if the resource of the specified URL is a ZUML page or a richlet. If it is a ZUML page, then the ZK loader creates components automatically based on the ZUML page's content as we described in the previous chapters.<br />
<br />
If the resource is a richlet, the ZK loader hands over the processing to the richlet. What and how to create components are all handled by the richlet. In other words, it is the developer's job to create all necessary components programmatically in response to the request.<br />
<br />
The choice between ZUML pages and richlets depends on your preference. Most developers find ZUML pages simpler and more readable.<br />
<br />
It is straightforward to implement a richlet. First, implement the <tt>org.zkoss.zk.ui.Richlet</tt> interface and then declare the association of the richlet with a URL.<br />
<br />
=== Implement the org.zkoss.zk.ui.Richlet interface ===<br />
All richlets must implement the <tt>org.zkoss.zk.ui.Richlet</tt> interface. To simplify the task of implementing the required methods, you can extend <tt>org.zkoss.zk.ui.GenericRichlet</tt>. Then, when the specified URL is requested, the <tt>service</tt> method is called, and you can create the user interface then.<br />
<br />
<source lang="java" ><br />
package org.zkoss.zkdemo;<br />
<br />
import org.zkoss.zk.ui.Page;<br />
import org.zkoss.zk.ui.GenericRichlet;<br />
import org.zkoss.zk.ui.event.*;<br />
import org.zkoss.zul.*;<br />
<br />
public class TestRichlet extends GenericRichlet {<br />
//Richlet//<br />
public void service(Page page) {<br />
page.setTitle("Richlet Test");<br />
<br />
final Window w = new Window("Richlet Test", "normal", false);<br />
new Label("Hello World!").setParent(w);<br />
final Label l = new Label();<br />
l.setParent(w);<br />
<br />
final Button b = new Button("Change");<br />
b.addEventListener(Events.ON_CLICK,<br />
new EventListener() {<br />
int count;<br />
public void onEvent(Event evt) {<br />
l.setValue("" + ++count);<br />
}<br />
});<br />
b.setParent(w);<br />
<br />
w.setPage(page);<br />
}<br />
}<br />
</source><br />
<br />
Like servlets, you can implement the <tt>init</tt> and <tt>destroy</tt> methods to initialize and to destroy the richlet when it is loaded. Like servlet, a richlet is loaded once and serves all requests for the URL with which it is associated.<br />
<br />
==== One Richlet per URL ====<br />
Like servlets, a single richlet is created and shared for all users. In other words, the richlet (at least the <tt>service</tt> method) must be thread-safe. On the other hand, components are not shareable. Each desktop has an independent set of components. Therefore, it is generally not a good idea to store components as a data member of a richlet.<br />
<br />
There are many ways to solve this issue. A typical one is to use another class for holding the components for each desktop, as illustrated below.<br />
<br />
<source lang="java" ><br />
import org.zkoss.zk.ui.Page;<br />
import org.zkoss.zul.Window;<br />
<br />
<br />
class MyApp { //one per desktop<br />
Window _main;<br />
MyApp(Page page) {<br />
_main = new Window();<br />
_main.setPage(page);<br />
}<br />
}<br />
</source><br />
<br />
<source lang="java" > <br />
import org.zkoss.zk.ui.GenericRichlet;<br />
import org.zkoss.zk.ui.Page;<br />
<br />
class MyRichlet extends GenericRichlet {<br />
public void service(Page page) {<br />
new MyApp(page); //create and forget<br />
}<br />
}<br />
</source><br />
<br />
=== Configure web.xml and zk.xml ===<br />
After implementing the richlet, you can define the richlet in <tt>zk.xml</tt> with the following statement:<br />
<br />
<source lang="xml" ><br />
<richlet><br />
<richlet-name>Test</richlet-name><br />
<richlet-class>org.zkoss.zkdemo.TestRichlet</richlet-class><br />
</richlet><br />
</source><br />
<br />
After declaring a richlet, you can map it to any number of URLs using the <tt>richlet-mapping</tt> element as shown below.<br />
<br />
<source lang="xml" ><br />
<richlet-mapping><br />
<richlet-name>Test</richlet-name><br />
<url-pattern>/test</url-pattern><br />
</richlet-mapping><br />
<richlet-mapping><br />
<richlet-name>Test</richlet-name><br />
<url-pattern>/some/more/*</url-pattern><br />
</richlet-mapping><br />
</source><br />
<br />
By default, richlets are disabled. To enable them, add the following declaration to <tt>web.xml</tt>. Once enabled, you can add as many as richlets as you want without modifying <tt>web.xml</tt> any more.<br />
<br />
<source lang="xml" ><br />
<servlet-mapping><br />
<servlet-name>zkLoader</servlet-name><br />
<url-pattern>/zk/*</url-pattern><br />
</servlet-mapping><br />
</source><br />
<br />
Then, you can visit [http://localhost:8080/PROJECT_NAME/zk/test http://localhost:8080/PROJECT_NAME/zk/test] to request the richlet.<br />
<br />
The URL specified in the <tt>url-pattern</tt> element must start with <tt>/</tt>. If the URI ends with <tt>/*</tt>, then it is matched to all request with the same prefix. To retrieve the request's actual URL, you can check the value returned by the <tt>getRequestPath</tt> method of the current page.<br />
<br />
<source lang="java" ><br />
public void service(Page page) {<br />
if ("/some/more/hi".equals(page.getRequestPath()) {<br />
...<br />
}<br />
}<br />
</source><br />
<br />
'''Tip''': By specifying <tt>/*</tt> as the <tt>url-pattern</tt>, you can map all unmatched URLs to your richlet.<br />
<br />
{{ ZKDevelopersGuidePageFooter}}</div>
Char