Html"

From Documentation
(12 intermediate revisions by 7 users not shown)
Line 1: Line 1:
 
{{ZKComponentReferencePageHeader}}
 
{{ZKComponentReferencePageHeader}}
  
= HTML =
+
= Html =
  
*Demonstration: N/A
+
*Demonstration: [http://www.zkoss.org/zkdemo/composite/html_element Html]
 
*Java API: <javadoc>org.zkoss.zul.Html</javadoc>
 
*Java API: <javadoc>org.zkoss.zul.Html</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.wgt.Html</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.wgt.Html</javadoc>
 +
*Style Guide: N/A
  
 
= Employment/Purpose =
 
= Employment/Purpose =
  
The simplest way is to use a XUL component called <tt>html </tt>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. Notice you can use EL expressions in it.
+
The simplest way is to use an XUL component called <tt>html </tt>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. Notice you can use EL expressions in it.
  
 
= Example =
 
= Example =
Line 16: Line 17:
  
 
<source lang="xml" >
 
<source lang="xml" >
  <window id="win" title="Html Demo">
+
  <window id="win" title="Html Demo" border="normal">
 
     <html><![CDATA[
 
     <html><![CDATA[
 
         <h4>Hi, ${win.title}</h4>
 
         <h4>Hi, ${win.title}</h4>
Line 35: Line 36:
 
</source>
 
</source>
  
=Supported events=
+
= Size issue =
 +
On Chrome, if <code><html></code>'s sibling use <code>vflex</code> to set hight flexibly, developer must override <code>.z-html</code> CSS like this:
 +
<source lang="css">
 +
.z-html {
 +
display:block;
 +
}
 +
</source>
 +
or
 +
<source lang="css">
 +
.z-html {
 +
display: inline-block;
 +
}
 +
</source>
 +
Without this setting, <code>offsetHeight</code> of <code><html></code> will be zero, and sibling's height will be wrong.
 +
 
 +
=Supported Events=
  
 
{| border="1" | width="100%"
 
{| border="1" | width="100%"
Line 44: Line 60:
 
| None
 
| None
 
|}
 
|}
 +
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]]
  
 
=Supported Children=
 
=Supported Children=
  
  *ALL
+
  *None
  
=Use cases=
+
=Use Cases=
  
 
{| border='1px' | width="100%"
 
{| border='1px' | width="100%"
 
! Version !! Description !! Example Location
 
! Version !! Description !! Example Location
 
|-
 
|-
| 5.0+
+
| 3.6
| &nbsp;
+
| Work with HTML tags: The Html component
| &nbsp;
+
| [[ZK_Developer%27s_Reference/UI_Patterns/HTML_Tags/The_html_Component|The Html component]]
 +
|-
 +
| 3.6
 +
| herf attribute in Html component
 +
| [http://www.zkoss.org/forum/listComment/4745 http://www.zkoss.org/forum/listComment/4745]
 +
|-
 +
| 3.6
 +
| Use Html component to escape HTML characters
 +
| [http://www.zkoss.org/forum/listComment/11118 http://www.zkoss.org/forum/listComment/11118]
 
|}
 
|}
  
 
=Version History=
 
=Version History=
 
+
{{LastUpdated}}
 
{| border='1px' | width="100%"
 
{| border='1px' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-
| 5.0.1
+
| &nbsp;
| 4/27/2010
+
| &nbsp;
| Initialization
+
| &nbsp;
 
|}
 
|}
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Revision as of 04:54, 4 September 2012

Html

  • Demonstration: Html
  • Java API: Html
  • JavaScript API: Html
  • Style Guide: N/A

Employment/Purpose

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

Example

ZKComRef Html.png

 <window id="win" title="Html Demo" border="normal">
     <html><![CDATA[
         <h4>Hi, ${win.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=”...”>
     <h4>Hi, Html Demo</h4>
     <p>It is the content of the html component.</p>
 </span>

Size issue

On Chrome, if <html>'s sibling use vflex to set hight flexibly, developer must override .z-html CSS like this:

.z-html {
	display:block;
}

or

.z-html {
	display: inline-block;
}

Without this setting, offsetHeight of <html> will be zero, and sibling's height will be wrong.

Supported Events

Name
Event Type
None None

Supported Children

*None

Use Cases

Version Description Example Location
3.6 Work with HTML tags: The Html component The Html component
3.6 herf attribute in Html component http://www.zkoss.org/forum/listComment/4745
3.6 Use Html component to escape HTML characters http://www.zkoss.org/forum/listComment/11118

Version History

Last Update : 2012/09/04


Version Date Content
     



Last Update : 2012/09/04

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