Home   Single Page

htmlコンポーネント

最も簡単な方法は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(&quot;Hi, Update&quot;)"/>

SPANは埋め込まれたHTMLタグを囲むために使われることに注目してください。以下のステートメントは正しくないです。

<html><![CDATA[
    <ul>    
        <li> <!-- incorrect since <ul><li> is inside <span> -->        
]]></html>

<textbox/>

<html><![CDATA[
        </li>        
    </ul>    
]]</html>

SPANタグを使用して囲まれることなく、直接に埋め込みHTMLタグを生成することが必要なら、次のセクションで説明するようにネイティブ ネームスペースを使用します。



[43] html 要素内のテキストは実際に html コンポーネントのコンテンツ プロパティにアサインされます。(子ラベルになるよりも)

[44] XML について馴染みがないなら、ZK ユーザーインターフェースマークアップ言語の章の XML セクションを参照してください。