最も簡単な方法は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タグを生成することが必要なら、次のセクションで説明するようにネイティブ ネームスペースを使用します。