Customization of Conversion between the Data Source and UI Components"

From Documentation
Line 13: Line 13:
 
* <tt>coerceToBean</tt>, converts an value object to bean property 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 will demonstrate 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/>  
+
# Specify the class name of converter into the <tt>converter</tt> tag expression<br/> In the following example, we will demonstrate how to convert a <tt>boolean</tt> value into different images instead of pure texts.<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" >

Revision as of 02:19, 25 July 2011


DocumentationZK Developer's ReferenceData BindingCustomization of Conversion between the Data Source and UI Components
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

Last Update : 2011/07/25


Version Date Content
     



Last Update : 2011/07/25

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.