From Documentation

(Difference between revisions)
Jump to: navigation, search
m
 
Line 1: Line 1:
-
{{ZKDevelopersReferencePageHeader}}
+
#REDIRECT [[ZK Developer's Reference/MVVM/Data Binding]]
-
 
+
-
If you want to do the conversion between the Data Source and UI components by yourself, you could specify the class name of the converter in the <tt>converter</tt> tag expression to tell Data Binding Manager to use your own way to do the conversion between the data source and UI components.
+
-
 
+
-
<tt><component-name attribute-name="@{bean-name.attribute- name,converter='class-name'}"/></tt>
+
-
 
+
-
 
+
-
Multiple definition is NOT allowed and the later defined would override the previous defined one.
+
-
 
+
-
# Define a class that implements <tt>TypeConverter </tt>with the following methods
+
-
 
+
-
* <tt>coerceToUI</tt>, converts an value object into the UI component attribute type.
+
-
* <tt>coerceToBean</tt>, converts an value object to bean property type.
+
-
 
+
-
# Specify the class name of converter into the <tt>converter</tt> tag expression<br/> In the following example, we will demonstrate how to convert a <tt>boolean</tt> value into different images instead of pure texts.<br/> First of all, you have to define a class that implements TypeConverter. myTypeConverter converts the boolean into different images accordingly. <br/>
+
-
 
+
-
<source lang="java" >
+
-
import org.zkoss.zkplus.databind.TypeConverter;
+
-
import org.zkoss.zul.Listcell;
+
-
 
+
-
public class MyTypeConverter implements TypeConverter {
+
-
public Object coerceToBean(java.lang.Object val,
+
-
org.zkoss.zk.ui.Component comp) {
+
-
return null;
+
-
}
+
-
 
+
-
public Object coerceToUi(java.lang.Object val,
+
-
org.zkoss.zk.ui.Component comp) {
+
-
boolean married = (Boolean) val;
+
-
if (married)
+
-
((Listcell) comp).setImage("/img/true.png");
+
-
else
+
-
((Listcell) comp).setImage("/img/false.png");
+
-
return null;
+
-
}
+
-
}
+
-
</source>
+
-
 
+
-
Specify <tt>MyTypeConverter</tt> with the <tt>convert</tt> tag expression to be associated with the <tt>married</tt> attribute of <tt>Person instance.</tt>
+
-
 
+
-
<source lang="xml" >
+
-
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>
+
-
 
+
-
<window width="500px">
+
-
<zscript><![CDATA[
+
-
    //prepare the example persons List
+
-
    List persons = new ArrayList();
+
-
    persons.add(new Person("Tom", "Yeh", true));
+
-
    persons.add(new Person("Henri", "Chen", true));
+
-
    persons.add(new Person("Jumper", "Chen", false));
+
-
    persons.add(new Person("Robbie", "Cheng", false));
+
-
    ]]>
+
-
</zscript>
+
-
 
+
-
<listbox rows="4" model="@{persons}">
+
-
<listhead>
+
-
<listheader label="First Name" width="100px" />
+
-
<listheader label="Last Name" width="100px" />
+
-
<listheader label="Married" width="100px" />
+
-
</listhead>
+
-
<listitem self="@{each=person}">
+
-
<listcell label="@{person.firstName}" />
+
-
<listcell label="@{person.lastName}" />
+
-
<listcell
+
-
label="@{person.married, converter='MyTypeConverter'}" />
+
-
</listitem>
+
-
</listbox>
+
-
</window>
+
-
</source>
+
-
 
+
-
=Version History=
+
-
{{LastUpdated}}
+
-
{| border='1px' | width="100%"
+
-
! Version !! Date !! Content
+
-
|-
+
-
| &nbsp;
+
-
| &nbsp;
+
-
| &nbsp;
+
-
|}
+
-
 
+
-
{{ZKDevelopersReferencePageFooter}}
+

Latest revision as of 03:54, 10 February 2012

  1. REDIRECT ZK Developer's Reference/MVVM/Data Binding