The html Component"

From Documentation
m (replace tt with code (via JWB))
(2 intermediate revisions by 2 users not shown)
Line 13: Line 13:
 
</source>
 
</source>
  
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.
+
As shown above, we enclose them with <code><![CDATA[</code> and <code>]]></code> 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 <code>content</code> 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, <code><nowiki><h4>...</p></nowiki></code> will become the content of the <code>html</code> element.
  
 
Also notice that EL expressions are allowed.
 
Also notice that EL expressions are allowed.
Line 23: Line 23:
  
 
=What Are Generated=
 
=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.
+
The <code>html</code> 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 33: Line 33:
 
   
 
   
 
=It's a Component=
 
=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 <code>html</code> component is no different to other XUL components. For example, you specify the CSS style and change its content dynamically.
  
 
<source lang="xml" >
 
<source lang="xml" >
Line 55: Line 55:
  
 
=Limitation=
 
=Limitation=
Since <tt>SPAN</tt> is used to enclose the embedded HTML tags, the following code snippet is incorrect.
+
Since <code>SPAN</code> is used to enclose the embedded HTML tags, the following code snippet is incorrect.
  
 
<source lang="xml" >
 
<source lang="xml" >
Line 75: 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 xhtml component set or the native namespace as described in the following section.
+
If you need to generate the embedded HTML tags directly without the enclosing <code>SPAN</code> tag, you can use the xhtml component set or the native namespace as described in the following section.
  
 
=Version History=
 
=Version History=
Last Update : {{REVISIONYEAR}}/{{REVISIONMONTH}}/{{REVISIONDAY}}
+
{{LastUpdated}}
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-

Revision as of 14:15, 12 January 2022



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 : 2022/01/12


Version Date Content
     



Last Update : 2022/01/12

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