The XHTML Component Set
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
XHTML component supports HTML5 tag attributes, and these attributes could be accessed by MVVM. About MVVM, please refer to the MVVM document.
Because Components are instantiated for XML elements specified with the XHTML namespace, you could update its content dynamically on the server. For example, we could allow users to click a button to add a column as shown below.
<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 on the server. Notice that you still can handle them dynamically at the client.
However, when a XHTML component are used, a component running on 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('<td></td>')" xmlns:w="client"/> </window>
ID and UUID
Unlike other components, if you assign ID to a XHTML component, its UUID (Component.getUuid()) is changed accordingly. It means you cannot have two XHTML components with the same ID, no matter if they are in different ID spaces.
As described in ZUML, the XHTML component set is associated with zhtml, xhtml, html and htm. It means you could name a ZUML page as foo.zhtml if you map
*.zhtml to ZK Loader. However, when this kind of file is interpreted, ZK Loader assumes it will have its own HTML, HEAD, BODY tags. On the other hand, these tags are generated automatically if the filename extension is
For example, suppose we have a file called foo.zhtml, then the content might look as follows.
<?link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"?> <html xmlns:zk="zk" xmlns:z="zul"> <head> <title>ZHTML Demo</title> <zkhead/><!-- a special tag to indicate where to generate ZK CSS and JS files --> </head> <body style="height:auto"> <h1>ZHTML Demo</h1> <ul id="ul"> <li>The first item.</li> <li id="li2" zk:onClick='self.setId("li2".equals(self.getId()) ? "":"li2")'>Click me to change Id.</li> </ul> </body> </html>
- Since the extension is
zhtml, the default namespace is XHTML. Thus, we have to specify the zk and zul namespace explicitly.
- Notice that we have to specify the zk namespace too, because XHTML will cause ZK Loader to consider any unrecognized element as native HTML tag.
- We have to specify HTML, HEAD and BODY to make it a valid HTML document.
- By default, BODY's CSS is
width:100%;height:100%. However, it is appropriate for Web-look page For Web-look, we could specify
height:autoto reset it back to the browser's default.
height:100%is more for desktop-application-look, such as using with <javadoc>org.zkoss.zul.Borderlayout.