How to handle lists and complex types with form?

asked 2014-03-24 15:32:38 +0800

JMVAZ
13 ● 3

Dear all,

I have one form and I had binded to one model one List of elements. The zul:

<div apply="org.zkoss.bind.BindComposer"
    viewModel="@id('vm') @init('demo.viewmodels.TestViewModel')"
    form="@id('fx') @load(vm.product) @save(vm.product, before='submit')">

        <vlayout>
                <textbox value="@bind(fx.name)"/>
            <textbox value="@bind(fx.description)"/>
            <doublebox value="@bind(fx.price)"/>
            <datebox value="@bind(fx.date)"></datebox>

            Categories:
            <listbox model="@bind(fx.categoryList)">
                <listhead>
                    <listheader label="Id" />
                    <listheader label="Desc"/>
                </listhead>
                <template name="model">
                    <listitem>
                        <listcell label="${each.id}"/>
                        <listcell label="${each.desc}" />
                    </listitem>
                </template>
            </listbox>

        </vlayout>


        <button label="Add category" onClick="@command('add_category', fx = fx)"/>
        <button label="Inspect product" onClick="@command('inspect')" />
        <button label="Submit product change" onClick="@command('submit')" />

</div>

My View Model:

public class TestViewModel {

private Product product = new Product();


@Command("add_category")
public void addCategory(@BindingParam("fx") Form fx){
    System.out.println("add_category myForm fields: " + fx.getFieldNames());
    Object TempCategoryList = fx.getField("categoryList");

    List<Category> categoryList= null;
    if(TempCategoryList!=null){
        categoryList = (List<Category>) TempCategoryList;
    }else{
        categoryList = new ArrayList<Category>();
        fx.setField("categoryList", categoryList);
    }
    int rand = new Random().nextInt();
    categoryList.add(new Category("Category " +rand , "Description "+rand));
    BindUtils.postNotifyChange(null, null, fx, "*");
}

@Command({"submit","inspect"})
public void printState(){
    System.out.println( "inspect");
    System.out.println( "name:" + product.getName());
    System.out.println( "description:" + product.getDescription());
    System.out.println( "price:"+ product.getPrice());
    System.out.println( "date:"+ product.getDate());
    System.out.println( "categories:"+ product.getCategoryList());
}

When I click in button to Add category, my list in middle object must change, but the original object loaded into the fx, must remain unchanged.

When I add one new element to categoryList, It is automatically saved in the product, because the reference saved in the form is the same of the product. What is the best solution, to use the middle object concept in this case?

Regards,

Jaime