ZK Developer's Reference/Data Binding/Customization of Conversion between the Data Source and UI Components

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.

1. Define a class that implements TypeConverter with the following methods

• coerceToUI, converts an value object into the UI component attribute type.
• coerceToBean, converts an value object to bean property type.

1. Specify the class name of converter into the converter tag expression
   In the following example, we will demonstrate how to convert a boolean value into different images instead of pure texts.
   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