一个数据源可以和多个UI组件相关联。一旦数据源被修改,数据绑定管理器会自动更新这些被关联的组件。
在下面的例子中,我们使用ZUML注释表达式将一个数据源Person的实例"selected"和多个UI组件关联,包括Listbox 和Grid。一旦用户选择了Listbox的一个项目,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>