ZK - Open Source Ajax Java Framework
|
ZK6: how to update specific listbox/tree/grid rows via MVVM?
Hi davout,
Please refer to the smalltalk:
http://books.zkoss.org/wiki/Small_Talks/2011/November/MVVM_in_ZK_6_-_Design_your_first_MVVM_page
Regards,
ben
I've seen this already and there's no reference to updating individual grid/listbox/tree rows.
In ZK5 it was possible to send an event via the model to update a row.
Please refer to the simple sample:
Item.java
package j3kvld74$v1;public class Item {
private String _name;
private int _price;
private int _quantity;
public Item () {
}
public Item (String name, int price, int quantity) {
setName (name);
setPrice (price);
setQuantity (quantity);
}
public void setName (String name) {
_name = name;
}
public String getName () {
return _name;
}
public void setPrice (int price) {
_price = price;
}
public int getPrice () {
return _price;
}
public void setQuantity (int quantity) {
_quantity = quantity;
}
public int getQuantity () {
return _quantity;
}
}
TestVM.java
package j3kvld74$v1;import java.util.*;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zul.*;public class TestVM {
private List<Item> _items;
private Listitem _selected;
public List<Item> getItems () {
if (_items == null) {
_items = new ArrayList();
_items.add(new Item("Item 1", 1, 1));
_items.add(new Item("Item 2", 2, 2));
_items.add(new Item("Item 3", 3, 3));
}
return _items;
}public void setSelected (Listitem selected) {
_selected = selected;
}
public Listitem getSelected () {
return _selected;
}@Command @NotifyChange("items")
public void addItem() {
_items.get(1).setQuantity(_items.get(1).getQuantity()+1);
}
}
index.zul
<zk>
<window title="Search Storage Item" border="normal" width="600px"
apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('j3kvld74$v1.TestVM')" >
<hbox>
<vbox>
<listbox model="@load(vm.items)" selectedItem="@bind(vm.selected)" hflex="true" height="300px">
<listhead>
<listheader label="Name" width="80px"/>
<listheader label="Price" align="center" width="80px" />
<listheader label="Quantity" align="center" width="80px" />
</listhead>
<template name="model" var="item">
<listitem >
<listcell>
<label value="@load(item.name)" />
</listcell>
<listcell>
<intbox readonly="true" value="@load(item.price)" />
</listcell>
<listcell>
<intbox readonly="true" value="@load(item.quantity)" />
</listcell>
</listitem>
</template>
</listbox>
<button onClick="@command('addItem')" label="add Item 2 quantity" />
</vbox>
<listbox model="@load(vm.items)" selectedItem="@bind(vm.selected)" hflex="true" height="300px">
<listhead>
<listheader label="Name" width="80px"/>
<listheader label="Price" align="center" width="80px" />
<listheader label="Quantity" align="center" width="80px" />
</listhead>
<template name="model" var="item">
<listitem >
<listcell>
<textbox value="@bind(item.name)" />
</listcell>
<listcell>
<intbox value="@bind(item.price)" />
</listcell>
<listcell>
<intbox value="@bind(item.quantity)" />
</listcell>
</listitem>
</template>
</listbox>
</hbox>
</window>
</zk>
Click the button below the left side listbox will increase the quantity of Item 2,
when the button clicked, it trigger the 'addItem' method in TestVM with the @command annotation,
and update the model by declare the annotation @NotifyChange("items").
Modify the value in right side listbox,
it will trigger the 'setter' of vm because the '@bind' annotation,
then update other items that bind to the same value with '@load' or '@bind' annotation automatically.
Regards,
ben
With the new ZK6 MVVM pattern how can you get individual listbox/tree/grid rows to update?