閣樓貓的五四三 (About Cat)

Databinding is a very useful feature to help us bind UI and model together, It decrease the line number of code of our project.;

Here, is example to show how to bind bean with macro component with data binding feature.

In this example, I have a PriceComp macro component , and have a Decimalbox inside it as a number member field. PriceComp delegates the number and forward the value to a decimalbox inside it.

public class PriceComp extends HtmlMacroComponent {
    private int number;
    Decimalbox db;
    public void afterCompose(){
        super.afterCompose();
        db = (Decimalbox)getFellowIfAny("value");
        if(db!=null){
            db.setValue(new BigDecimal(number));
        }else{
            throw new IllegalStateException("component value not found");
        }
    }
    public int getNumber() {
        if(db!=null){
            return db.getValue().intValue();
        }
        return number;
    }
    public void setNumber(int number) {
        if(db!=null){
            db.setValue(new BigDecimal(number));
        }else{
            this.number = number;
        }
    }
}

In the macro component template (~./myPrice.zul), it has a decimalbox , and it also forwards onChange event out to PriceComp as onNumberChange event

<zk>
     <decimalbox id="value" forward="onChange=onNumberChange"/>               
</zk>

You also need to write some configuration of this macro component. to enable default binding behavior, for example default save-when behavior of 'number' property is onNumberChange

<?xml version="1.0" encoding="UTF-8"?>
<language-addon>
    <addon-name>testapp</addon-name>
    <language-name>xul/html</language-name>
    <component>
        <component-name>myPriceComponent</component-name>
        <component-class>com.test.PriceComp
        </component-class>
        <macro-uri>~./myPrice.zul</macro-uri>
        <extends>decimalbox</extends>
        <annotation>
            <annotation-name>default-bind</annotation-name>
            <property-name>number</property-name>
            <attribute>
                <attribute-name>access</attribute-name>
                <attribute-value>both</attribute-value>
            </attribute>
            <attribute>
                <attribute-name>save-when</attribute-name>
                <attribute-value>self.onNumberChange</attribute-value>
            </attribute>
        </annotation>
    </component>
</language-addon>

Finally, a example to use databinding with this macro component.

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>
<zk>
    <window title="bind macro component" border="normal" id="win">
    <zscript><![CDATA[//@IMPORT
    import com.test.*;
    ]]><![CDATA[//@DECLARATION
    ]]><![CDATA[
    Bean bean = new Bean("Cat",35);            
    ]]>
    </zscript>
        <hbox>
            Name :  <textbox value="@{bean.name}" /> |
            Number : <myPriceComponent number="@{bean.amount}" />
        </hbox>
        <hbox>
            Name : <label value="@{bean.name}" />
        </hbox>
        <hbox>
            Number : <label value="@{bean.amount}" />
        </hbox>
    </window>
</zk>