The html Component"
(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…') |
m |
||
Line 1: | Line 1: | ||
{{ZKDevelopersReferencePageHeader}} | {{ZKDevelopersReferencePageHeader}} | ||
− | + | =Overview= | |
+ | One of the simplest ways is to use a XUL component called <javadoc>org.zkoss.zul.Html</javadoc> 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> | ||
− | |||
− | |||
− | + | 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. | ||
− | < | + | <blockquote> |
− | + | ---- | |
− | + | <references/> | |
− | + | </blockquote> | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | The <tt>html</tt> component | + | =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 Is 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> | ||
− | + | 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 | + | 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. |
− | |||
− | |||
− | |||
− | |||
− | |||
=Version History= | =Version History= |
Revision as of 11:05, 10 November 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.
- ↑ 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 Is 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("Hi, Update")" />
</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/11/10
Version | Date | Content |
---|---|---|