一个数据源可以和多个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>