Home   Single Page

component コマンド

<?component name="myName" macroURI="/mypath/my.zul" [apply="composer"] [prop1="value1"] [prop2="value2"]...?>

<?component name="myName" [class="myPackage.myClass"] [extends="existentName"] [moldName="myMoldName"] [moldURI="/myMoldURI"] [apply="composer"] [prop1="value1"] [prop2="value2"]...?>

特定のページに新しいコンポーネントを定義します。このコマンドの中で定義されたコンポーネントはこのコマンドを使っているページだけに参照可能です。どのページ中でも、使うことができるコンポーネントを定義するため、拡張機能(ウェブアプリケーションですべてのページのコンポーネントを定義する XMLファイル)を使います。[36]

マクロによるものとクラスによるものの二つのフォーマットがあります。

マクロフォーマット

<?component name="myName" macroURI="/mypath/my.zul" [inline="true|false"] [class="myPackage.myClass"] [prop1="value1"] [prop2="value2"]...?>

ZUMLページを基にした新しいコンポーネントを定義します。マクロコンポーネントと呼びます。つまり、新しいコンポーネントのインスタンスが作られると、ZUMLページ(macro-uri属性)を基にした子コンポーネントが作られます。より詳しくは、マクロコンポーネント章を参照してください。

クラスフォーマット

<?component name="myName" [class="myPackage.myClass"] [extends="existentName"] [moldName="myMoldName"] [moldURI="/myMoldURI"] [apply="composer"] [prop1="value1"] [prop2="value2"]...?>

extends属性が指定されず、クラスに基づいている場合作られた新しいコンポーネントをnative componentと呼びます。クラスはorg.zkoss.zk.ui.Componentインターフェースを実装しなければなりません。

新しいコンポーネントを定義するため、class属性を必ず拡張しなければなりません。そのクラス属性はZKによって使用され、コンポーネントの新しいインスタンスを提供します。

新しいコンポーネントを定義するほか、extends=”existentName”を指定することで存在しているコンポーネントのプロパティを上書きできます。つまり、extendsが指定されると、指定されたコンポーネントの定義はデフォルトとして呼び出されて、このコマンドの中で定義されているプロパティのみを上書きします。

例えば、Mywindowをデフォルトのウィンドウ(ZUMLページ中のorg.zkoss.zul.Window) の代わりに使用し、mywindowと呼ばれる新しいコンポーネントを定義することを想定します。そうして、以下のように宣言することができます。

<?component name="mywindow" extends="window" class="MyWindow"?>
...
<mywindow>
...
</mywindow>

上は以下に書かれているコードと同じ働きをします。

<window use="MyWindow">
...
</window>

同様にして、以下の定義を使い、OKをデフォルトのラベルとして使用し、青い枠をこのページの中の指定されたすべてのボタンに使います。

<?component name="okbutton" extends="button" label="OK"
style="border:1px solid blue"?>

新しいコンポーネントの名前は存在している名前と同じに設定できます。この場合、コンポーネントの指定された種類のインスタンスは存在した定義を隠すよう に指定した初期プロパティを使います。例えば、以下のコードはデフォルトですべてのボタンに青い枠を持つようにさせています。

<?button name="button" extends="button" style="border:1px solid blue"?>
<button/> <!-- with blue border -->

詳しくは Developer's Referenceをご覧ください。



[36] 言語拡張については the Component Development Guideをご覧ください。