|
|
| (8 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}}
| |