The Differences
This documentation is for an older version of ZK. For the latest one, please click here.
Besides being ZK components, the implementation of the XHTML component set has some differences from other component sets[1], such that it would be easier to port traditional XHTML pages to ZK.
Notes
- ↑ These differences are made by implementing particular interfaces, so you could apply similar effects to your own components if you like.
A Component Created for Each Tag
ZK Loaders creates a ZK component for Each tag declared in a ZUML page. For example, there are four components are created for the following ZUML page (html, body, p and a label).
<html>
<body>
<p>Hi</p>
</body>
</html>
The advantage is that you can change the content of any component dynamically:
<p id="info">Hi</p>
<z:button onClick="info.detach()" xmlns:z="http://www.zkoss.org/2005/zk"/>
However, it takes more time to process and memory to hold these components, so, if a portion of the page is static, you can use the Native namespace as follows.
<n:html xmlns:n="http://www.zkoss.org/2005/zk/native">
<n:body>
<p id="info">Hi</p>
<z:button onClick="info.detach()" xmlns:z="http://www.zkoss.org/2005/zk"/>
</n:body>
</n:html>
Refer to the Performance Tips chapter for more information.
UUID Is ID
Traditional servlets and JavaScript codes usually depend on the id attribute, so UUID of XHTML components are made to be the same as ID. Therefore, developers need not to change their existent codes to adapt ZK, as shown below.
<img id="which"/>
<script type="text/javascript"><![CDATA[
//JavaScript and running at the browser
function change() {
var el = document.getElementById("which");
el.src = "something.gif";
}
]]></script>
<zscript><!-- Java and running at the server -->
void change() {
which.src = "another.gif";
}
</zscript>
Notice that UUID is immutable and nothing to do with ID for components other than XHTML. Thus, the above example will fail if XUL components are used. If you really want to reference a XUL component in JavaScript, you have to use EL expression to get the correct UUID.
<input id="which"/>
<script type="text/javascript">//Running at the browser
var el = document.getElementById("${which.uuid}");
el = $e("${which.uuid}"); //$e() is an utility of ZK Client Engine
</script>
Side Effects
Since UUID is ID, you cannot use the same ID for any two components in the same desktop.
All Tags Are Valid
Unlike XUL or other component sets, there is no invalid XML element in the XHTML component set. ZK uses the org.zkoss.zhtml.Raw class for constructing any unrecognized XML element[1]. Therefore, developers could use any tags that the target browser supports, no matter whether they are implemented as ZK components.
Similarly, you could use the Raw component to create any component not defined in the XHTML component set as follows.
new Raw("object"); //object could be any tag name the target browser supports
Notes
- ↑ Note: this is done by implementing the DynamicTag interface.
Case Insensitive
Unlike XUL or other component sets, the component name of XHTML is case-insensitive. The following XML elements are all mapped to the org.zkoss.zhtml.Br component.
<br/>
<BR/>
<bR/>
No Mold Support
XHTML components outputs its content directly. They don't support molds. In other words, the mold property is ignored.