同一のデータソースを複数の UI コンポーネントに関連付けできます。データソースが変更されたとき、関連する UI コンポーネントはデータバィンディングマネージャーによって自動的に更新できます。

以下のサンプルでは、ZUML アノテーション表現を使用してデータソースである Person インスタンスの "selected" オブジェクトを Listbox や Grid などの複数の UI コンポーネントに関連付けます。 ユーザーが Listbox の Item を選択すると、Grid は選択された person に対応するの情報を表示します。

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>

<window width="500px">
<zscript>
    //prepare the example person     
Person selected = new Person();
</zscript>

<listbox rows="4" selectedItem="@{selected}">
<listhead>
<listheader label="First Name" width="100px"/>
        <listheader label="Last Name" width="100px"/>        
<listheader label="Full Name" width="100px"/>
</listhead>
<listitem>
<listcell label="George"/>
<listcell label="Bush"/>
</listitem>
<listitem>
<listcell label="Bill"/>
<listcell label="Gates"/>
</listitem>
</listbox>
<!-- show the detail of the selected person -->
<grid>
<rows>
<row>First Name: <textbox value="@{selected.firstName}"/></row>
<row>Last Name: <textbox value="@{selected.lastName}"/></row>
</rows>
</grid>
</window>