ZK實際應用：MVVM –與ZK客戶端API一起使用

在之前的文章中，我們使用ZK的MVVM實現了以下功能：

將數據加載到表中
使用表單綁定保存數據
刪除條目并以編程方式更新視圖

ZK MVVM和ZK MVC實現方式之間的主要區別是，我們不直接在controller（ViewModel）類中訪問和操作UI組件。在本文中，我們將看到如何將某些UI操作委派給客戶端代碼，以及如何將參數從View傳遞到ViewModel。

目的

為我們的簡單清單CRUD功能構建更新功能。用戶可以在表中就地編輯條目，并可以選擇更新或放棄所做的更改。修改后的條目以紅色突出顯示。

ZK實戰功能

ZK客戶端API
ZK風格班
MVVM：將參數從視圖傳遞到ViewModel

分步實施 ?

在列表框中啟用就地編輯，以便我們可以編輯條目：

<listcell><textbox inplace="true" value="@load(each.name)" ...</textbox></listcell>....<listcell><doublebox inplace="true" value="@load(each.price)" ...</textbox></listcell>...

inplace =” true”呈現輸入元素，例如Textbox，但其邊框未顯示為純標簽；僅當選擇輸入元素時才顯示邊框
第2、6行，“每個”指的是數據收集中的每個Item對象

編輯條目后，我們希望為用戶提供更新或放棄更改的選項。
僅當用戶對列表框條目進行了修改時，“更新”和“放棄”按鈕才需要可見。首先，我們定義JavaScript函數以顯示和隱藏“更新”和“放棄”按鈕：

<toolbar>...<span id="edit_btns" visible="false" ...><toolbarbutton label="Update" .../><toolbarbutton label="Discard" .../></span>
</toolbar><script type="text/javascript">function hideEditBtns(){jq('$edit_btns').hide();}function showEditBtns(){ jq('$edit_btns').show();}</script>...

第2行，我們包裝了Update and Discard ，并將可見性設置為false
第9、13行中，我們定義了分別隱藏和顯示“ 更新”和“ 放棄”按鈕的函數
第11、15行，我們使用jQuery選擇器jq（'$ edit_btns'）檢索ID為“ edit_btns”的ZK小部件；請注意，ZK小部件ID的選擇器模式為“ $”，而不是“＃”

修改列表框中的條目后，我們將使“更新/丟棄”按鈕可見，并使修改后的值變為紅色。 單擊“更新”或“放棄”按鈕后，我們想再次隱藏按鈕

由于這是純UI交互，因此我們將使用ZK的客戶端API：

<style>.inputs { font-weight: 600; }.modified { color: red; }
</style>
...<toolbar xmlns:w="client" >...<span id="edit_btns" visible="false" ...><toolbarbutton label="Update" w:onClick="hideEditBtns()" .../><toolbarbutton label="Discard" w:onClick="hideEditBtns()" .../></span></toolbar><script type="text/javascript">//show hide functionszk.afterMount(function(){jq('.inputs').change(function(){showEditBtns();$(this).addClass('modified');})});</script>...<listcell><doublebox inplace="true" sclass="inputs" value="@load(each.price)" ...</textbox></listcell>...

第2行，我們為輸入元素（文本框，Intbox，Doublebox，日期框）指定樣式類，并將其分配給輸入元素的sclass屬性，例如。第26行； sclass為ZK小部件定義樣式類
在第18?20行，我們通過匹配它們的sclass名稱獲得所有輸入元素，并分配一個onChange事件處理程序。更改輸入元素中的值后，“更新/丟棄”按鈕將變為可見，并且修改后的值將以紅色突出顯示。
第17行，在創建ZK小部件時運行zk.afterMount
在第6行，我們指定了客戶端名稱空間，因此我們可以使用語法“ w：onClick”注冊客戶端onClick事件偵聽器。請注意，我們仍然可以注冊通常在服務器上同時處理的onClick事件偵聽器。
第9、10行，我們為客戶端分配了onClick事件監聽器； hideEditBtns函數將被調用以使按鈕再次不可見

