https://www.zkoss.org/_w/index.php?title=Small_Talks/2010/May/New_Features_of_ZK_5.0.2&feed=atom&action=history
Small Talks/2010/May/New Features of ZK 5.0.2 - Revision history
2024-03-29T15:59:53Z
Revision history for this page on the wiki
MediaWiki 1.35.1
https://www.zkoss.org/_w/index.php?title=Small_Talks/2010/May/New_Features_of_ZK_5.0.2&diff=53804&oldid=prev
Hawk: correct highlight (via JWB)
2022-01-20T04:18:15Z
<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:18, 20 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;"><div>However, in ZK 5.0.2 this is no longer the case. This release introduces an auto PageSize concept which alters the pagesize depending on the size of the component making it much easier for developers to create feature rich application which require paging.</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>However, in ZK 5.0.2 this is no longer the case. This release introduces an auto PageSize concept which alters the pagesize depending on the size of the component making it much easier for developers to create feature rich application which require paging.</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 feature can be turned on by setting the <<del class="diffchange diffchange-inline">tt</del>>autopaging</<del class="diffchange diffchange-inline">tt</del>> property to true. The following is an example of this feature.</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 feature can be turned on by setting the <<ins class="diffchange diffchange-inline">code</ins>>autopaging</<ins class="diffchange diffchange-inline">code</ins>> property to true. The following is an example of this feature.</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>[[Image:grid_autopageSize.png]]</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>[[Image:grid_autopageSize.png]]</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l87" >Line 87:</td>
<td colspan="2" class="diff-lineno">Line 87:</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>With 5.0.0 and 5.0.1, <javadoc method="get()">org.zkoss.zul.Fileupload</javadoc> worked only if the event thread is enabled. If the event thread is disabled, it is suggested to use <javadoc method="setUpload(java.lang.String)">org.zkoss.zul.Button</javadoc>.</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>With 5.0.0 and 5.0.1, <javadoc method="get()">org.zkoss.zul.Fileupload</javadoc> worked only if the event thread is enabled. If the event thread is disabled, it is suggested to use <javadoc method="setUpload(java.lang.String)">org.zkoss.zul.Button</javadoc>.</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>In 5.0.2, <javadoc method="get()">org.zkoss.zul.Fileupload</javadoc> can be used if the event thread is disabled. However, the handling is a bit different. Because the event thread is disabled, <javadoc method="get()">org.zkoss.zul.Fileupload</javadoc> won't return the uploaded files. Rather, you have to register a listener for the event called <<del class="diffchange diffchange-inline">tt</del>>onUpload</<del class="diffchange diffchange-inline">tt</del>>, and then retrieve the uploaded files in the listener.</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>In 5.0.2, <javadoc method="get()">org.zkoss.zul.Fileupload</javadoc> can be used if the event thread is disabled. However, the handling is a bit different. Because the event thread is disabled, <javadoc method="get()">org.zkoss.zul.Fileupload</javadoc> won't return the uploaded files. Rather, you have to register a listener for the event called <<ins class="diffchange diffchange-inline">code</ins>>onUpload</<ins class="diffchange diffchange-inline">code</ins>>, and then retrieve the uploaded files in the listener.</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>The following code demonstrates how to do this.</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 following code demonstrates how to do this.</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l124" >Line 124:</td>
<td colspan="2" class="diff-lineno">Line 124:</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>It is very important to set the target that <<del class="diffchange diffchange-inline">tt</del>>onUpload</<del class="diffchange diffchange-inline">tt</del>> will be sent to.</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 very important to set the target that <<ins class="diffchange diffchange-inline">code</ins>>onUpload</<ins class="diffchange diffchange-inline">code</ins>> will be sent to.</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-l136" >Line 136:</td>
<td colspan="2" class="diff-lineno">Line 136:</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>In ZK 5.0.2 we can now defer the rendering of client widgets. This enables the large and complex pages to be displayed to the user quicker thus making the page feel more responsive.</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>In ZK 5.0.2 we can now defer the rendering of client widgets. This enables the large and complex pages to be displayed to the user quicker thus making the page feel more responsive.</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>To implement this you set the property <<del class="diffchange diffchange-inline">tt</del>>renderdefer</<del class="diffchange diffchange-inline">tt</del>> to a integer value. An example is 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>To implement this you set the property <<ins class="diffchange diffchange-inline">code</ins>>renderdefer</<ins class="diffchange diffchange-inline">code</ins>> to a integer value. An example is 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>
</table>
Hawk
https://www.zkoss.org/_w/index.php?title=Small_Talks/2010/May/New_Features_of_ZK_5.0.2&diff=16363&oldid=prev
Tomyeh: /* Auto pageSize depending on the component's height */
2011-01-17T07:19:10Z
<p><span dir="auto"><span class="autocomment">Auto pageSize depending on the component's height</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 07:19, 17 January 2011</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l22" >Line 22:</td>
<td colspan="2" class="diff-lineno">Line 22:</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 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><del class="diffchange diffchange-inline"> </del><grid id="listbox" autopaging="true" mold="paging" vflex="true"></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><grid id="listbox" autopaging="true" mold="paging" vflex="true"></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><del class="diffchange diffchange-inline"> </del><columns></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><ins class="diffchange diffchange-inline"> </ins><columns></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><del class="diffchange diffchange-inline"> </del><column label="column1"/></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><ins class="diffchange diffchange-inline"> </ins><column label="column1"/></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><del class="diffchange diffchange-inline"> </del></columns></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><ins class="diffchange diffchange-inline"> </ins></columns></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><del class="diffchange diffchange-inline"> </del><rows></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><ins class="diffchange diffchange-inline"> </ins><rows></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><del class="diffchange diffchange-inline"> </del><row forEach="<del class="diffchange diffchange-inline">&#36;</del>{items}"></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><ins class="diffchange diffchange-inline"> </ins><row forEach="<ins class="diffchange diffchange-inline">$</ins>{items}"></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><del class="diffchange diffchange-inline"> </del>${each}</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><ins class="diffchange diffchange-inline"> </ins>${each}</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><del class="diffchange diffchange-inline"> </del></row></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><ins class="diffchange diffchange-inline"> </ins></row></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><del class="diffchange diffchange-inline"> </del></rows></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><ins class="diffchange diffchange-inline"> </ins></rows></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><del class="diffchange diffchange-inline"> </del></grid></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></grid></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></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="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><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </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><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </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>=Enhanced jQuery selectors=</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>=Enhanced jQuery selectors=</div></td></tr>
</table>
Tomyeh
https://www.zkoss.org/_w/index.php?title=Small_Talks/2010/May/New_Features_of_ZK_5.0.2&diff=15828&oldid=prev
Sphota: /* Enhanced jQuery selectors */
2010-12-29T06:27:18Z
<p><span dir="auto"><span class="autocomment">Enhanced jQuery selectors</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 06:27, 29 December 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l60" >Line 60:</td>
<td colspan="2" class="diff-lineno">Line 60:</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;"></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>For an interactive demo of the above feature please [http://www.zkoss.org/<del class="diffchange diffchange-inline">zkdemo</del>/test/selector.zul click here].</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>For an interactive demo of the above feature please [http://www.zkoss.org/<ins class="diffchange diffchange-inline">zksandbox</ins>/test/selector.zul click here].</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>For a video of the above feature please [http://blog.zkoss.org/index.php/2010/05/12/zk-5-0-2-zks-jquery-selectors click here].</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 a video of the above feature please [http://blog.zkoss.org/index.php/2010/05/12/zk-5-0-2-zks-jquery-selectors click here].</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>
</table>
Sphota
https://www.zkoss.org/_w/index.php?title=Small_Talks/2010/May/New_Features_of_ZK_5.0.2&diff=15238&oldid=prev
Char: /* Download & other resources */
2010-12-21T03:09:06Z
<p><span dir="auto"><span class="autocomment">Download & other resources</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 03:09, 21 December 2010</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>*[http://www.zkoss.org/download/zk.dsp Download ZK 5 here]</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>*[http://www.zkoss.org/download/zk.dsp Download ZK 5 here]</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>*[http://www.zkoss.org/release/rn-5.0.2.dsp Take a look at ZK 5's release notes here]</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>*[http://www.zkoss.org/release/rn-5.0.2.dsp Take a look at ZK 5's release notes here]</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>*View the [<del class="diffchange diffchange-inline">http:/</del>/<del class="diffchange diffchange-inline">docs.zkoss.org</del>/<del class="diffchange diffchange-inline">wiki</del>/ZK_5:_Upgrade_Notes ZK 5: Upgrade Notes] and a real case: [[Small Talks/2010/April/Upgrading to ZK 5|Upgrading to ZK 5]]</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>*View the [<ins class="diffchange diffchange-inline">[Small_Talks</ins>/<ins class="diffchange diffchange-inline">2009</ins>/<ins class="diffchange diffchange-inline">December</ins>/ZK_5:_Upgrade_Notes <ins class="diffchange diffchange-inline">|</ins>ZK 5: Upgrade Notes<ins class="diffchange diffchange-inline">]</ins>] and a real case: [[Small Talks/2010/April/Upgrading to ZK 5|Upgrading to ZK 5]]</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>=References=</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>=References=</div></td></tr>
</table>
Char
https://www.zkoss.org/_w/index.php?title=Small_Talks/2010/May/New_Features_of_ZK_5.0.2&diff=12781&oldid=prev
Jumperchen: /* Defer rendering of client widgets */
2010-11-29T08:37:16Z
<p><span dir="auto"><span class="autocomment">Defer rendering of client widgets</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 08:37, 29 November 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l144" >Line 144:</td>
<td colspan="2" class="diff-lineno">Line 144:</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>For more information please [[<del class="diffchange diffchange-inline">Performance_Tip#</del>Defer_the_Rendering_of_Client_Widgets | click here]].</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>For more information please [[<ins class="diffchange diffchange-inline">ZK_Developer's_Reference/Performance_Tips/</ins>Defer_the_Rendering_of_Client_Widgets| click here]].</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>=Download & other resources =</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>=Download & other resources =</div></td></tr>
</table>
Jumperchen
https://www.zkoss.org/_w/index.php?title=Small_Talks/2010/May/New_Features_of_ZK_5.0.2&diff=12559&oldid=prev
Tomyeh: /* Download & other resources */
2010-11-26T09:23:31Z
<p><span dir="auto"><span class="autocomment">Download & other resources</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 09:23, 26 November 2010</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>*[http://www.zkoss.org/download/zk.dsp Download ZK 5 here]</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>*[http://www.zkoss.org/download/zk.dsp Download ZK 5 here]</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>*[http://www.zkoss.org/release/rn-5.0.2.dsp Take a look at ZK 5's release notes here]</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>*[http://www.zkoss.org/release/rn-5.0.2.dsp Take a look at ZK 5's release notes here]</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>*View the [<del class="diffchange diffchange-inline">[</del>ZK_5:_Upgrade_Notes]]</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>*View the [<ins class="diffchange diffchange-inline">http://docs.zkoss.org/wiki/</ins>ZK_5:_Upgrade_Notes <ins class="diffchange diffchange-inline">ZK 5: Upgrade Notes] and a real case: [[Small Talks/2010/April/Upgrading to ZK 5|Upgrading to ZK 5</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>=References=</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>=References=</div></td></tr>
</table>
Tomyeh
https://www.zkoss.org/_w/index.php?title=Small_Talks/2010/May/New_Features_of_ZK_5.0.2&diff=7587&oldid=prev
Elton776: moved Small Talks/New Features of ZK 5.0.2 to Small Talks/2010/May/New Features of ZK 5.0.2
2010-09-20T09:18:26Z
<p>moved <a href="/wiki/Small_Talks/New_Features_of_ZK_5.0.2" class="mw-redirect" title="Small Talks/New Features of ZK 5.0.2">Small Talks/New Features of ZK 5.0.2</a> to <a href="/wiki/Small_Talks/2010/May/New_Features_of_ZK_5.0.2" title="Small Talks/2010/May/New Features of ZK 5.0.2">Small Talks/2010/May/New Features of ZK 5.0.2</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 09:18, 20 September 2010</td>
</tr><tr><td colspan="2" class="diff-notice" lang="en"><div class="mw-diff-empty">(No difference)</div>
</td></tr></table>
Elton776
https://www.zkoss.org/_w/index.php?title=Small_Talks/2010/May/New_Features_of_ZK_5.0.2&diff=5897&oldid=prev
Elton776: Created page with '{{Template:Smalltalk_Author| |author=Timothy Clare, Technology Evangelist, Potix Corporation |date=May 12th, 2010 |version=ZK 5.0.2 }} ZK 5.0.2 is a maintenance release focusin…'
2010-09-13T02:24:43Z
<p>Created page with '{{Template:Smalltalk_Author| |author=Timothy Clare, Technology Evangelist, Potix Corporation |date=May 12th, 2010 |version=ZK 5.0.2 }} ZK 5.0.2 is a maintenance release focusin…'</p>
<p><b>New page</b></p><div>{{Template:Smalltalk_Author|<br />
|author=Timothy Clare, Technology Evangelist, Potix Corporation<br />
|date=May 12th, 2010<br />
|version=ZK 5.0.2<br />
}}<br />
<br />
<br />
ZK 5.0.2 is a maintenance release focusing on fixing some issues and introducing requested features. Requested features include, enhanced jQuery selectors to enable ZTL testing, auto setting of pageSize when using a paging mold and introduction of a method to track Ajax requests in Google Analytics.<br />
<br />
<br />
<br />
=Auto pageSize depending on the component's height=<br />
<br />
If a component such as Grid which used paging needed to stretch to fit its container then it would do so without any regard for the pageSize. This would have to be set manually by the developer.<br />
<br />
However, in ZK 5.0.2 this is no longer the case. This release introduces an auto PageSize concept which alters the pagesize depending on the size of the component making it much easier for developers to create feature rich application which require paging.<br />
<br />
The feature can be turned on by setting the <tt>autopaging</tt> property to true. The following is an example of this feature.<br />
<br />
[[Image:grid_autopageSize.png]]<br />
<br />
<br />
<source lang="xml"><br />
<grid id="listbox" autopaging="true" mold="paging" vflex="true"><br />
<columns><br />
<column label="column1"/><br />
</columns><br />
<rows><br />
<row forEach="&#36;{items}"><br />
${each}<br />
</row><br />
</rows><br />
</grid><br />
</source><br />
<br />
<br />
<br />
=Enhanced jQuery selectors=<br />
<br />
In ZK 5.0.2 jQuery’s selectors have been enhanced to handle ZK widget’s ID’s and types. The following is a ZUL snippet and then a list of appropriate selectors with their effects.<br />
<br />
<source lang="xml"><br />
<zk><br />
<window id="win1" class="abc" border="normal"><br />
<div id="abc" class="abc"/><br />
</window><br />
<window id="win2"><br />
<div id="abc" class="abc"/><br />
</window><br />
</zk><br />
</source><br />
<br />
#jq('@window > $abc') will return the two div(id=abc) elements<br />
#jq('@window[class~="abc"] @div') will only return the div where is inside the window with "abc" CSS class name<br />
#jq('div$win1 > $abc') will return the div element where is inside the win1 window<br />
#jq('$abc') will return all the elements that match from the given id<br />
#jq('@div') will return all the elements that match from the given tag name<br />
#jq('@window:first') will return id="win1"<br />
#jq('@window[border="normal]"') will return id="win1"<br />
<br />
<br />
For an interactive demo of the above feature please [http://www.zkoss.org/zkdemo/test/selector.zul click here].<br />
For a video of the above feature please [http://blog.zkoss.org/index.php/2010/05/12/zk-5-0-2-zks-jquery-selectors click here].<br />
<br />
=Tracking Ajax requests with Google Analytics=<br />
<br />
One of the problems with Ajax is the fact that it isn’t easy to track clicks in your application without building your own system to do so. ZK 5.0.2 changes this by allowing users to track their application by overriding our beforeSend JavaScript method. <br />
<br />
The following demonstrates some example code.<br />
<br />
<source lang="javascript"><br />
var auBfSend = zAu.beforeSend;<br />
zAu.beforeSend = function (uri, req) {<br />
try {<br />
var target = req.target;<br />
if (target.id) {<br />
var data = req.data||{},<br />
value = data.items && data.items[0]?data.items[0].id:data.value;<br />
pageTracker._trackPageview((target.desktop?target.desktop.requestPath:"") + "/" + target.id + "/" + req.name + (value?"/"+value:""));<br />
}<br />
} catch (e) {<br />
}<br />
return auBfSend(uri, req);<br />
};<br />
</source><br />
<br />
=A simple implementation of the FileuploadDialog=<br />
<br />
With 5.0.0 and 5.0.1, <javadoc method="get()">org.zkoss.zul.Fileupload</javadoc> worked only if the event thread is enabled. If the event thread is disabled, it is suggested to use <javadoc method="setUpload(java.lang.String)">org.zkoss.zul.Button</javadoc>.<br />
<br />
In 5.0.2, <javadoc method="get()">org.zkoss.zul.Fileupload</javadoc> can be used if the event thread is disabled. However, the handling is a bit different. Because the event thread is disabled, <javadoc method="get()">org.zkoss.zul.Fileupload</javadoc> won't return the uploaded files. Rather, you have to register a listener for the event called <tt>onUpload</tt>, and then retrieve the uploaded files in the listener.<br />
<br />
The following code demonstrates how to do this.<br />
<br />
<source lang="xml"><br />
<br />
<zk><br />
<zscript deferred="true"><![CDATA[<br />
import org.zkoss.util.media.Media;<br />
<br />
Executions.getCurrent().getDesktop().setAttribute(<br />
"org.zkoss.zul.Fileupload.target", uploadBtn);<br />
<br />
public void processMedia(Media[] media) {<br />
if (media != null) {<br />
for (int i = 0; i < media.length; i++) {<br />
if (media[i] instanceof org.zkoss.image.Image) {<br />
image.setContent(media[i]);<br />
} else {<br />
Messagebox.show("Not an image: " + media[i], "Error",<br />
Messagebox.OK, Messagebox.ERROR);<br />
break; //not to show too many errors<br />
}<br />
}<br />
}<br />
}<br />
]]></zscript><br />
<vbox><br />
<button id="uploadBtn" label="Upload"<br />
onUpload="processMedia(event.getMedias());"<br />
onClick="Fileupload.get(-1);" /><br />
<image id="image" /><br />
</vbox><br />
</zk><br />
<br />
</source><br />
<br />
It is very important to set the target that <tt>onUpload</tt> will be sent to.<br />
<br />
<source lang="java"><br />
Executions.getCurrent().getDesktop().setAttribute(<br />
"org.zkoss.zul.Fileupload.target", uploadBtn);<br />
</source><br />
<br />
If you do not then the top level component (in this case vbox) will be selected as the target and not the button.<br />
<br />
=Defer rendering of client widgets=<br />
<br />
In ZK 5.0.2 we can now defer the rendering of client widgets. This enables the large and complex pages to be displayed to the user quicker thus making the page feel more responsive.<br />
To implement this you set the property <tt>renderdefer</tt> to a integer value. An example is shown below.<br />
<br />
<source lang="xml"><br />
<window title="inner" width="300px" height="200px" border="normal" renderdefer="100"><br />
</source><br />
<br />
For more information please [[Performance_Tip#Defer_the_Rendering_of_Client_Widgets | click here]].<br />
<br />
=Download & other resources =<br />
<br />
*[http://www.zkoss.org/download/zk.dsp Download ZK 5 here]<br />
*[http://www.zkoss.org/release/rn-5.0.2.dsp Take a look at ZK 5's release notes here]<br />
*View the [[ZK_5:_Upgrade_Notes]]<br />
<br />
=References=<br />
<br />
<references/><br />
<br />
<br />
[[Category:ZK]]<br />
[[Category:New Features]]<br />
[[Category:Server+Client fusion]]<br />
{{Template:CommentedSmalltalk_Footer|<br />
|name=Potix Corporation<br />
}}</div>
Elton776