When to Load Data from Data Source to UI"

From Documentation
 
(4 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{ZKDevelopersGuidePageHeader}}
+
#REDIRECT [[ZK Developer's Reference/MVVM/Data Binding]]
 
 
Data Binding Manager is triggered by events, or users' activities. Thus, you must specify events in the ZUML annotation expression with <tt>load-when</tt> tag expression to tell Data Binding Manager when to load data from data source into the component's attribute.
 
 
 
<tt><component-name attribute-name="@{bean-name.attribute-name, </tt>
 
 
 
<tt>load-when='component-id.event-name'}'''"'''/></tt>
 
 
 
* <tt>component-id</tt> represents the ID of a UI component
 
* <tt>event-name</tt> represents the event name
 
 
 
Multiple definition is allowed and would be called one by one.
 
 
 
In the following example, we demonstrate an example that the fullname of a Person will be updated automatically once his/her first name or last name has been modified.
 
 
 
Data Binding Manager will re-load <tt>value</tt> of <tt>Label </tt>whose id is<tt> fullName,</tt> from <tt>person.fullName</tt> when the either the value of <tt>Textbox</tt> whose id is <tt>firstName</tt> or <tt>lastName</tt> has been changed, in other words, <tt>onChange</tt> event is triggered.
 
 
 
<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 id="firstName" value="@{person.firstName}"/>
 
</row>
 
<row> Last Name:
 
<textbox id="lastName" value="@{person.lastName}"/>
 
</row>
 
<row> Full Name:
 
<label id="fullName" value="@{person.fullName,
 
load-when='firstName.onChange,lastName.onChange'}"/>
 
</row>
 
</rows>
 
</grid>
 
</window>
 
</source>
 
 
 
 
 
{{ ZKDevelopersGuidePageFooter}}
 

Latest revision as of 03:57, 10 February 2012