原文地址:http://zkoss.org/doc/tutorial.dsp#example
[size=16px;]
介绍[/size]
此教程的目的是通过一个小例子来说明ZK有多大的魔力。如果你想要入门教程,请看这里:
Step by Step Tutorial
[size=16px;]
*一个真实的例子[/size]
[size=16px;]
*数据模型[/size]
[size=16px;]
*标准方法(不使用数据绑定)[/size]
[size=14px;]
**使用ZK标记语言设计用户接口页面[/size]
[size=14px;]
**使用Java来控制UI组件[/size]
[size=16px;]
*进阶方法(使用数据绑定)[/size]
[size=14px;]
**定义数据Bean和UI组件之间的关系[/size]
[size=14px;]
**修改Java文件[/size]
[size=16px;]
*安装Web应用[/size]
[size=16px;]
一个真实的例子[/size]
我们的例子是一个使用了Google地图的观光网站。页面由左边的表格,右边的Google地图以及底部的矩形区域三部分组成。
AJAX应用:当你从表格中选择一项时,选中项的地址将会在Google地图中显示出来,并且它的坐标将会在下方的矩形区域中显示。
[size=16px;]
数据模型[/size]
此程序的数据模型很简单;只包含如下四个属性:名称,属性,维度和经度。
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;]
标准方法(不使用数据绑定)[/size]
首先让我们通过一个简单的方法来体验ZK的魔力(不使用ZK提供的功能)。
[size=14px;]
使用ZK标记语言设计用户接口页面[/size]
首先我们来编写此应用的显示文件: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=ABQIAAAACZ90QS5pNiEvbXhI0k2NLRTGXUEQDrMr1bP0DVG
8X36ZVCheaRQMK05Rsdneh4skNF6KXaLI8maLlA" 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组件[/size]
在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万の光ファンタジーと都内最大級15mのツリー!",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;]
进阶方法(使用数据绑定)[/size]
为了简化维护数据,数据bean以及用户接口间的数据统一的工作,ZK提供了数据绑定。你只需要简单的定义"模型"(数据bean)和"视图"(UI组件)之间的关心,ZK将会自动的同步他们之间的数据。
[size=14px;]
定义数据Bean和UI组件之间的关系[/size]
一个简单的方法就是直接在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=ABQIAAAACZ90QS5pNiEvbXhI0k2NLRTGXUEQDrMr1bP0DVG
8X36ZVCheaRQMK05Rsdneh4skNF6KXaLI8maLlA" 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文件[/size]
由于数据绑定,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万の光ファンタジーと都内最大級15mのツリー!",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应用[/size]
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
- 大小: 112 KB
分享到:
相关推荐
zk web框架 zk web框架 zk web框架 zk web框架 zk web框架 zk web框架 zk web框架 zk web框架 zk web框架 zk web框架 zk web框架 zk web框架 zk web框架 zk web框架 zk web框架
zk后台api很全的,对于学习ZK很有用的。
ZK开发手册 ZK开发手册 ZK开发手册 ZK开发手册 ZK开发手册
最新版 ZK SRC最新版 ZK SRC最新版 ZK SRC最新版 ZK SRC最新版 ZK SRC最新版 ZK SRC最新版 ZK SRC最新版 ZK SRC最新版 ZK SRC
zk-6.5.0.zip ZK 6.5.0 Sep 12, 2012 * Features ZK-447: The file upload allows users to drag and drop local files (HTML5) ZK-1241: ZK Client Widget support swipe event for tablet/mobile device ZK-...
ZK 8.0.0端参考 ZK 8.0.0组件开发的必需品 ZK 8.0.0组件引用 ZK 8.0.0配置参考 ZK 8.0.0开发人员的参考 ZK 8.0.0风格定制指南 ZK 8.0.0 ZUML参考 zk-mvvm-book
ZK包括一个基于AJAX事件驱动的引擎(engine),一套丰富的XUL和XHTML,以及一种被称为ZUML(ZK User Interface Markup Language,ZK用户界面标记语言)的标记语言。 有了ZK,您可以利用XUL和XHTML的丰富特性来呈现您的...
ZK 5.0.5 Component Reference ZK 5.0.5 Configuration Reference ZK 5.0.5 Style Guide ZK 5.0.5 ZUML Reference
Librerias ZK 32 Bits Windows
最新的zk核心jar用到zk的可以下载很实用的东西
zk studion plugins zk studion plugins
ZK资料学习zk框架的助手,带你步入zk的殿堂。。。。。
ZK Eclipse插件 解压至文件夹,如D:\Program Files\MyEclipse 8.5\zkstudio 在Eclipse安装目录下的dropins目录添加link文件如,zk.link,文件内容如下: path=D:\\Program Files\\MyEclipse 8.5\\zkstudio
zk的chm版的api英文帮助文档. 本人自己制作的。 zk是台湾的一个纯ajax框架。
SIMPLY RICH ZKTM The Developer's Reference Version 3.0.1 ZK的介绍,功能、组建的使用...
zk studion plugins zk studio eclipse plugin
zk框架的入门介绍,刚开始学习和接触zk框架的伙伴可以看看,不错的资料
zk项目搭建文档,用于zk项目的mvvm模式的 开发 项目。
ZK开发手册中文版 ZK开发手册中文版 ZK开发手册中文版 ZK开发手册中文版 ZK开发手册中文版
zk实践战 基于zk开发新闻发布系统,目前在国内很少用zk框架开发,在今后必定是发展的趋势。。