Associate UI Components with Data Source"

From Documentation
Line 5: Line 5:
 
<tt><component-name attribute-name="@{bean-name.attribute-name}'''"'''/></tt>
 
<tt><component-name attribute-name="@{bean-name.attribute-name}'''"'''/></tt>
  
* <tt>component-the name</tt> representing a UI component
+
* <tt>component- name</tt> representing a UI component
* <tt>attribute- the name</tt> representing an attribute of UI component or the data source
+
* <tt>attribute- name</tt> representing an attribute of UI component or the data source
* <tt>bean-the name </tt>representing a data source
+
* <tt>bean- name </tt>representing a data source
  
 
We use <tt>Grid</tt> as an example, and associate it with the data source, a <tt>Person</tt> instance. In this example, data-binding manager will automates the synchronization between UI components and the data source automatically.
 
We use <tt>Grid</tt> as an example, and associate it with the data source, a <tt>Person</tt> instance. In this example, data-binding manager will automates the synchronization between UI components and the data source automatically.

Revision as of 01:40, 25 July 2011


DocumentationZK Developer's ReferenceData BindingAssociate UI Components with Data Source
Associate UI Components with Data Source


After adding the source data and activating the data-binding manager, you have to define the required UI objects and then associate them with the data source. ZUML annotation expression can be used to tell the data-binding manager the relationship between the data source and UI components. Its usage is very straightforward, simply by declaring the annotation into the component's attribute directly.

<component-name attribute-name="@{bean-name.attribute-name}"/>

  • component- name representing a UI component
  • attribute- name representing an attribute of UI component or the data source
  • bean- name representing a data source

We use Grid as an example, and associate it with the data source, a Person instance. In this example, data-binding manager will automates the synchronization between UI components and the data source automatically.

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>

<window>
	<zscript><![CDATA[
		//prepare the example person object
		Person person = new Person();
		person.setFirstName("George");
		person.setLastName("Bush");
	]]>
	</zscript>

	<grid width="400px">
		<rows>
			<row> First Name: <textbox value="@{person.firstName}"/></row>
			<row> Last Name: <textbox value="@{person.lastName}"/></row>
			<row> Full Name: <label value="@{person.fullName}"/></row>
		</rows>
	</grid>
</window>

Version History

Last Update : 2011/07/25


Version Date Content
     



Last Update : 2011/07/25

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