ZK Framework(三、MVC模式)

官網例子：http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC

（一）業務流程

例子介紹ZK采用的MVC設計模式來實現Web Project.業務流程如圖：

　　　　　　　　（來自官網例子）

　　①通過關鍵字搜索小車信息，顯示結果；

　　②點擊結果中的某一條記錄，顯示這條記錄的詳細信息。

 

（二）工程

　　1、新建工程：warmup;工程最終結構如圖：

這里只分析ZK的searchMvc.zul,SearchCotroller,其他的請自行腦補。

工程下載地址：http://www.cnblogs.com/jrsmith/admin/Files.aspx

warmup.rar

1、searchMvc.zul

分四部分的組件：最大層的window,頂層的hbox,中間的listbox,下面的hbox;

1.1 window的apply指定了后台哪個Controller類來處理它。

1.2 頂層hbox:定義了textbox和button組件，還用id，id是為了后台的Controller類對這個id對應的組件進行處理。

1.3 中間listbox:類似HTML里的table,tr,td; 或者學過ExtJs的，可以認為跟grid更相似。

　　listhead:定義column的名稱

　　listitem:定義每個單元格里的內容值

　　template:說明單元格的內容值是從model里遍歷取出來

1.4 下面hbox:定義了imgage和vbox,都是為了將后台的數據render到相應位置。

<window title="Search" width="600px" border="normal"
    apply="com.core.controller.SearchController">
    <hbox align="center">
        Keyword:
        <textbox id="keywordBox" />
        <button id="searchButton" label="Search" image="/img/search.png" />
    </hbox>
    <listbox id="carListbox" height="160px" emptyMessage="No car found in the result">
        <listhead>
            <listheader label="Model" />
            <listheader label="Make" />
            <listheader label="Price" width="20%"/>
        </listhead>
        <template name="model">
            <listitem>
                <listcell label="${each.model}"></listcell>
                <listcell label="${each.make}"></listcell>
                <listcell>$<label value="${each.price}" /></listcell>
            </listitem>
        </template>
    </listbox>
    <hbox style="margin-top:20px">
        <image id="previewImage" width="250px" />
        <vbox>
            <label id="modelLabel" />
            <label id="makeLabel" />
            <label id="priceLabel" />
            <label id="descriptionLabel" />
        </vbox>
    </hbox>
</window>

2. SearchCotroller.java

2.1 繼承ZK的SelectorComposer<Component>

2.2 全局變量名稱與searchMvc.zul里的組件id一一對應，且要在變量上面加上@Wire注解，這樣的當從View轉到Controller是，ZK會自動將View里面的組件以Object的形式注入到Controller里，以供操作。

2.3 search()

　　2.3.1 @Listen("onClick = #searchButton")：監聽View里面id="searchButton"組件的onClick事件；

　  2.3.2　carListbox.setModel(new ListModelList<Car>(result))：將查詢結果List轉換成ZK里的ListModelList形式，然后set進listbox的model.

2.4 showDetail()

　　與上面的類似，這里不詳述了。（累死了）

package com.core.controller;


import java.util.List;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.*;
import org.zkoss.zul.*;

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

public class SearchController extends SelectorComposer<Component> {

    private static final long serialVersionUID = 1L;
    
    @Wire
    private Textbox keywordBox;
    @Wire
    private Listbox carListbox;
    @Wire
    private Label modelLabel;
    @Wire
    private Label makeLabel;
    @Wire
    private Label priceLabel;
    @Wire
    private Label descriptionLabel;
    @Wire
    private Image previewImage;
    
    
    private CarService carService = new CarServiceImpl();
    
    @Listen("onClick = #searchButton")
    public void search(){
        String keyword = keywordBox.getValue();
        List<Car> result = carService.search(keyword);
        carListbox.setModel(new ListModelList<Car>(result));
    }
    
    @Listen("onSelect = #carListbox")
    public void showDetail(){
        Car selected = carListbox.getSelectedItem().getValue();
        previewImage.setSrc(selected.getPreview());
        modelLabel.setValue(selected.getModel());
        makeLabel.setValue(selected.getMake());
        priceLabel.setValue(selected.getPrice().toString());
        descriptionLabel.setValue(selected.getDescription());
    }
}

 

 

 （三）ZK MVC

　　　　　　　　　　　　　　（來自官網例子）

對應上面工程結構，

　　1、View指searchMvc.zul

　　2、Controller指com.core.controller

　　3、Model指從com.core.model轉換成ZK Data

本人覺得這跟我們學的Struts的MVC類似吧。

 

（四）運行結果