When to Load Data from Data Source to UI"

From Documentation
m
m (correct highlight (via JWB))
 
Line 4: Line 4:
 
{{ZKDevelopersGuidePageHeader}}
 
{{ZKDevelopersGuidePageHeader}}
  
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.  
+
Data Binding Manager is triggered by events, or users' activities. Thus, you must specify events in the ZUML annotation expression with <code>load-when</code> 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>
+
<code><component-name attribute-name="@{bean-name.attribute-name, </code>
  
<tt>load-when='component-id.event-name'}'''"'''/></tt>
+
<code>load-when='component-id.event-name'}'''"'''/></code>
  
* <tt>component-id</tt> represents the ID of a UI component
+
* <code>component-id</code> represents the ID of a UI component
* <tt>event-name</tt> represents the event name
+
* <code>event-name</code> represents the event name
  
 
Multiple definition is allowed and would be called one by one.  
 
Multiple definition is allowed and would be called one by one.  
Line 17: Line 17:
 
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.  
 
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.  
+
Data Binding Manager will re-load <code>value</code> of <code>Label </code>whose id is<code> fullName,</code> from <code>person.fullName</code> when the either the value of <code>Textbox</code> whose id is <code>firstName</code> or <code>lastName</code> has been changed, in other words, <code>onChange</code> event is triggered.  
  
 
<source lang="xml" >
 
<source lang="xml" >

Latest revision as of 10:40, 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 BindingWhen to Load Data from Data Source to UI
When to Load Data from Data Source to UI


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


Data Binding Manager is triggered by events, or users' activities. Thus, you must specify events in the ZUML annotation expression with load-when tag expression to tell Data Binding Manager when to load data from data source into the component's attribute.

<component-name attribute-name="@{bean-name.attribute-name,

load-when='component-id.event-name'}"/>

  • component-id represents the ID of a UI component
  • event-name 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 value of Label whose id is fullName, from person.fullName when the either the value of Textbox whose id is firstName or lastName has been changed, in other words, onChange event is triggered.

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

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.