Associate UI Components with Data Source"

From Documentation
 
(2 intermediate revisions by one other user not shown)
Line 1: Line 1:
{{ZKDevelopersReferencePageHeader}}
+
#REDIRECT [[ZK Developer's Reference/MVVM/Data Binding]]
 
 
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.
 
 
 
<tt><component-name attribute-name="@{bean-name.attribute-name}'''"'''/></tt>
 
 
 
* <tt>component- name</tt> representing a UI component
 
* <tt>attribute- name</tt> representing an attribute of UI component or the 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.
 
 
 
<source lang="xml" >
 
<?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>
 
</source>
 
 
 
=Version History=
 
{{LastUpdated}}
 
{| border='1px' | width="100%"
 
! Version !! Date !! Content
 
|-
 
| &nbsp;
 
| &nbsp;
 
| &nbsp;
 
|}
 
 
 
{{ZKDevelopersReferencePageFooter}}
 

Latest revision as of 03:57, 10 February 2012