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()方法。

<window title="Search" width="600px" border="normal"
    apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('com.core.vm.SearchViewModel')">
    <hbox align="center">
        Keyword:
        <textbox value="@bind(vm.keyword)" />
        <button label="Search" image="/img/search.png" onClick="@command('search')" />
    </hbox>
    <listbox height="160px" model="@bind(vm.carList)" emptyMessage="No car found in the result"
    selectedItem="@bind(vm.selectedCar)">
        <listhead>
            <listheader label="Model" />
            <listheader label="Make" />
            <listheader label="Price" width="20%"/>
        </listhead>
        <template name="model">
            <listitem>
                <listcell label="@bind(each.model)"></listcell>
                <listcell label="@bind(each.make)"></listcell>
                <listcell>$<label value="@bind(each.price)" /></listcell>
            </listitem>
        </template>
    </listbox>
    <hbox style="margin-top:20px">
        <image width="250px" src="@bind(vm.selectedCar.preview)" />
        <vbox>
            <label value="@bind(vm.selectedCar.model)" />
            <label value="@bind(vm.selectedCar.make)" />
            <label value="@bind(vm.selectedCar.price)" />
            <label value="@bind(vm.selectedCar.description)" />
        </vbox>
    </hbox>
</window>

SearchViewModel.java:

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

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

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

package com.core.vm;

import java.util.List;
import org.zkoss.bind.annotation.*;

import com.core.model.Car;
import com.core.service.CarService;
import com.core.serviceImpl.CarServiceImpl;

public class SearchViewModel {
        
        private String keyword;
        private List<Car> carList;
        private Car selectedCar;
        
        private CarService carService = new CarServiceImpl();
        
        public void setKeyword(String keyword) {
                this.keyword = keyword;
        }
        public String getKeyword() {
                return keyword;
        }

        public List<Car> getCarList(){
                return carList;
        }
        
                
        public void setSelectedCar(Car selectedCar) {
                this.selectedCar = selectedCar;
        }
        public Car getSelectedCar() {
                return selectedCar;
        }

        
        @Command
        @NotifyChange("carList")
        public void search(){
                carList = carService.search(keyword);
        }
}

 

（三）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.（官网）

 

（四）运行