|
|
(5 intermediate revisions by 2 users not shown) |
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 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>
| |
− | | |
− | =Version History=
| |
− | {{LastUpdated}}
| |
− | {| border='1px' | width="100%"
| |
− | ! Version !! Date !! Content
| |
− | |-
| |
− | |
| |
− | |
| |
− | |
| |
− | |}
| |
− | | |
− | {{ZKDevelopersReferencePageFooter}}
| |