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

 

（四）運行