Customization of Conversion between the Data Source and UI Components"
m |
m (correct highlight (via JWB)) |
||
Line 4: | Line 4: | ||
{{ZKDevelopersGuidePageHeader}} | {{ZKDevelopersGuidePageHeader}} | ||
− | 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 < | + | 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 <code>converter</code> tag expression to tell Data Binding Manager to use your own way to do the conversion between the data source and UI components. |
− | < | + | <code><component-name attribute-name="@{bean-name.attribute- name,converter='class-name'}"/></code> |
Multiple definition is NOT allowed and the later defined would override the previous defined one. | Multiple definition is NOT allowed and the later defined would override the previous defined one. | ||
− | # Define a class that implements < | + | # Define a class that implements <code>TypeConverter </code>with the following methods |
− | * < | + | * <code>coerceToUI</code>, converts an value object into UI component attribute type. |
− | * < | + | * <code>coerceToBean</code>, converts an value object to bean property type. |
− | # Specify the class name of converter into the < | + | # Specify the class name of converter into the <code>converter</code> tag expression<br/> In the following example, we demonstrate you how to convert a <code>boolean</code> 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" > | <source lang="java" > | ||
Line 40: | Line 40: | ||
</source> | </source> | ||
− | Specify < | + | Specify <code>myTypeConverter</code> with the <code>convert</code> tag expression to be associated with the <code>married</code> attribute of <code>Person instance.</code> |
<source lang="xml" > | <source lang="xml" > |
Latest revision as of 10:39, 19 January 2022
This documentation is for an older version of ZK. For the latest one, please click here.
This documentation is for an older version of ZK. For the latest one, please click here.
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 converter
tag expression to tell Data Binding Manager to use your own way to do the conversion between the data source and UI components.
<component-name attribute-name="@{bean-name.attribute- name,converter='class-name'}"/>
Multiple definition is NOT allowed and the later defined would override the previous defined one.
- Define a class that implements
TypeConverter
with the following methods
coerceToUI
, converts an value object into UI component attribute type.coerceToBean
, converts an value object to bean property type.
- Specify the class name of converter into the
converter
tag expression
In the following example, we demonstrate you how to convert aboolean
value into different images instead of pure text.
First of all, you have to define a class that implements TypeConverter. myTypeConverter converts the boolean into different images accordingly.
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;
}
}
Specify myTypeConverter
with the convert
tag expression to be associated with the married
attribute of Person instance.
<?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>
Version History
Version | Date | Content |
---|---|---|