コレクションを UI コンポーネントと関連付けると、データバィンディングマネージャーがコレクションを UI コンポーネントに対応した変換が行われ、非常に便利です。
データソースであるコレクションを準備します。
コレクションを model 属性(model 属性をサポートする UI コンポーネントは Listbox,Grid や Tree などです。)と関連づけます。
UI コンポーネントのテンプレートを定義します。
コレクション内の各インスタンスを表す好みの変数と、self 属性を定義します。
<component-name self="@{each='variable-name'}"/>
variable-name は component-name とその子供のコンポーネントからのみ見えます。
UI コンポーネントをその変数と関連付けます。
<component-name attribute-name="@{variable-name.attribute-name}"/>
以下のサンプルでは、コレクションと Lisrbox を関連付けて、persons のリストを表示する方法をデモをします。
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>
<window width="500px">
<zscript>
//prepare the example persons List
int count = 30;
List persons = new ArrayList();
for(int j= 0; j < count; ++j) {
Person personx = new Person();
personx.setFirstName("Tom"+j);
personx.setLastName("Hanks"+j);
persons.add(personx);
}
</zscript>
<listbox rows="4" model="@{persons}">
<listhead>
<listheader label="First Name" width="100px"/>
<listheader label="Last Name" width="100px"/>
<listheader label="Full Name" width="100px"/>
</listhead>
<listitem self="@{each='person'}">
<listcell>
<textbox value="@{person.firstName}"/>
</listcell>
<listcell>
<textbox value="@{person.lastName}"/>
</listcell>
<listcell label="@{person.fullName}"/>
</listitem>
</listbox>
</window>