ZK MVC入门教程

        ZK是一套以 AJAX/XUL/Java 为基础的网页应用程式开发框架，用于丰富网页应用程式的使用接口。最大的好处是，在设计AJAX网络应用程式时，轻松简便的操作就像设计桌面程式一样。 ZK包含了一个以AJAX为基础、事件驱动（event-driven）、高互动性的引擎，同时还提供了多样丰富、可重复使用的XUL与HTML组件，以及以 XML 为基础的使用接口设计语言 ZK User-interfaces Markup Language (ZUML)。

        ZK 提供超过70个XUL组件及80个XHMTL组件。举凡listbox, slider, audio, slider, tree, combobox, tabbox, auto-completion等均有支援。ZK 亦提供 FCKeditor, Dojo, Google Maps, 和 SIMILE Timeline的组件，让使用者直接以Java控制，无须使用 JavaScript。

        ZK是一套开放源码、相容于 XUL/HTML 标准、Java写成的开发工具。

1.介绍 

本教程适用于有编写Java程序经验的的软件开发人员。您将通过建立一个ZK的Web应用程序来学习其基本概念。我们要构建目标应用程序是一个简单的汽车目录的应用程序。我们将使用MVC架构来构建应用程序。这种做法是非常直观和灵活，让您完全控制组件。此外，您也可以选择另一个教程中的MVVM。

2.教程目标 

我们的目标应用程序是一个简单的汽车目录的应用程序。此应用程序有两个功能： 
1）搜索汽车。 
请在输入字段中的关键字，点击搜索和搜索结果将显示在下面的车列表。 
2）查看详细信息。 
点击从车上列表中的项目，下面的车清单中的区域将显示所选汽车的详细信息，包括型号，价格，描述和预览。

3.声明域类

下边是一个汽车对象。

public class Car {    private Integer id;    private String model;    private String make;    private String preview;    private String description;    private Integer price;    //省略getter和setter}

然后，我们定义一个服务类来执行如下所示的业务逻辑（查车）：

public interface CarService {    /**     * Retrieve all cars in the catalog.     * @return all cars     */    public List<Car> findAll();         /**     * search cars according to keyword in  model and make.     * @param keyword for search     * @return list of car that match the keyword     */    public List<Car> search(String keyword);}

在这个例子中，我们定义了一个类 - CarServeImpl实现上述接口。为简单起见，它采用的是静态列表对象作为数据模型。你可以重写它，以便它连接到一个数据库中的实际应用。

4.构建用户界面

UI设计是建立一个应用程序的良好开端。 ZK提供了数百个便于使用的UI组件，使开发人员可以快速构建自己理想的用户界面和组合。 

在ZK中，你可以使用ZK用户界面标记语言（ZUML），一种XML格式的语言，用来描述用户界面。由于ZK的惯例，用来描述用户界面的ZUML文件使用ZUL作为后缀名。在ZUL文件，一个组件可以被表示为一个XML元素（标签），你可以通过设置XML元素的属性配置每个组件的样式，行为和功能。

我们的示例应用程序的用户界面窗口内分为3个区域，它们是（从上到下）的搜索功能，汽车名单，以及汽车的详细信息。

search.zul代码如下：

<window title="Search" width="600px" border="normal"><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>    <listitem>        <listcell label="product name"></listcell>        <listcell label="make"></listcell>        <listcell>$<label value="price" /></listcell>    </listitem></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>

5.处理UI逻辑 

构建用户界面之后就是使其对用户作出响应。我们在这里介绍的方法是直接由自己控制的UI组件。这种方法可分为模型 - 视图 - 控制器（MVC）设计模式。 这种模式将应用程序分成三个部分。

ZK项目结构如下图：

searchMvc.zul

<window title="Search" width="600px" border="normal"apply="tutorial.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>

SearchController.java

public class SearchController extends SelectorComposer<Component> {private static final long serialVersionUID = 1L;@Wireprivate Textbox keywordBox;@Wireprivate Listbox carListbox;@Wireprivate Label modelLabel;@Wireprivate Label makeLabel;@Wireprivate Label priceLabel;@Wireprivate Label descriptionLabel;@Wireprivate 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(){Set<Car> selection = ((Selectable<Car>)carListbox.getModel()).getSelection();if (selection!=null && !selection.isEmpty()){Car selected = selection.iterator().next();previewImage.setSrc(selected.getPreview());modelLabel.setValue(selected.getModel());makeLabel.setValue(selected.getMake());priceLabel.setValue(selected.getPrice().toString());descriptionLabel.setValue(selected.getDescription());}}}

附

注：本文在原文基础上进行浓缩，省略了建立ZK项目过程。此外，4.构建用户界面和5.处理UI逻辑这两个部分，原文一步一步十分详细，而本文进行了精炼，不足之处还请见谅。

原文传送门：http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC

源代码下载地址：http://sourceforge.net/projects/zkbook/files/GettingStarted/getzkup-20131127.zip/download

ZK下载地址：http://www.zkoss.org/download/zk

ZK 特点&版本：http://www.zkoss.org/WhyZK/features