The html Component

The html Component
Prev	Work with HTML Tags	Next

The simplest way is to use a XUL component called html^[42] 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 <![CDATA[ and ]]>. In other words, they are not the child component. Rather, they are stored in the content property^[43]. Notice you can use EL expressions in it.

<window title="Html Demo">
    <html><![CDATA[    
        <h4>Hi, ${parent.title}</h4>        
        <p>It is the content of the html component.</p>        
    ]]></html>    
</window>

where <h4>...</p> will become the content of the html element (see also the getContent method of the org.zkoss.zul.Html class).

The html component generates the HTML SPAN tag to enclose the content. In other words, it generates the following HTML tags when rendered to the browser.

<span id="z_4a_3">
    <h4>Hi, Html Demo</h4>    
    <p>It is the content of the html component.</p>    
</span>

The html component is no different to other XUL components. For example, you specify the CSS style and change its content dynamically.

<html id="h" style="border: 1px solid blue;background: yellow"><![CDATA[
    <ul>    
        <li>Native browser content</li>        
    </ul>    
]]></html>
<button label="change" onClick="l.setContent(&quot;Hi, Update&quot;)"/>

Notice that, since SPAN is used to enclose the embedded HTML tags, the following code snippet is incorrect.

<html><![CDATA[
    <ul>    
        <li> <!-- incorrect since <ul><li> is inside <span> -->        
]]></html>

<textbox/>

<html><![CDATA[
        </li>        
    </ul>    
]]</html>

If you need to generate the embedded HTML tags directly without the enclosing SPAN tag, you can use the Native namespace as described in the following section.

^[42]The text within the html element is actually assigned to the html component's content property (rather than becoming a label child).

^[43]Refer to the XML section in the ZK User Interface Markup Language chapter if you are not familiar with XML.