The html Component"

From Documentation
(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…')
 
(3 intermediate revisions by one other user not shown)
Line 1: Line 1:
 
{{ZKDevelopersReferencePageHeader}}
 
{{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>html</tt> component's <tt>content</tt> property (rather than becoming a label child).</ref> 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 <tt><![CDATA[</tt> and <tt>]]></tt>. In other words, they are not the child component. Rather, they are stored in the <tt>content</tt> property<ref>Refer to the '''XML''' section in the [http://books.zkoss.org/wiki/ZK_ZUML_Reference/The_ZK_User_Interface_Markup_Language '''ZK User Interface Markup Language'''] chapter if you are not familiar with XML.</ref>. Notice you can use EL expressions in it.
+
=Overview=
 +
One of the simplest ways is to use a XUL component called [[ZK Component Reference/Essential Components/Html|html]] to embed whatever HTML tags you want. The html component works like an HTML SPAN tag enclosing the HTML fragment. For example,
  
 
<source lang="xml" >
 
<source lang="xml" >
Line 11: Line 12:
 
  </window>
 
  </window>
 
</source>
 
</source>
 
where <tt><nowiki><h4>...</p></nowiki></tt> will become the content of the <tt>html</tt> element (see also the <tt>getContent</tt> method of the <tt>org.zkoss.zul.Html</tt> class).
 
  
'''Tip''': You can use the attribute element to specify the XHTML fragment instead of <tt>CDATA</tt> as follows.
+
As shown above, we enclose them with <tt><![CDATA[</tt> and <tt>]]></tt> to prevent ZK Loader from interpreting the HTML tags embedded in the html element. In other words, they are not the child component. Rather, they are stored in the <tt>content</tt> property (by use of <javadoc method="setContent(java.lang.String)">org.zkoss.zul.Html</javadoc><ref>Fore more information please refer to [[ZUML Reference/ZUML/Texts|ZUML Reference]].</ref>. In other words, <tt><nowiki><h4>...</p></nowiki></tt> will become the content of the <tt>html</tt> element.
 +
 
 +
Also notice that EL expressions are allowed.
  
<source lang="xml" >
+
<blockquote>
<window border="normal" title="Html Demo">
+
----
    <html>
+
<references/>
<attribute name="content">
+
</blockquote>
<h4>Hi, ${parent.title}</h4>
 
<p>It is the content of the html component.</p>
 
</attribute>
 
    </html>
 
</window>
 
</source>
 
 
Refer to the <tt>'''attribute</tt> Element''' section in the ZK User Interface Markup Language chapter..
 
  
The <tt>html</tt> component generates the HTML <tt>SPAN</tt> tag to enclose the content. In other words, it generates the following HTML tags when rendered to the browser.
+
=What Are Generated=
 +
The <tt>html</tt> component will eventually generate the HTML SPAN tag to enclose the content when attached to the browser's DOM tree. In other words, it generates the following HTML tags when attached to the browser's DOM tree.
  
 
<source lang="xml" >
 
<source lang="xml" >
Line 38: Line 32:
 
</source>
 
</source>
 
   
 
   
 +
=It's a Component=
 
The <tt>html</tt> component is no different to other XUL components. For example, you specify the CSS style and change its content dynamically.
 
The <tt>html</tt> component is no different to other XUL components. For example, you specify the CSS style and change its content dynamically.
  
Line 53: Line 48:
 
</source>
 
</source>
 
   
 
   
Notice that, since <tt>SPAN</tt> is used to enclose the embedded HTML tags, the following code snippet is incorrect.
+
You can change its content dynamically.
 +
 
 +
<source lang="java">
 +
htm.setContent("<ul><li>New content</li></ul>");
 +
</source>
 +
 
 +
=Limitation=
 +
Since <tt>SPAN</tt> is used to enclose the embedded HTML tags, the following code snippet is incorrect.
  
 
<source lang="xml" >
 
<source lang="xml" >
Line 62: Line 64:
 
]]>
 
]]>
 
</html>
 
</html>
 +
 
<textbox />
 
<textbox />
 +
 
<html><![CDATA[
 
<html><![CDATA[
 
        </li>
 
        </li>
Line 71: Line 75:
 
</source>
 
</source>
 
   
 
   
If you need to generate the embedded HTML tags directly without the enclosing <tt>SPAN</tt> tag, you can use the Native namespace as described in the following section.
+
If you need to generate the embedded HTML tags directly without the enclosing <tt>SPAN</tt> tag, you can use the xhtml component set or the native namespace as described in the following section.
 
 
<blockquote>
 
----
 
<references/>
 
</blockquote>
 
  
 
=Version History=
 
=Version History=
Last Update : {{REVISIONYEAR}}/{{REVISIONMONTH}}/{{REVISIONDAY}}
+
{{LastUpdated}}
 
{| border='1px' | width="100%"
 
{| border='1px' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content

Revision as of 08:22, 17 December 2010



Overview

One of the simplest ways is to use a XUL component called html to embed whatever HTML tags you want. The html component works like an HTML SPAN tag enclosing the HTML fragment. For example,

 <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>

As shown above, we enclose them with <![CDATA[ and ]]> to prevent ZK Loader from interpreting the HTML tags embedded in the html element. In other words, they are not the child component. Rather, they are stored in the content property (by use of Html.setContent(String)[1]. In other words, <h4>...</p> will become the content of the html element.

Also notice that EL expressions are allowed.


  1. Fore more information please refer to ZUML Reference.

What Are Generated

The html component will eventually generate the HTML SPAN tag to enclose the content when attached to the browser's DOM tree. In other words, it generates the following HTML tags when attached to the browser's DOM tree.

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

It's a Component

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>

You can change its content dynamically.

htm.setContent("<ul><li>New content</li></ul>");

Limitation

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 xhtml component set or the native namespace as described in the following section.

Version History

Last Update : 2010/12/17


Version Date Content
     



Last Update : 2010/12/17

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