Associate the Same Data Source with Multiple UI Components"

From Documentation
 
m (correct highlight (via JWB))
 
(2 intermediate revisions by one other user not shown)
Line 1: Line 1:
−
#REDIRECT [[ZK Developer's Reference/Data Binding/Associate the Same Data Source with Multiple UI Components]]
+
{{Old Version
 +
|url=http://books.zkoss.org/wiki/ZK_Developer's_Reference/Data_Binding
 +
|}}
 +
{{ZKDevelopersGuidePageHeader}}
 +
 
 +
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 <code>Person</code> instance, "<code>selected</code>" with multiple UI components, including <code>Listbox</code>, and <code>Grid</code>. Once the user selects an item in the <code>Listbox</code>, the <code>Grid</code> 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
 +
|-
 +
| &nbsp;
 +
| &nbsp;
 +
| &nbsp;
 +
|}
 +
 
 +
{{ZKDevelopersGuidePageFooter}}

Latest revision as of 10:39, 19 January 2022

Stop.png This documentation is for an older version of ZK. For the latest one, please click here.

DocumentationZK Developer's GuideZK in DepthData BindingAssociate the Same Data Source with Multiple UI Components
Associate the Same Data Source with Multiple UI Components


Stop.png This documentation is for an older version of ZK. For the latest one, please click here.


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 Person instance, "selected" with multiple UI components, including Listbox, and Grid. Once the user selects an item in the Listbox, the Grid will display information of the selected person accordingly. 

<?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>


Version History

Last Update : 2022/01/19


Version Date Content
     



Last Update : 2022/01/19

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.


Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Guide/ZK_in_Depth/Data_Binding/Associate_the_Same_Data_Source_with_Multiple_UI_Components&oldid=53424"