定義一種將修改后的Item對象存儲到集合中的方法，以便如果用戶選擇這樣做，則可以批量更新更改：

public class InventoryVM {private HashSet<Item> itemsToUpdate = new HashSet<item>();...@Commandpublic void addToUpdate(@BindingParam("entry") Item item){itemsToUpdate.add(item);}

第6行，我們將此方法注釋為命令方法，以便可以從View調用它
第7行， @ BindingParam（“ entry”）項目項綁定了一個名為“ entry”的任意命名的參數；我們預計參數將為Item類型

創建一種方法來更新在視圖中對數據模型所做的更改

public class InventoryVM {private List<Item> items;private HashSet<Item> itemsToUpdate = new HashSet<item>();...@NotifyChange("items")@Commandpublic void updateItems() throws Exception{for (Item i : itemsToUpdate){i.setDatemod(new Date());DataService.getInstance().updateItem(i);}itemsToUpdate.clear();items = getItems();}

對列表框條目進行修改后，請調用addToUpdate方法并將經過編輯的Item對象傳遞給該方法，該對象又被保存到itemsToUpdate集合

<listitem><listcell><doublebox value="@load(each.price) @save(each.name, before='updateItems')"  onChange="@command('addToUpdate',entry=each)" /></listcell>...
</listitem>

@save（each.name，before ='updateItems'）確保除非調用updateItems（即，當用戶單擊“更新”按鈕時），否則不保存修改后的值。

最后，當用戶單擊更新時，我們調用updateItems方法來更新對數據模型的更改。 如果單擊“丟棄”，我們將調用getItems刷新列表框，而不進行任何更改

...<toolbarbutton label="Update" onClick="@command('updateItems')" .../><toolbarbutton label="Discard" onClick="@command('getItems')" .../>...

簡而言之

在MVVM模式下，我們努力使ViewModel代碼獨立于任何View組件
由于我們沒有直接引用ViewModel代碼中的UI組件，因此可以使用ZK的客戶端API將UI操作（在示例代碼中，顯示/隱藏，樣式更改）代碼委托給客戶端
我們可以在ZK客戶端使用jQuery選擇器和API
我們可以使用@BindingParam輕松地將參數從View傳遞到ViewModel

接下來，在處理MVVM驗證器和轉換器之前，我們將詳細介紹ZK樣式。 ?

ViewModel（動作中的ZK [0]?[3]）：

public class InventoryVM {private List<Item> items;private Item newItem;private Item selected;private HashSet<Item> itemsToUpdate = new HashSet<Item>();public InventoryVM(){}//CREATE@NotifyChange("newItem")@Commandpublic void createNewItem(){newItem = new Item("", "",0, 0,new Date());}@NotifyChange({"newItem","items"})@Commandpublic void saveItem() throws Exception{DataService.getInstance().saveItem(newItem);newItem = null;items = getItems();}@NotifyChange("newItem")@Commandpublic void cancelSave() throws Exception{newItem = null;}//READ@NotifyChange("items")@Commandpublic List<Item> getItems() throws Exception{items = DataService.getInstance().getAllItems();for (Item j : items){System.out.println(j.getModel());}Clients.evalJavaScript("zk.afterMount(function(){jq('.inputs').removeClass('modified').change(function(){$(this).addClass('modified');showEditBtns();})});"); //how does afterMount work in this case?return items;}//UPDATE@NotifyChange("items")@Commandpublic void updateItems() throws Exception{for (Item i : itemsToUpdate){i.setDatemod(new Date());DataService.getInstance().updateItem(i);}itemsToUpdate.clear();items = getItems();}@Commandpublic void addToUpdate(@BindingParam("entry") Item item){itemsToUpdate.add(item);}//DELETE@Commandpublic void deleteItem() throws Exception{if (selected != null){String str = "The item with name \""+selected.getName()+"\" and model \""+selected.getModel()+"\" will be deleted.";Messagebox.show(str,"Confirm Deletion", Messagebox.OK|Messagebox.CANCEL, Messagebox.QUESTION, new EventListener<Event>(){@Overridepublic void onEvent(Event event) throws Exception {if (event.getName().equals("onOK")){DataService.getInstance().deleteItem(selected);items = getItems();BindUtils.postNotifyChange(null, null, InventoryVM.this, "items");}}});} else {Messagebox.show("No Item was Selected");} }public Item getNewItem() {return newItem;}public void setNewItem(Item newItem) {this.newItem = newItem;}public Item getselected() {return selected;}public void setselected(Item selected) {this.selected = selected;}
}

視圖（ZK處于活動狀態[0]?[3]）：

<zk><style>.z-toolbarbutton-cnt { font-size: 17px;} .edit-btns {border: 2pxsolid #7EAAC6; padding: 6px 4px 10px 4px; border-radius: 6px;}.inputs { font-weight: 600; } .modified { color: red; }</style><script type="text/javascript">function hideEditBtns(){ jq('$edit_btns').hide(); }function showEditBtns(){ jq('$edit_btns').show(); }zk.afterMount(function(){ jq('.inputs').change(function(){$(this).addClass('modified'); showEditBtns(); }) });</script><window apply="org.zkoss.bind.BindComposer"viewModel="@id('vm') @init('lab.sphota.zk.ctrl.InventoryVM')"xmlns:w="client"><toolbar width="100%"><toolbarbutton label="Add"onClick="@command('createNewItem')" /><toolbarbutton label="Delete"onClick="@command('deleteItem')"disabled="@load(empty vm.selected)" /><span id="edit_btns" sclass="edit-btns" visible="false"><toolbarbutton label="Update" onClick="@command('updateItems')" w:onClick="hideEditBtns()"/><toolbarbutton label="Discard"onClick="@command('getItems')" w:onClick="hideEditBtns()" /></span></toolbar><groupbox mold="3d"form="@id('itm') @load(vm.newItem) @save(vm.newItem, before='saveItem')"visible="@load(not empty vm.newItem)"><caption label="New Item"></caption><grid width="50%"><rows><row><label value="Item Name" width="100px"></label><textbox value="@bind(itm.name)" /></row><row><label value="Model" width="100px"></label><textbox value="@bind(itm.model)" /></row><row><label value="Unit Price" width="100px"></label><decimalbox value="@bind(itm.price)"format="#,###.00" constraint="no empty, no negative" /></row><row><label value="Quantity" width="100px"></label><spinner value="@bind(itm.qty)"constraint="no empty,min 0 max 999: Quantity Must be Greater Than Zero" /></row><row><cell colspan="2" align="center"><button width="80px" label="Save" mold="trendy"onClick="@command('saveItem')"  /><button width="80px" label="Cancel" mold="trendy"onClick="@command('cancelSave')" /></cell></row></rows></grid></groupbox><listbox selectedItem="@bind(vm.selected)" model="@load(vm.items) "><listhead><listheader label="Name" sort="auto" hflex="2" /><listheader label="Model" sort="auto" hflex="1" /><listheader label="Quantity" sort="auto" hflex="1" /><listheader label="Unit Price" sort="auto" hflex="1" /><listheader label="Last Modified" sort="auto" hflex="2" /></listhead><template name="model"><listitem><listcell><textbox inplace="true" width="110px" sclass="inputs"value="@load(each.name) @save(each.name, before='updateItems')"onChange="@command('addToUpdate',entry=each)"></textbox></listcell><listcell><textbox inplace="true" width="110px" sclass="inputs" value="@load(each.model) @save(each.model, before='updateItems')"onChange="@command('addToUpdate',entry=each)" /></listcell><listcell><intbox inplace="true" sclass="inputs" value="@load(each.qty) @save(each.qty, before='updateItems')"onChange="@command('addToUpdate',entry=each)" /></listcell><listcell><doublebox inplace="true" sclass="inputs" format="###,###.00" value="@load(each.price) @save(each.price, before='updateItems')"onChange="@command('addToUpdate',entry=each)" /></listcell><listcell label="@load(each.datemod)" /></listitem></template></listbox></window>
</zk>