https://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Guide/Migrate/Integrate_Other_UI_frameworks/Work_with_HTML_Tags&feed=atom&action=historyZK Developer's Guide/Migrate/Integrate Other UI frameworks/Work with HTML Tags - Revision history2024-03-28T22:22:46ZRevision history for this page on the wikiMediaWiki 1.35.1https://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Guide/Migrate/Integrate_Other_UI_frameworks/Work_with_HTML_Tags&diff=53418&oldid=prevHawk: correct highlight (via JWB)2022-01-19T10:39:34Z<p>correct highlight (via JWB)</p>
<a href="https://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Guide/Migrate/Integrate_Other_UI_frameworks/Work_with_HTML_Tags&diff=53418&oldid=18516">Show changes</a>Hawkhttps://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Guide/Migrate/Integrate_Other_UI_frameworks/Work_with_HTML_Tags&diff=18516&oldid=prevTonyq at 04:50, 9 May 20112011-05-09T04:50:08Z<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 04:50, 9 May 2011</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l218" >Line 218:</td>
<td colspan="2" class="diff-lineno">Line 218:</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> ${param.some}</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> ${param.some}</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;"></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;">If you want to access it in zscript , use param as a map.</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 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;"><source lang="xml" highlight="2"></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;"><zscript></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;"> String name = param.get("some");</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;"></script></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;"></source></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>Alternatively, we can pass any kind of values with the so-called dynamic properties by use of the <tt>setDynamicProperty</tt> method or, in ZUL, a dynamic property as follows:</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>Alternatively, we can pass any kind of values with the so-called dynamic properties by use of the <tt>setDynamicProperty</tt> method or, in ZUL, a dynamic property as follows:</div></td></tr>
</table>Tonyqhttps://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Guide/Migrate/Integrate_Other_UI_frameworks/Work_with_HTML_Tags&diff=16666&oldid=prevTomyeh at 10:38, 18 January 20112011-01-18T10:38:24Z<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 10:38, 18 January 2011</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 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_Patterns/HTML_Tags</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;"><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 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>Tomyehhttps://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Guide/Migrate/Integrate_Other_UI_frameworks/Work_with_HTML_Tags&diff=3641&oldid=prevChar: /* Including ZUML Pages */2010-07-26T06:09:30Z<p><span dir="auto"><span class="autocomment">Including ZUML Pages</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:09, 26 July 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l244" >Line 244:</td>
<td colspan="2" class="diff-lineno">Line 244:</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>If you want to look into the component of an included page, macro components are usually a better option. Refer to the '''Macro Components''' section in the '''ZK User Interface Markup Language''' chapter.</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>If you want to look into the component of an included page, macro components are usually a better option. Refer to the '''Macro Components''' section in the <ins class="diffchange diffchange-inline">[http://books.zkoss.org/wiki/ZK_ZUML_Reference </ins>'''ZK User Interface Markup Language'''<ins class="diffchange diffchange-inline">] </ins>chapter.</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>'''Notes'''</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>'''Notes'''</div></td></tr>
</table>Charhttps://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Guide/Migrate/Integrate_Other_UI_frameworks/Work_with_HTML_Tags&diff=3640&oldid=prevChar: /* The style Component */2010-07-26T05:08:09Z<p><span dir="auto"><span class="autocomment">The style Component</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 05:08, 26 July 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l262" >Line 262:</td>
<td colspan="2" class="diff-lineno">Line 262:</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''': To configure a style sheet for the whole application, specify <tt>theme-uri</tt> in zk.xml, refer to the [http://books.zkoss.org/wiki/Internationalization#Themes '''Themes'''] section in the [http://books.zkoss.org/wiki/Internationalization '''Internationalization'''] chapter, or <del class="diffchange diffchange-inline">'''Appendix B''' </del>in [http://books.zkoss.org/wiki/ZK_ZUML_Reference '''the Developer's Reference'''] for details. To configure a style sheet for a language, use the language addon, refer to [http://books.zkoss.org/wiki/ZK_Component_Reference '''the Component Development Guide'''].</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''': To configure a style sheet for the whole application, specify <tt>theme-uri</tt> in zk.xml, refer to the [http://books.zkoss.org/wiki/Internationalization#Themes '''Themes'''] section in the [http://books.zkoss.org/wiki/Internationalization '''Internationalization'''] chapter, or in [http://books.zkoss.org/wiki/ZK_ZUML_Reference '''the Developer's Reference'''] for details. To configure a style sheet for a language, use the language addon, refer to [http://books.zkoss.org/wiki/ZK_Component_Reference '''the Component Development Guide'''].</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>Sometimes it is better to store all CSS definitions in an independent file, say <tt>my.css</tt>. Then, we could reference it by use of the style component as follows.</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>Sometimes it is better to store all CSS definitions in an independent file, say <tt>my.css</tt>. Then, we could reference it by use of the style component as follows.</div></td></tr>
</table>Charhttps://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Guide/Migrate/Integrate_Other_UI_frameworks/Work_with_HTML_Tags&diff=3639&oldid=prevChar: /* The style Component */2010-07-26T05:06:55Z<p><span dir="auto"><span class="autocomment">The style Component</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 05:06, 26 July 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l262" >Line 262:</td>
<td colspan="2" class="diff-lineno">Line 262:</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''': To configure a style sheet for the whole application, specify <tt>theme-uri</tt> in zk.xml, refer to the '''Themes''' section in the '''Internationalization''' chapter, or '''Appendix B''' in '''the Developer's Reference''' for details. To configure a style sheet for a language, use the language addon, refer to '''the Component Development Guide'''.</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''': To configure a style sheet for the whole application, specify <tt>theme-uri</tt> in zk.xml, refer to the <ins class="diffchange diffchange-inline"> [http://books.zkoss.org/wiki/Internationalization#Themes </ins>'''Themes'''<ins class="diffchange diffchange-inline">] </ins>section in the <ins class="diffchange diffchange-inline">[http://books.zkoss.org/wiki/Internationalization </ins>'''Internationalization'''<ins class="diffchange diffchange-inline">] </ins>chapter, or '''Appendix B''' in <ins class="diffchange diffchange-inline">[http://books.zkoss.org/wiki/ZK_ZUML_Reference </ins>'''the Developer's Reference'''<ins class="diffchange diffchange-inline">] </ins>for details. To configure a style sheet for a language, use the language addon, refer to <ins class="diffchange diffchange-inline"> [http://books.zkoss.org/wiki/ZK_Component_Reference </ins>'''the Component Development Guide'''<ins class="diffchange diffchange-inline">]</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>Sometimes it is better to store all CSS definitions in an independent file, say <tt>my.css</tt>. Then, we could reference it by use of the style component as follows.</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>Sometimes it is better to store all CSS definitions in an independent file, say <tt>my.css</tt>. Then, we could reference it by use of the style component as follows.</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l278" >Line 278:</td>
<td colspan="2" class="diff-lineno">Line 278:</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 other words, you cannot specify "<tt>/WEB-INF/xx</tt>" or "[/../xx/yy C:/xx/yy]".</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 other words, you cannot specify "<tt>/WEB-INF/xx</tt>" or "[/../xx/yy C:/xx/yy]".</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>Like other URI, it accepts "*" for loading browser and Locale dependent style sheet. Refer to the '''Browser and Locale Dependent URI''' section in the '''Internationalization''' chapter for details.</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 other URI, it accepts "*" for loading browser and Locale dependent style sheet. Refer to the <ins class="diffchange diffchange-inline"> [http://books.zkoss.org/wiki/Internationalization#Browser_and_Locale-Dependent_URI </ins>'''Browser and Locale Dependent URI'''<ins class="diffchange diffchange-inline">] </ins>section in the <ins class="diffchange diffchange-inline">[http://books.zkoss.org/wiki/Internationalization </ins>'''Internationalization'''<ins class="diffchange diffchange-inline">] </ins>chapter for details.</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>'''Notes'''</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>'''Notes'''</div></td></tr>
</table>Charhttps://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Guide/Migrate/Integrate_Other_UI_frameworks/Work_with_HTML_Tags&diff=3637&oldid=prevChar: /* The XHTML Namespace */2010-07-26T04:37:34Z<p><span dir="auto"><span class="autocomment">The XHTML Namespace</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 04:37, 26 July 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l160" >Line 160:</td>
<td colspan="2" class="diff-lineno">Line 160:</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 XHTML Namespace ===</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 XHTML Namespace ===</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>The [http://www.org/1999/xhtml <tt>XHTML</tt>] namespace represents the XHTML component set, just like the ZUL namespace ([http://www/ http://www.zkoss.org/2005/zul]) represents the ZUL component set. Thus, a XML element specified with the XHTML namespace simply denotes a component that shall be created based on the component definition from the XHTML component set. For example, the statement blow specifies a component that shall be created as an instance of the component definition called <tt>ul</tt>, and <tt>ul</tt> belongs to the XHTML component set:</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 [http://www.org/1999/xhtml <tt>XHTML</tt>] namespace represents the XHTML component set, just like the ZUL namespace ([http://www<ins class="diffchange diffchange-inline">.zkoss.org</ins>/<ins class="diffchange diffchange-inline">2005/zul </ins>http://www.zkoss.org/2005/zul]) represents the ZUL component set. Thus, a XML element specified with the XHTML namespace simply denotes a component that shall be created based on the component definition from the XHTML component set. For example, the statement blow specifies a component that shall be created as an instance of the component definition called <tt>ul</tt>, and <tt>ul</tt> belongs to the XHTML component set:</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>Charhttps://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Guide/Migrate/Integrate_Other_UI_frameworks/Work_with_HTML_Tags&diff=3430&oldid=prevChar at 08:21, 19 July 20102010-07-19T08:21:58Z<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:21, 19 July 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l348" >Line 348:</td>
<td colspan="2" class="diff-lineno">Line 348:</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 onURIChange Event ====</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==== The onURIChange Event ====</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>When the user navigates the <tt>iframe</tt> component to another URL (or bookmark), an object of the <<del class="diffchange diffchange-inline">tt</del>>org.zkoss.zk.ui.event.URIEvent</<del class="diffchange diffchange-inline">tt</del>> class is sent to the <tt>iframe</tt> component. This event is usually used to bookmark the status of the <tt>iframe</tt> component, such that the right content can be restored later.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>When the user navigates the <tt>iframe</tt> component to another URL (or bookmark), an object of the <<ins class="diffchange diffchange-inline">javadoc</ins>>org.zkoss.zk.ui.event.URIEvent</<ins class="diffchange diffchange-inline">javadoc</ins>> class is sent to the <tt>iframe</tt> component. This event is usually used to bookmark the status of the <tt>iframe</tt> component, such that the right content can be restored later.</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>==== Integrate with Other Technologies ====</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>==== Integrate with Other Technologies ====</div></td></tr>
</table>Charhttps://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Guide/Migrate/Integrate_Other_UI_frameworks/Work_with_HTML_Tags&diff=3414&oldid=prevChar at 07:32, 19 July 20102010-07-19T07:32: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 07:32, 19 July 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="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;"><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 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>Charhttps://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Guide/Migrate/Integrate_Other_UI_frameworks/Work_with_HTML_Tags&diff=3410&oldid=prevChar: Created page with ' {{ZKDevelopersGuidePageHeader}} There are several ways to use HTML tags with XUL components in the same ZUML page. You can chose any of them based on your requirement. First, …'2010-07-19T07:26:32Z<p>Created page with ' {{ZKDevelopersGuidePageHeader}} There are several ways to use HTML tags with XUL components in the same ZUML page. You can chose any of them based on your requirement. First, …'</p>
<p><b>New page</b></p><div><br />
{{ZKDevelopersGuidePageHeader}}<br />
<br />
There are several ways to use HTML tags with XUL components in the same ZUML page. You can chose any of them based on your requirement.<br />
<br />
First, you can use the <tt>html</tt> component to embed HTML tags. With this approach, the HTML tags are simply the content of the <tt>html</tt> component. They are sent to the client directly. They don't have any specify meaning to ZK.<br />
<br />
Second, you can use the XHTML namespace ([http://www.w3.org/1999/xhtml http://www.w3.org/1999/xhtml][http://www.w3.org/1999/xhtml ) ]to specify a component from the XHTML component set. In other words, the XHTML namespace denotes the associate XML element is a component from the XHTML component set. Like the ZUL component set (<tt>http://www.zkoss.org/2005/zul</tt>), ZK creates an instance for each XML element in a ZUML page.<br />
<br />
Third, you can use the Native namespace [http://www.w3.org/1999/xhtml (][http://www.zkoss.org/2005/zk/inline http://www.zkoss.org/2005/zk/native]) to represent a HTML tag that shall be sent directly to the client instead of creating a ZK component for each of them. When It is more efficient, but not dynamically changeable.<br />
<br />
Last but not least, you can use inclusion (<tt>include</tt>) and inline frames (<tt>iframe</tt>) to embed another into a ZUL page with, theoretically, any kind of content (not limited to HTML tags<br />
<br />
=== The html Component ===<br />
The simplest way is to use a XUL component called <tt>html</tt><ref>The text within the <tt>html</tt> element is actually assigned to the <tt>html</tt> component's <tt>content</tt> property (rather than becoming a label child).</ref> to embed whatever HTML tags you want to send directly to the browser. To avoid ZK from interpreting the HTML tags, you usually enclose them with <tt><![CDATA[</tt> and <tt>]]></tt>. In other words, they are not the child component. Rather, they are stored in the <tt>content</tt> property<ref>Refer to the '''XML''' section in the '''ZK User Interface Markup Language''' chapter if you are not familiar with XML.</ref>. Notice you can use EL expressions in it.<br />
<br />
<source lang="xml" ><br />
<window border="normal" title="Html Demo"><br />
<html><![CDATA[<br />
<h4>Hi, ${parent.title}</h4><br />
<p>It is the content of the html component.</p><br />
]]></html><br />
</window><br />
</source><br />
<br />
where <tt><nowiki><h4>...</p></nowiki></tt> will become the content of the <tt>html</tt> element (see also the <tt>getContent</tt> method of the <tt>org.zkoss.zul.Html</tt> class).<br />
<br />
'''Tip''': You can use the attribute element to specify the XHTML fragment instead of <tt>CDATA</tt> as follows.<br />
<br />
<source lang="xml" ><br />
<window border="normal" title="Html Demo"><br />
<html><br />
<attribute name="content"><br />
<h4>Hi, ${parent.title}</h4><br />
<p>It is the content of the html component.</p><br />
</attribute><br />
</html><br />
</window><br />
</source><br />
<br />
Refer to the <tt>'''attribute</tt> Element''' section in the ZK User Interface Markup Language chapter..<br />
<br />
The <tt>html</tt> component generates the HTML <tt>SPAN</tt> tag to enclose the content. In other words, it generates the following HTML tags when rendered to the browser.<br />
<br />
<source lang="xml" ><br />
<span id="z_4a_3"><br />
<h4>Hi, Html Demo</h4><br />
<p>It is the content of the html component.</p><br />
</span><br />
</source><br />
<br />
The <tt>html</tt> component is no different to other XUL components. For example, you specify the CSS style and change its content dynamically.<br />
<br />
<source lang="xml" ><br />
<zk><br />
<html id="h" style="border: 1px solid blue;background: yellow"><br />
<![CDATA[<br />
<ul><br />
<li>Native browser content</li><br />
</ul><br />
]]><br />
</html><br />
<button label="change" onClick="h.setContent(&quot;Hi, Update&quot;)" /><br />
</zk><br />
</source><br />
<br />
Notice that, since <tt>SPAN</tt> is used to enclose the embedded HTML tags, the following code snippet is incorrect.<br />
<br />
<source lang="xml" ><br />
<zk><br />
<html><![CDATA[<br />
<ul><br />
<li> <!-- incorrect since <ul><li> is inside <span> --><br />
]]><br />
</html><br />
<textbox /><br />
<html><![CDATA[<br />
</li><br />
</ul><br />
]]><br />
</html><br />
</zk><br />
</source><br />
<br />
If you need to generate the embedded HTML tags directly without the enclosing <tt>SPAN</tt> tag, you can use the Native namespace as described in the following section.<br />
<br />
'''Notes'''<br />
<references/><br />
<br />
=== The Native Namespace, [http://www.zkoss.org/2007/inline http://www.zkoss.org/2005/zk/native] ===<br />
With the Native namespace, a XML element in a ZUML page denotes that it shall be sent to the browser directly rather than becoming a ZK component. For example,<br />
<br />
<source lang="xml" ><br />
<n:ul xmlns:n="http://www.zkoss.org/2005/zk/native"><br />
<n:li><br />
<textbox/><br />
</n:li><br />
<n:li><br />
<textbox/><br />
</n:li><br />
</n:ul><br />
</source><br />
<br />
will generate the following HTML tags to the browser:<br />
<br />
<source lang="xml" ><br />
<ul><br />
<li><br />
<input id="z_a3_2"/><br />
</li><br />
<li><br />
<input id="z_a3_5"/><br />
</li><br />
</ul<br />
</source><br />
<br />
where <tt><input></tt> is the HTML tag(s) generated by the <tt>textbox</tt> component. Unlike textbox in the example above, ZK Loader doesn't really create a component for each of <tt>ul</tt> and <tt>li</tt>.<ref>ZK ZK actually creates a special component to represent as many XML elements with the Native namespace as possible.</ref> Rather, they are sent to the client directly. Of course, they must be recognizable by the client. For HTML browsers, they must be the valid HTML tags.<br />
<br />
Since the elements associated with the Native namespace are sent directly to the client, they are not ZK components, and they don't have the counterpart at the client. The advantage is the better performance in term of both memory and processing time. On the other hand, the disadvantage is you cannot access or change them dynamically. For example, the following code snippet is incorrect, since there is no component called <tt>x</tt>.<br />
<br />
<source lang="xml" ><br />
<n:ul id="x" xmlns:n="http://www.zkoss.org/2005/zk/native"/><br />
<button label="add" onClick="new Li().setParent(x)"/><br />
</source><br />
<br />
If you want to change them dynamically, you can specify the XHTML namespace as described in the following section.<br />
<br />
'''Notes'''<br />
<references/><br />
<br />
<br />
==== Output Another Namespace with the Native Namespace ====<br />
If you want to generate another namespace to the output, you can use another format as the URI of the Native namespace:<br />
<br />
<source lang="xml" ><br />
native:''URI-of-another-namespace''<br />
</source><br />
<br />
For example, if you want to output the XAML tags directly to the client, you can specify <nowiki>native:http://schemas.microsoft.com/client/2007</nowiki> as follows.<br />
<br />
<source lang="xml" ><br />
<zk><br />
<Canvas xmlns="native:http://schemas.microsoft.com/client/2007"><br />
<TextBlock>Hello World!</TextBlock><br />
</Canvas><br />
</zk><br />
</source><br />
<br />
Then, the client will receive the following<ref>The real HTML output of window depends on its implementation. Here is only a simplified version.</ref>:<br />
<br />
<source lang="xml" ><br />
<div z.au="/ZKTester/zkau" z.zidsp="page" style="width: 100%; height: 100%;" z.dtid="gk68" id="z_k6_0" class="zk"><br />
<canvas xmlns="http://schemas.microsoft.com/client/2007"><br />
<textblock>Hello World!</textblock><br />
</canvas><br />
</div><br />
</source><br />
<br />
'''Notes'''<br />
<references/><br />
<br />
=== The XHTML Namespace ===<br />
The [http://www.org/1999/xhtml <tt>XHTML</tt>] namespace represents the XHTML component set, just like the ZUL namespace ([http://www/ http://www.zkoss.org/2005/zul]) represents the ZUL component set. Thus, a XML element specified with the XHTML namespace simply denotes a component that shall be created based on the component definition from the XHTML component set. For example, the statement blow specifies a component that shall be created as an instance of the component definition called <tt>ul</tt>, and <tt>ul</tt> belongs to the XHTML component set:<br />
<br />
<source lang="xml" ><br />
<h:ul xmlns:h="[http://www.w3.org/1999/xhtml http://www.w3.org/1999/xhtml]"><br />
</source><br />
<br />
In other words, ZK loader will search the XHTML component set for the component definition called <tt>ul</tt> , and then create an instance based on it.<br />
<br />
The following is another yet more complete example.<br />
<br />
[[Image:html_1.png]] <br />
<source lang="xml" ><br />
<window title="mix HTML demo" xmlns:h="http://www.w3.org/1999/xhtml"><br />
<h:table border="1"><br />
<h:tr id="row1"><br />
<h:td>column 1</h:td><br />
<h:td><br />
<listbox id="list" mold="select"><br />
<listitem label="AA"/><br />
<listitem label="BB"/><br />
</listbox><br />
</h:td><br />
</h:tr><br />
</h:table><br />
<button label="add" onClick="row1.appendChild(new org.zkoss.zhtml.Td())"/><br />
</window><br />
</source><br />
<br />
Unlike the <tt>html</tt> components, where HTML tags are stored in the <tt>content</tt> property, ZK loader creates one component for each of them. The advantage is that you can manipulate each individual HTML tag dynamically, as depicted in the above example (the <tt>add</tt> button). The disadvantage is that they take longer to process and more space to maintain.<br />
<br />
'''Tip''': Unlike the XHTML namespace, the Native namespace doesn't represent another component set. It is a reserved namespace to tell ZK Loader to send them directly to the client for better performance.<br />
<br />
=== The include Component ===<br />
The <tt>include</tt> component is used to include the output generated by another servlet. The servlet could be anything including JSF, JSP and even another ZUML page.<br />
<br />
<source lang="xml" ><br />
<window title="include demo" border="normal" width="300px"><br />
Hello, World!<br />
<include src="/userguide/misc/includedHello.zul"/><br />
<include src="/html/frag.html"/><br />
</window><br />
</source><br />
<br />
Like all other properties, you could dynamically change the <tt>src</tt> attribute to include the output from a different servlet at the run time.<br />
<br />
If the included output is another ZUML, developers are allowed to access components in the included page as if they are part of the containing page.<br />
<br />
==== Pass Values to the Included Page ====<br />
There are two ways to pass values to the included page. First, you can pass them with the query string.<br />
<br />
<include src="mypage?some=something"/><br />
<br />
Then, in the included page, you can access them with the <tt>getParameter</tt> method of the <tt>Execution</tt> interface or the <tt>ServletRequest</tt> interface. In EL expressions (of the included page), you can use the <tt>param</tt> variable to access them. However, you can only pass String-typed values with the query string.<br />
<br />
${param.some}<br />
<br />
Alternatively, we can pass any kind of values with the so-called dynamic properties by use of the <tt>setDynamicProperty</tt> method or, in ZUL, a dynamic property as follows:<br />
<br />
<source lang="xml" ><br />
<include src="mypage" some="something" another="${expr}"/><br />
</source><br />
<br />
With the dynamic properties, you can pass non-String-typed values. In the included page, you can access them with the <tt>getAttribute</tt> method of the <tt>Execution</tt> interface or the <tt>ServletRequest</tt> interface. In EL expressions (of the included page), you can use the <tt>requestScope</tt> variable to access them.<br />
<br />
<source lang="xml" ><br />
${requestScope.some}<br />
</source><br />
<br />
==== Including ZUML Pages ====<br />
If the <tt>include</tt> component is used to include a ZUML page, the included page will become part of the desktop. However, the included page is not visible until the request is processed completely. In other words, it is visible only in the following events, triggered by user or timer.<br />
<br />
The reason is that the include component includes a page as late as the Rendering phase<ref>Refer to the '''Component Lifecycle''' chapter for more details.</ref>. On the other hand, zscript takes place at the Component Creation phase, and onCreate takes place at the Event Processing Phase. They both execute before the inclusion.<br />
<br />
<source lang="xml" ><br />
<window onCreate="desktop.getPages()"> <!-- the included page not available --><br />
<include src="/my.zul"/><br />
<zscript><br />
desktop.getPages(); //the included page not available yet<br />
</zscript><br />
<button label="Hit" onClick="desktop.getPages()"/><br />
<!-- Yes, the included page is available when onClick is received --><br />
</window><br />
</source><br />
<br />
If you want to look into the component of an included page, macro components are usually a better option. Refer to the '''Macro Components''' section in the '''ZK User Interface Markup Language''' chapter.<br />
<br />
'''Notes'''<br />
<references/><br />
<br />
=== The style Component ===<br />
The <tt>style</tt> component is used to specify CSS styles in a ZUML page. The simplest format is as follows.<br />
<br />
[[Image:html_2.png]]<br />
<source lang="xml" ><br />
<style><br />
.blue {<br />
color: white; background-color: blue;<br />
}<br />
</style><br />
<button label="OK" sclass="blue"/><br />
</source><br />
<br />
'''Tip''': To configure a style sheet for the whole application, specify <tt>theme-uri</tt> in zk.xml, refer to the '''Themes''' section in the '''Internationalization''' chapter, or '''Appendix B''' in '''the Developer's Reference''' for details. To configure a style sheet for a language, use the language addon, refer to '''the Component Development Guide'''.<br />
<br />
Sometimes it is better to store all CSS definitions in an independent file, say <tt>my.css</tt>. Then, we could reference it by use of the style component as follows.<br />
<br />
<source lang="xml" ><br />
<style src="/my.css"/><br />
</source><br />
<br />
The above statement actually sends the following HTML tags<ref>The real result depends on how your Web application is configured.</ref> to the browser, so the specified file must be accessible by the browser.<br />
<br />
<source lang="xml" ><br />
<link rel="stylesheet" href="/css/mystyles.css"/><br />
</source><br />
<br />
In other words, you cannot specify "<tt>/WEB-INF/xx</tt>" or "[/../xx/yy C:/xx/yy]".<br />
<br />
Like other URI, it accepts "*" for loading browser and Locale dependent style sheet. Refer to the '''Browser and Locale Dependent URI''' section in the '''Internationalization''' chapter for details.<br />
<br />
'''Notes'''<br />
<references/><br />
<br />
=== The script Component ===<br />
The <tt>script</tt> component is used to specify the script codes running at the browser. Notice that, unlike <tt>zscript</tt>, the script codes are running at the browser. They are usually written in JavaScript which is supported by the most of browsers. The simplest format is as follows.<br />
<br />
<source lang="xml" ><br />
<script type="text/javascript"><br />
function myfunc() {<br />
$e("${win.uuid}").style.backgroundColor = "blue";<br />
}<br />
</script><br />
</source><br />
<br />
As shown above, you can use EL expressions (<tt>${win.uuid}</tt>) in script codes.<br />
<br />
Of course, you can reference to an external JavaScript file with the <tt>src</tt> property as follows.<br />
<br />
<source lang="xml" ><br />
<script src="/js/super.js" type="text/javascript"/><br />
</source><br />
<br />
With ZK, developers rarely need to specify JavaScript codes to execute, since the ZK applications are running at the server (and execute in your favorite language). They are usually to customize the behavior of ZK Client Engine, or to run the legacy JavaScript libraries.<br />
<br />
=== The iframe Component ===<br />
The <tt>iframe</tt> component uses the HTML IFRAME tag to delegate a portion of the display to another URL. Though the appearance looks similar to the <tt>include</tt> component. The concept and meaning of the <tt>iframe</tt> component is different.<br />
<br />
The content included by the <tt>include</tt> component is a fragment of the whole HTML page. Because the content is part of the HTML page, the content is part of the desktop and you could access any components, if any, inside of the <tt>include</tt> component. The inclusion is done at the server, and the browser knows nothing about it. It means the URL specified by the <tt>src</tt> property could be any internal resource.<br />
<br />
The content of the <tt>iframe</tt> component is loaded by the browser as a separate page. Because it is loaded as a separate page, the format of the content could be different from HTML. For example, you could embed an PDF file.<br />
<br />
<source lang="xml" ><br />
<iframe src="/my.pdf"/><br />
...other HTML content<br />
</source><br />
<br />
'''Tip''': By default, there is no border. To enable it, use the style attribute to specify it. For example,<tt><iframe style="border:1px inset" src="http://www.zkoss.org"/></tt><br />
<br />
The ''embedding'' is done by the browser, when it interprets the HTML page containing the IFRAME tag. It also implies that the URL must be a resource that you can access from the browser.<br />
<br />
Like the <tt>image</tt> and <tt>audio</tt> components<ref>In many ways, <tt>iframe</tt> is much similar to <tt>image</tt> and <tt>audio</tt>. You might consider it as a component for arbitrary content.</ref>, you could specify the dynamically generated content. A typical example is you could use JasperReport<ref>http://jasperreports.sourceforge.net</ref> to generate a PDF report in a binary array or stream, and then pass the report to an <tt>iframe</tt> component by wrapping the result with the <tt>org.zkoss.util.media.AMedia</tt> class.<br />
<br />
In the following example, we illustrate that you could embed any content by use of <tt>iframe</tt>, as long as the client supports its format.<br />
<br />
<source lang="xml" ><br />
<window title="iframe demo" border="normal"><br />
<iframe id="iframe" width="95%"/><br />
<separator bar="true"/><br />
<button label="Upload"><br />
<attribute name="onClick">{<br />
Object media = Fileupload.get();<br />
if (media != null)<br />
iframe.setContent(media);<br />
}</attribute><br />
</button><br />
</window><br />
</source><br />
<br />
{| border="1px"<br />
| [[Image:html_3.png]]<br />
| This picture depicted the appearance after user uploaded an Microsoft PowerPoint file.<br />
<br />
|}<br />
'''Notes'''<br />
<references/><br />
<br />
<br />
==== The onURIChange Event ====<br />
When the user navigates the <tt>iframe</tt> component to another URL (or bookmark), an object of the <tt>org.zkoss.zk.ui.event.URIEvent</tt> class is sent to the <tt>iframe</tt> component. This event is usually used to bookmark the status of the <tt>iframe</tt> component, such that the right content can be restored later.<br />
<br />
==== Integrate with Other Technologies ====<br />
The <tt>onURIChange</tt> event won't be sent if the <tt>iframe</tt> component contains a non-ZK page. For example, it won't be sent if it contains a PDF page.<br />
<br />
On the other hand, if you use other technologies to put a ZK page in an iframe, you can monitor the URL by writing a JavaScript method called <tt>onIframeChange</tt> as follows.<br />
<br />
<source lang="java" ><br />
//Part of your, say, PHP page<br />
<script type="text/script"><br />
function onIframeChange(uuid, url) {<br />
do_whatever_you_need_in_the_technology_you_use(uuid, url);<br />
}<br />
</script><br />
</source><br />
<br />
where <tt>uuid</tt> is the ID of the element that you can retrieve by <tt>document.getElementById</tt>, and <tt>url </tt>is the new URL that the iframe is navigated to. Notice that <tt>url</tt> includes the context path, while <tt>URIEvent.getURI()</tt> does ''not''.<br />
<br />
==== Retrieving component inside an iframe ====<br />
<br />
When using <tt>iframe</tt>, it's actually another browser, another desktop.<br />
<br />
If you want to retrieve component inside an <tt>iframe</tt>, you may use <include> instead of <iframe>. Or you have to deliberately pass the information through session.<ref>[http://www.zkoss.org/forum/index.zul#path%3DlistComment%3BdiscussionId%3D6793%3BcommetId%3D25787%3BcategoryId%3D14%3B Please refer to this thread of zk forum ]</ref><br />
<br />
'''Notes'''<br />
<references/><br />
<br />
{{ ZKDevelopersGuidePageFooter}}</div>Char