Home   Single Page

データソースと UI コンポーネント間の変換をカスタマイズ

データソースと UI コンポーネント間の変換を自分でやりたい時は、コンバーターのクラス名をコンバーター タグ表現の中で指定して、データバィンディングマネージャーにデータソースと UI コンポーネント間の独自の流儀の変換方法を使用することを知らせます。

<component-name attribute-name="@{bean-name.attribute- name, converter='class-name' }"/>

複数の定義は許されません。そして後からの定義が以前の定義を上書きします。

  1. 以下の要領で TypeConverter を実装するクラスを定義します。
  1. コンバーターのクラス名をコンバーター タグ表現内に指定します。

    以下のサンプルでは、ブーリアン value を純テキストの替わりに異なったイメージに変換する方法をデモします。

    まず最初に、 TypeConverter を実装するクラスを定義します。 myTypeConverter はブーリアンをそれぞれの異なったイメージに変換します。

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;
}
}

myTypeConverter を convert タグ表現とともに person インスタンスの married 属性に関連付けられるように指定します。

<?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>