|
|
Line 1: |
Line 1: |
− | {{ZKDevelopersReferencePageHeader}}
| + | #REDIRECT [[ZK Developer's Reference/MVVM/Data Binding]] |
− | | |
− | One data source could be associated with multiple UI components. Once the data source had been modified, those associated UI components will be updated automatically by the Data Binding Manager.
| |
− | | |
− | In the following example, we use ZUML annotation expression to associate a data source, a <tt>Person</tt> instance, "<tt>selected</tt>" with multiple UI components, including <tt>Listbox</tt>, and <tt>Grid</tt>. Once the user selects an item in the <tt>Listbox</tt>, the <tt>Grid</tt> will display information of the selected person accordingly.
| |
− | | |
− | <source lang="xml" >
| |
− | <?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>
| |
− | | |
− | <window width="500px">
| |
− | <zscript><![CDATA[
| |
− | //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>
| |
− | </source>
| |
− | | |
− | | |
− | =Version History=
| |
− | {{LastUpdated}}
| |
− | {| border='1px' | width="100%"
| |
− | ! Version !! Date !! Content
| |
− | |-
| |
− | |
| |
− | |
| |
− | |
| |
− | |}
| |
− | | |
− | {{ZKDevelopersReferencePageFooter}}
| |