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,
<n:ul xmlns:n="http://www.zkoss.org/2005/zk/native">
<n:li>
<textbox/>
</n:li>
<n:li>
<textbox/>
</n:li>
</n:ul>
will generate the following HTML tags to the browser:
<ul>
<li>
<input id="z_a3_2"/>
</li>
<li>
<input id="z_a3_5"/>
</li>
</ul
where <input> is the HTML tag(s) generated by the textbox component. Unlike textbox in the example above, ZK Loader doesn't really create a component for each of ul and li.[44] 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.
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 x.
<n:ul id="x" xmlns:n="http://www.zkoss.org/2005/zk/native"/> <button label="add" onClick="new Li().setParent(x)"/>
If you want to change them dynamically, you can specify the XHTML namespace as described in the following section.
If you want to generate another namespace to the output, you can use another format as the URI of the Native namespace:
native:URI-of-another-namespace
For example, if you want to output the SVG tags directly to the client, you can specify native:native:http://www.w3.org/2000/svg as follows.
<window>
<svg width="100%" height="100%" version="1.1"
xmlns="native:http://www.w3.org/2000/svg">
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple"/>
</svg>
</window>
Then, the client will receive the following:
<div id="z_lx_0c" z.type="zul.wnd.Wnd">45The real HTML output of window depends on its implementation. Here is only a simplified version.
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple"/>
</svg>
</div>
[44] ZK ZK actually creates a special component to represent as many XML elements with the Native namespace as possible.