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 findAll();
     
    /**
     * search cars according to keyword in  model and make.
     * @param keyword for search
     * @return list of car that match the keyword
     */
    public List search(String keyword);
}

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

4.构建用户界面

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

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

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

search.zul代码如下：

	
		Keyword:
		
		
	
	
		
			
			
			
		
	    
	        
	        
	        $
	    
	
	
		
		
			
			
			
			
		
	

5.处理UI逻辑 

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

ZK项目结构如下图：

searchMvc.zul

	
		Keyword:
		
		
	
	
		
			
			
			
		
		
	
	
		
		
			
			
			
			
		
	

SearchController.java

public class SearchController extends SelectorComposer {
	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 result = carService.search(keyword);
		carListbox.setModel(new ListModelList(result));
	}
	
	@Listen("onSelect = #carListbox")
	public void showDetail(){
		Set selection = ((Selectable)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