开始ZK之旅

Ivan_Pig

原文地址：http://zkoss.org/doc/tutorial.dsp#example

[size=16px;]介绍

     此教程的目的是通过一个小例子来说明ZK有多大的魔力。如果你想要入门教程，请看这里：Step by Step Tutorial

     
[size=16px;]*一个真实的例子

[size=16px;]*数据模型

[size=16px;]*标准方法（不使用数据绑定）

[size=14px;]  **使用ZK标记语言设计用户接口页面

[size=14px;]  **使用Java来控制UI组件

[size=16px;]*进阶方法（使用数据绑定）

[size=14px;]  **定义数据Bean和UI组件之间的关系

[size=14px;]  **修改Java文件

[size=16px;]*安装Web应用


[size=16px;]一个真实的例子

      我们的例子是一个使用了Google地图的观光网站。页面由左边的表格，右边的Google地图以及底部的矩形区域三部分组成。



     AJAX应用：当你从表格中选择一项时，选中项的地址将会在Google地图中显示出来，并且它的坐标将会在下方的矩形区域中显示。

[size=16px;]数据模型

    此程序的数据模型很简单；只包含如下四个属性：名称，属性，维度和经度。
      
public class Resort { private String _name; private String _description; private Double _latitude; private Double _longitude;  public Resort(){}; public Resort(String name, String description, Double latitude, Double longitude) {  _name = name;  _description = description;  _latitude = latitude;  _longitude = longitude; } // getter and setter methods are omitted. } 


[size=16px;]标准方法（不使用数据绑定）

    首先让我们通过一个简单的方法来体验ZK的魔力（不使用ZK提供的功能）。

[size=14px;]使用ZK标记语言设计用户接口页面
  
    首先我们来编写此应用的显示文件：resort.zul;它包括一个listbox(table),一个Google地图和一个矩形区域。
    你会发现，resort.zul有多么的整洁清晰，不含任何的Java代码或者脚本片段，所有的这些代码都定义在一个单独的Java文件里面----ResortController.java里。
     zul文件和Java文件之间的互动由用户的操作来触发。当用户在listbox里面选择了一项，就会触发listbox的onSelect事件，并且ResortController.java里的refreshUI()方法将会执行，在Google地图中显示所选项及其坐标。
<!-- resort.zul --><window id="win" use="org.zkforge.resort.ui.ResortController" title="ZK Tutorial" width="1024px" border="normal"><script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAACZ90QS5pNiEvbXhI0k2NLRTGXUEQDrMr1bP0DVG8X36ZVCheaRQMK05Rsdneh4skNF6KXaLI8maLlA" type="text/javascript"/> <hbox><listbox id="lb" onSelect="win.refreshUI()">  <listhead sizable="true">   <listheader label="Name" width="100px"/>   <listheader label="Description" width="250px"/>     </listhead>  <listitem forEach="${win.resorts}" value="${each}">   <listcell label="${each.name}" />   <listcell label="${each.description}" />     </listitem> </listbox><gmaps id="gmap" zoom="16" showTypeCtrl="true" mapType="satellite" showLargeCtrl="true" width="610px"  height="400px">  <ginfo id="ginfo"/> </gmaps> </hbox><groupbox mold="3d" width="100%">  <caption label="Resort"/>  Name:       <textbox id="name" disabled="true"/>  Description:<textbox id="desc" disabled="true"/>   Latitude:   <doublebox id="lat" disabled="true"/>  Longitude:  <doublebox id="lng" disabled="true"/> </groupbox> </window>

[size=14px;]使用Java来控制UI组件
  
     在Java文件ResortController.java里，我们通过ID来获得UI组件，并且把选中项的数据传递给UI组件。接着ZK引擎将会以AJAX的方式自动的刷新页面。
     
<!--ResortController.java -->public class ResortController extends Window {  List _resorts = new ArrayList();   public ResortController(){ _resorts.add(new Resort("La Tour Eiffel","Insolite ! Découvrez la Tour Eiffel autrement.",48.8585599391,2.2945332527));  _resorts.add(new Resort("Buckingham Palace","The official London residence of the sovereign.",51.5013698182,-0.1416689157));  _resorts.add(new Resort("東京タワ","総数4万の光ファンタジーと都内最大級15ｍのツリー！",35.6583487578,139.7457217178));  _resorts.add(new Resort("Der Kölner Dom","Offizieller Name Hohe Domkirche St. Peter und Maria",50.9414206771,6.9586372375)); }   public void refreshUI(){  Listbox lb = (Listbox) getFellow("lb");  Resort resort = (Resort) lb.getSelectedItem().getValue();  ((Textbox)getFellow("name")).setValue(resort.getName());  ((Textbox)getFellow("desc")).setValue(resort.getName());  ((Doublebox)getFellow("lat")).setValue(resort.getLatitude());  ((Doublebox)getFellow("lng")).setValue(resort.getLongitude());    Gmaps gmap = (Gmaps) getFellow("gmap");  Ginfo ginfo = (Ginfo) getFellow("ginfo");  ginfo.setLat(resort.getLatitude());  ginfo.setLng(resort.getLongitude());  ginfo.setContent(resort.getDescription());  gmap.panTo(resort.getLatitude(),resort.getLongitude());  gmap.setZoom(16);  gmap.openInfo(ginfo); } public List getResorts() {  return _resorts; } public void setResorts(List resorts) {  _resorts = resorts; }}

