這是我們從頭開始構建ZK應用程序的第二集。 上一篇文章涉及使用MVVM將數據加載和呈現到表中。 在本文中，我們將向您介紹ZK MVVM的表單綁定。

目的

我們將構建一個“添加”功能，使我們能夠將新條目保存到清單中。

單擊“添加”時出現表格

單擊“保存”后，將添加新條目

ZK實戰功能
?

• MVVM：保存，表單綁定，條件綁定

使用MVVM表單綁定添加新條目

我們需要實現以下部分：

• 增強我們的ViewModel POJO
• 添加UI標記以呈現表單并用適當的注釋裝飾標記

ViewModel類

public class InventoryVM {private List<item> items;private Item newItem;@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;}public List<item> getItems() throws Exception{items = DataService.getInstance().getAllItems();return items;}}

• 第4行，我們聲明了一個名為newItem的Item對象，該對象將引用要保存到數據庫的Item實例。
• 第6行， @ NotifyChange通知綁定程序在關聯的ViewModel屬性狀態上更新UI。
  在下面顯示的UI標記的第8行，我們有一個Groupbox并帶有visible =” @ load（ 不是空vm.newItem ） 批注 ，因此一旦createNewItem將Item實例分配給newItem時 ，Groupbox將變為可見。
  簡而言之， @ NotifyChange會根據ViewModel屬性的更新來刷新UI。
• 在第7行，我們用@Command注釋了createNewItem方法，在下面顯示的UI標記中，在第4行，我們有一個帶有onClick =” @ commnad（createNewItem）”的工具欄按鈕 。 因此，當單擊工具欄按鈕時，將調用createNewItem方法。
• 類似地，從第12行到第18行，我們有一個saveItem方法，當其對應的onClick事件被觸發時將調用該方法。 將新的Item對象保存到數據庫緩存后，我們將newItem重置為null并檢索新的項目列表。 與之前一樣，使用@NotifyChange對ViewModel屬性newItem （現在再次為null）和項目 （現在具有額外的條目）所做的更改將反映到UI。

標記

<window apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('lab.sphota.zk.ctrl.InventoryVM')">
<toolbar><toolbarbutton label="Add" onClick="@command('createNewItem')" />
</toolbar>
<groupbox 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 id="name" 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"onClick="@command('saveItem')" mold="trendy" /><button width="80px" label="Cancel"onClick="@command('cancelSave')" mold="trendy" /></cell></row></rows></grid>
</groupbox>
<listbox>
...
</listbox>
</window>

• 第1行，我們應用ZK的BindComposer的默認實現。 它負責實例化我們的ViewModel和Binder實例。
• 第2行，我們提供了要實例化的ViewModel的完整類名，并為其提供了ID以供將來參考
• 在第4行中，我們將ViewModel的“命令方法” createNewItem分配為工具欄按鈕的onClick事件處理程序。
• 第6行，使用ID“ itm”使整個Groupbox中均可引用ViewModel中的newItem屬性。
• 第6,7行使用表單綁定，以避免將無效或不完整的數據保存到ViewModel屬性，將表單中的條目保存到一個臨時對象，直到調用命令方法saveItem 。
• 在第8行，我們顯示了Groupbox，只有用戶單擊“ Add”按鈕時，它才能輸入新的Item條目； 依次調用createNewItem方法并為VM屬性newItem分配具有默認值（空字符串和0s）的Item實例。
• 在第14、18、22、27行中，我們將Item屬性與輸入元素綁定在一起。 @bind實際上等效于@load加@save。

簡而言之

總結點形式：

• 使用表單綁定可避免通過將表單條目保存到臨時對象來直接修改ViewModel屬性中的數據。 僅在滿足指定條件的情況下，才將數據寫入ViewModel屬性。 在我們的示例中，僅當調用saveItem方法時。
• @Command批注允許綁定程序將UI事件處理程序映射到ViewModel命令方法。
• @NotifyChange通知聯編程序，在執行命令方法后，哪些ViewModel屬性已被修改，以便可以將數據更改反映在UI上。
• 我們可以在運行時通過MVVM綁定將值分配給任何UI組件的屬性，以操縱諸如可見性，樣式，禁用/啟用等參數。

在這篇文章中，我們還沒有看到如何驗證數據條目。 在此之前，我們將在下一篇文章中實現刪除和編輯功能。

參考 ZK開發人員參考

參考： ZK in Action [1]：MVVM –來自我們JCG合作伙伴 Lance Lu的Form Binding ，位于Tech Dojo博客上。