Associate the Same Data Source with Multiple UI Components"

From Documentation
m (Created page with '{{ZKDevelopersGuidePageHeader}} One data source could be associated with multiple UI components. Once the data source had been modified, those associated UI components will be u…')
 
 
(5 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{ZKDevelopersGuidePageHeader}}
+
#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 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>
 
 
 
{{ ZKDevelopersGuidePageFooter}}
 

Latest revision as of 03:55, 10 February 2012