ZK Framework(四、MVVM模式)

官网例子：http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM

（一）业务流程（与MVC例子一样）

1、查询小车列表

2、显示某一小车详细信息

（二）工程

下载地址：http://www.cnblogs.com/jrsmith/admin/Files.aspx

MVVM.rar

searchMvvm.zul:

1、window: apply值从原来的某个SearchController,到现在的viewModel, org.zkoss.bind.BindComposer说明viewMoel是Binder,即将zul里的component绑定到SearchViewModel类。id('vm')唯一标识viewMoel

2、@bind（vm.xxxx）: 即将某一个Component绑定到ViewModel具体的全局变量去，通过getter/setter方法交互。

　　注：个人认为这里的跟ZK MVC的原理一样，只不过是将MVC里SearchController的变量映射放到View层而已。不过这样的好处是你想映射哪个组件就映射哪个，不想映射就不加@bind。

3、@command('xxx'): 指定ViewModel里响应的方法，这里的是search()方法。

 1 <window title="Search" width="600px" border="normal"
 2     apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('com.core.vm.SearchViewModel')">
 3     <hbox align="center">
 4         Keyword:
 5         <textbox value="@bind(vm.keyword)" />
 6         <button label="Search" image="/img/search.png" onClick="@command('search')" />
 7     </hbox>
 8     <listbox height="160px" model="@bind(vm.carList)" emptyMessage="No car found in the result"
 9     selectedItem="@bind(vm.selectedCar)">
10         <listhead>
11             <listheader label="Model" />
12             <listheader label="Make" />
13             <listheader label="Price" width="20%"/>
14         </listhead>
15         <template name="model">
16             <listitem>
17                 <listcell label="@bind(each.model)"></listcell>
18                 <listcell label="@bind(each.make)"></listcell>
19                 <listcell>$<label value="@bind(each.price)" /></listcell>
20             </listitem>
21         </template>
22     </listbox>
23     <hbox style="margin-top:20px">
24         <image width="250px" src="@bind(vm.selectedCar.preview)" />
25         <vbox>
26             <label value="@bind(vm.selectedCar.model)" />
27             <label value="@bind(vm.selectedCar.make)" />
28             <label value="@bind(vm.selectedCar.price)" />
29             <label value="@bind(vm.selectedCar.description)" />
30         </vbox>
31     </hbox>
32 </window>

SearchViewModel.java:

1、这里纯属POJO，定义全局变量，getter/seter方法。变量名称要与view层理的@bind（vm.xxx）名称一致。

2、@command('xxx') : 对应view层里的响应事件,不指定名称的话默认为修饰的方法名称。

3、@NotifyChange("carList") ：指当carList内容改变后告诉ZK马上更新view层里对应的carList Model.

 1 package com.core.vm;
 2 
 3 import java.util.List;
 4 import org.zkoss.bind.annotation.*;
 5 
 6 import com.core.model.Car;
 7 import com.core.service.CarService;
 8 import com.core.serviceImpl.CarServiceImpl;
 9 
10 public class SearchViewModel {
11         
12         private String keyword;
13         private List<Car> carList;
14         private Car selectedCar;
15         
16         private CarService carService = new CarServiceImpl();
17         
18         public void setKeyword(String keyword) {
19                 this.keyword = keyword;
20         }
21         public String getKeyword() {
22                 return keyword;
23         }
24 
25         public List<Car> getCarList(){
26                 return carList;
27         }
28         
29                 
30         public void setSelectedCar(Car selectedCar) {
31                 this.selectedCar = selectedCar;
32         }
33         public Car getSelectedCar() {
34                 return selectedCar;
35         }
36 
37         
38         @Command
39         @NotifyChange("carList")
40         public void search(){
41                 carList = carService.search(keyword);
42         }
43 }

（三）MVVM

左边为MVC，右边为MVVM。

两者最大的区别在于MVVM的通过binder来实现数据的同步，而MVC则需要通过Controller来手动修改数据。

The biggest difference from the Controller in the MVC is that ViewModel should not contain any reference to UI components and knows nothing about the View's visual elements.（官网）

（四）运行