Customization of Conversion between the Data Source and UI Components"

From Documentation
 
(7 intermediate revisions by 4 users not shown)
Line 1: Line 1:
{{ZKDevelopersGuidePageHeader}}
+
#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 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 demonstrate you how to convert a <tt>boolean</tt> value into different images instead of pure text.<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>
 
 
 
{{ ZKDevelopersGuidePageFooter}}
 

Latest revision as of 03:54, 10 February 2012