Data and Collections"
(→Property is Collection: add listbox template) |
|||
Line 144: | Line 144: | ||
<label value="@load(vm.address.street)"/> | <label value="@load(vm.address.street)"/> | ||
<listbox model="@load(vm.itemList)" selectedIndex="@bind(vm.selectedIndex)"> | <listbox model="@load(vm.itemList)" selectedIndex="@bind(vm.selectedIndex)"> | ||
− | < | + | <template name="model" var="item"> |
+ | <listitem label="@load(item.name)"/> | ||
+ | </template> | ||
</listbox> | </listbox> | ||
Revision as of 06:34, 28 June 2012
Expose ViewModel's Properties
ViewModel, like a JavaBean, exposes its properties through getter and setter methods. Any property that VIew (ZUL) wants to retrieve through data binding should have a corresponding getter method. The method's return type can be primitive type (int, boolean...), or a JavaBean. If a UI component needs to save its attribute value (it's usually user input) back to ViewModel's property, the ViewModel should provide a corresponding setter method. Therefore, through setter and getter can change the data of both the View and the ViewModel using the data binding mechanism.
Property is Primitive Type
Primitive type property
public class PrimitiveViewModel{
private int index;
private double price;
public int getIndex(){
return index;
}
public void setIndex(int index){
this.index = index;
}
public double getPrice(){
return price;
}
public void setPrice(double price){
this.price = price;
}
}
A zul that uses PrimitiveViewModel
<window apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('foo.PrimitiveViewModel')" >
<intbox value="@bind(vm.index)"/>
<doublebox value="@bind(vm.price)"/>
<!-- other components -->
</window>
- @id('vm') sets ViewModel name, then we can use vm to reference ViewModel's property in the following components. (line 1)
Property is Object or JavaBean
If a property is a JavaBean, that JavaBean's property can also be accessed through an EL expression.
Object type property
public class Address{
private String city;
private String street;
//gettter & setter
}
public class ObjectViewModel{
private Integer index;
private String name;
//JavaBean
private Address address;
public int getIndex(){
return index;
}
public void setIndex(Integer index){
this.index = index;
}
public String getName(){
return name;
}
public void setName(String name){
this.name = name;
}
public Item getAddress(){
return address;
}
public void setAddress(Address address){
this.address = address;
}
}
A zul that uses ObjectViewModel.
<intbox value="@bind(vm.index)"/>
<textbox value="@load(vm.name)"/>
<label value="@load(vm.address.street)"/>
- vm.address is a JavaBean, and we can access its property street with EL expression vm.address.street. (line 5)
Property is Collection
If the UI component is a collection container like listbox or grid, it should be bound to a property whose type is Map or subinterface of Collection like List or Set .
Collection type property
public class CollectionViewModel{
//primitive type
private int selectedIndex;
//Collection
private List itemList;
public int getSelectedIndex(){
return selectedIndex;
}
public void setSelectedIndex(int index){
selectedIndex = index;
}
public List getItemList(){
return itemList;
}
}
- As we can't save whole list through data binding, the ViewModel only provide setter for itemList. (line 14)
A zul that uses CollectionViewModel
<label value="@load(vm.address.street)"/>
<listbox model="@load(vm.itemList)" selectedIndex="@bind(vm.selectedIndex)">
<template name="model" var="item">
<listitem label="@load(item.name)"/>
</template>
</listbox>
- Listbox's model attribute should be bound to a collection object, vm.itemList. (line 2)
Version History
Version | Date | Content |
---|---|---|
6.0.0 | February 2012 | The MVVM was introduced. |