The html Component

From Documentation
Revision as of 10:49, 10 November 2010 by Tomyeh (talk | contribs) (Created page with '{{ZKDevelopersReferencePageHeader}} The simplest way is to use a XUL component called <tt>html</tt><ref>The text within the <tt>html</tt> element is actually assigned to the <tt…')
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)



The simplest way is to use a XUL component called html[1] 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[2]. Notice you can use EL expressions in it.

 <window border="normal" 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).

Tip: You can use the attribute element to specify the XHTML fragment instead of CDATA as follows.

 <window border="normal" title="Html Demo">
     <html>
	<attribute name="content">
		<h4>Hi, ${parent.title}</h4>
		<p>It is the content of the html component.</p>
	</attribute>
     </html>
 </window>

Refer to the attribute Element section in the ZK User Interface Markup Language chapter..

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.

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

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

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

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.


  1. The text within the html element is actually assigned to the html component's content property (rather than becoming a label child).
  2. Refer to the XML section in the ZK User Interface Markup Language chapter if you are not familiar with XML.

Version History

Last Update : 2010/11/10

Version Date Content
     



Last Update : 2010/11/10

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