The XHTML Component Set

From Documentation


The XHTML Component Set


Overview

Like ZUL, the XHTML component set is a collection of components. Unlike ZUL, which is designed to have rich features, each XHTML component represents a HTML tag. For example, the following XML element will cause ZK Loader to create a component called Ul

<h:ul xmlns:h="xhtml">

Dynamic Update

Because Components are instantiated for XML elements specified with the XHTML namespace, you could update its content dynamically at the server. For example, we could allow users to click a button to add a column as shown below.

Html 1.png

 <window title="mix HTML demo" xmlns:h="xhtml">
     <h:table border="1">
         <h:tr id="row1">
             <h:td>column 1</h:td>
             <h:td>
                 <listbox id="list" mold="select">
                     <listitem label="AA"/>
                     <listitem label="BB"/>
                 </listbox>
             </h:td>
         </h:tr>
     </h:table>
     <button label="add" onClick="row1.appendChild(new org.zkoss.zhtml.Td())"/>
 </window>

On the other hand, the native namespace will cause native HTML tags being generated. It means you can not modify the content dynamically at the server. Notice that you still can handle them dynamically at the client.

However, when a XHTML component are used, a component running at the server has to be maintained. Thus, you should use the XHTML component set only if there is no better way for doing it.

For example, we could rewrite the previous sample with the native namespace and some client-side code as follows.

<window title="mix HTML demo" xmlns:n="native">
     <n:table border="1">
         <n:tr id="row1">
             <n:td>column 1</n:td>
             <n:td>
                 <listbox id="list" mold="select">
                     <listitem label="AA"/>
                     <listitem label="BB"/>
                 </listbox>
             </n:td>
         </n:tr>
     </n:table>
     <button label="add" w:onClick="jq('#row1').append('&lt;td>&lt;/td>')" xmlns:w="client"/>
 </window>

Version History

Last Update : 2010/11/11

Version Date Content
     



Last Update : 2010/11/11

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