官网例子: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
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.(官网)
(四)运行