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类似吧。

 

（四）运行结果