最も簡単な方法はhtml [43]と呼ばれるXULコンポーネントを使います。htmlはブラウザに直接送るHTMLタグなら何でも埋め込むことができます。
ZKにてHTMLタグをインタープリットしないようにするため、<![CDATA[ と ]]>で閉じます。つまり、子コンポーネントではなく、contentプロパティ[44]の中に保存されます。その中ではEL表記を使用することができます。
<window title="Html Demo">
<html><![CDATA[
<h4>Hi, ${parent.title}</h4>
<p>It is the content of the html component.</p>
]]></html>
</window>
ここで、 <h4>...</p> は html コンテンツとなります。( org.zkoss.zul.Html クラスの getContent メソッドも見てくた゜さい。)
ヒント: 次のように、属性要素を使用して、XHTML フラグメントを CDATA の代わりに指定することができます。
<html> <attribute name="content"> <h4>Hi, ${parent.title}</h4> <p>It is the content of the html component.</p>
</attribute></html>
ユーザーインターフェース マークアップ言語の章の属性要素 セクションを参照してください。
html コンポーネントは HTML SPAN タグを生成して、コンテンツを囲みます。言い換えれば、ブラウザに送られるときは、次の HTML タグとして生成します。
<span id="z_4a_3">
<h4>Hi, Html Demo</h4>
<p>It is the content of the html component.</p>
</span>
html コンポーネントは他の XUL コンポーネントと何も変わりません。例えば、CSSスタイルを指定でき、コンテンツを動的に変更できます。
<html id="h" style="border: 1px solid blue;background: yellow"><![CDATA[
<ul>
<li>Native browser content</li>
</ul>
]]></html>
<button label="change" onClick="l.setContent("Hi, Update")"/>
SPANは埋め込まれたHTMLタグを囲むために使われることに注目してください。以下のステートメントは正しくないです。
<html><![CDATA[
<ul>
<li> <!-- incorrect since <ul><li> is inside <span> -->
]]></html>
<textbox/>
<html><![CDATA[
</li>
</ul>
]]</html>
SPANタグを使用して囲まれることなく、直接に埋め込みHTMLタグを生成することが必要なら、次のセクションで説明するようにネイティブ ネームスペースを使用します。