    这个例子说明使用ZK来创建一个AJAX Web应用是如此的简单。显示层和控制层划分很清晰，同时不需要任何的JavaScript代码!我们相信使用AJAX最好的途径是你在不知不觉中就使用了AJAX。

[size=16px;]进阶方法（使用数据绑定）

    为了简化维护数据，数据bean以及用户接口间的数据统一的工作，ZK提供了数据绑定。你只需要简单的定义"模型"(数据bean)和"视图"(UI组件)之间的关心，ZK将会自动的同步他们之间的数据。
   
[size=14px;]定义数据Bean和UI组件之间的关系

    一个简单的方法就是直接在web页中定义此关系。最主要的一个区别就是我们添加一个代表被选中项的数据bean，并且把它绑定到有关联的ZK组件上去。
<!-- resort_databind.zul --><?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?><window id="win" use="org.zkforge.resort.ui.ResortController2" title="ZK Tutorial" width="1024px" border="normal"><script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAACZ90QS5pNiEvbXhI0k2NLRTGXUEQDrMr1bP0DVG8X36ZVCheaRQMK05Rsdneh4skNF6KXaLI8maLlA"  type="text/javascript"/> <hbox><listbox model="@{win.resorts}" selectedItem="@{win.selected}" onSelect="win.refreshUI()">  <listhead sizable="true">   <listheader label="Name" width="100px"/>   <listheader label="Description" width="250px"/>     </listhead>  <listitem self="@{each=resort}">   <listcell label="@{resort.name}" />   <listcell label="@{resort.description}" />     </listitem> </listbox>  <gmaps id="gmap" zoom="16" showTypeCtrl="true" mapType="satellite" showLargeCtrl="true" width="610px"   height="400px">  <ginfo id="ginfo" lng="@{win.selected.longitude}" lat="@{win.selected.latitude}"  content="@{win.selected.description}"/> </gmaps> </hbox> <groupbox id="gb" mold="3d" width="100%">  <caption label="Resort"/>  Name:<textbox id="name" value="@{win.selected.name}" disabled="true"/>  Description:<textbox  id="desc" value="@{win.selected.description}" disabled="true"/>   Latitude:<doublebox id="lat" value="@{win.selected.latitude}" disabled="true"/>  Longitude:<doublebox id="lng" value="@{win.selected.longitude}" disabled="true"/>   </groupbox></window>

[size=14px;]修改Java文件

     由于数据绑定，ResortController.java里的代码更加的简洁了。一旦你选择了一个不同的项，数据bean将会百变，随之与此数据bean关联的ZK组件将会自动的更新
<!--ResortController2.java -->  public class ResortController extends Window {  List _resorts = new ArrayList();   Resort _selected = new Resort();  public ResortController(){  _resorts.add(new Resort("La Tour Eiffel","Insolite ! Découvrez la Tour Eiffel autrement.",48.8585599391,2.2945332527));  _resorts.add(new Resort("Buckingham Palace","The official London residence of the sovereign.",51.5013698182,-0.1416689157));  _resorts.add(new Resort("東京タワ","総数4万の光ファンタジーと都内最大級15ｍのツリー！",35.6583487578,139.7457217178));  _resorts.add(new Resort("Der Kölner Dom","Offizieller Name Hohe Domkirche St. Peter und Maria",50.9414206771,6.9586372375)); }   public void refreshUI(){    Gmaps gmap = (Gmaps) getFellow("gmap");  Ginfo ginfo = (Ginfo) getFellow("ginfo");    gmap.panTo(ginfo.getLat(),ginfo.getLng());  gmap.setZoom(16);  gmap.openInfo(ginfo); } public List getResorts() {  return _resorts; } public void setResorts(List resorts) {  _resorts = resorts; } public Resort getSelected() {  return _selected; } public void setSelected(Resort selected) {  _selected = selected; }}

[size=16px;]安装Web应用

1,安装JDK
   如果你还没有安装JDK，请下载并安装。
2,安装Servlet容器
   如果你ihai没有安装Servlet容器，请下载并安装Apache Tomcat
3,下载此Web应用，点击下载
4,解压缩文件
   解压缩resort.zip，复制resort.war到$TOMCAT_HOME/webapps/.
5,运行你的Web Server，使用浏览器浏览如下网：  http://localhost:8080/resort/resort.zul