原文地址: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 Studio的安装包,以及相关的文档或示例代码,帮助用户快速开始使用ZK Studio进行开发。安装ZK Studio到Eclipse中,开发者可以充分利用其特性,提升ZK应用的开发体验和效率。 总结来说,ZK ...
Thinkkrz可能是ZK32的一个版本或者与之相关的开发团队或项目名,而"zk32+9999zk.com"可能是一个特定版本号或者支持网站的URL。 描述“Librerias ZK 32 Bits Windows”进一步确认这是针对Windows操作系统的ZK32库...
zk后台api很全的,对于学习ZK很有用的。
《ZK+Spring+Hibernate整合详解》 ZK、Spring和Hibernate是Java开发中的三大重要框架,它们分别在用户界面、依赖注入与事务管理、持久层操作方面发挥着关键作用。将这三者进行整合,可以构建出高效、稳定且易于维护...
ZK 是一个基于 Java 的轻量级Web框架,专门用于构建富客户端的Web应用程序。它提供了丰富的用户界面组件和事件处理机制,使得开发者能够轻松创建交互式的Web应用。本篇文章将深入探讨ZK框架的基本概念、开发环境的...
ZK,全称为ZK Framework,是一个开源的Java Web组件库和事件驱动框架,主要用于构建富客户端用户界面。ZK以其独特的服务器端组件模型和事件处理机制,为开发者提供了便捷的用户界面开发体验,尤其在企业级应用中广泛...
ZK开发手册和注意事项 ZK是一个基于Java的开源Ajax Web应用框架,它允许开发者创建富互联网应用(RIA)。ZK框架基于服务器端技术,其特性在于能够在不需要AJAX和JavaScript编程的情况下,提供强大的前端组件和应用...
ZK,全称为ZooKeeper,是由Apache软件基金会开发的一个分布式协调服务框架,它为分布式应用提供一致性服务,包括命名服务、配置管理、集群管理、分布式锁等。本资料包是针对ZK框架的学习资源,旨在帮助用户深入理解...
【标题】"zkstudio_2.0.1_indigo" 是一个特定版本的ZK Studio,它是基于Eclipse Indigo开发的一款专为ZK框架设计的集成开发环境(IDE)。ZK Studio是ZK框架的官方插件,它提供了一系列便利工具,用于提升ZK应用的...
《ZK4500SDK:中控指纹仪的开发与应用》 在信息技术日新月异的时代,生物识别技术已经广泛应用于各个领域,其中指纹识别作为一种安全且便捷的身份验证方式,尤其受到青睐。ZK4500SDK是中控科技针对其ZK4500指纹仪...
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-...
在IT行业中,ZK是一个流行的Java桌面应用框架,它允许开发者构建富客户端用户界面而无需深入JavaScript编程。ZK框架提供了MVC模式的组件化开发,使得前后端分离变得更加简单。这里的"ZK所需jar包"指的是为了在项目中...
ZK Studio Eclipse Plugin是一款专为ZK框架开发者设计的集成开发环境插件。ZK框架是一种基于组件模型的Java Web应用框架,它简化了用户界面的构建和维护,提供了丰富的客户端组件和事件处理机制,同时支持服务器端的...
ZK是一个开源的Ajax Web框架,它简化了创建富互联网应用程序(RIA)的过程,减少了编程的复杂性。在SourceForge.net上,ZK被评为第1个Ajax项目,它的核心理念是“Simply Rich”,即提供简单途径实现丰富的Web应用...
由于提供的文件信息中,有关股票知识的部分占据了大部分内容,而与标题“ZK框架:Ajax开发实战”相关的内容并未在文件中明确出现,因此无法直接从给定的文件信息中生成与ZK框架和Ajax开发相关的内容。不过,我将基于...
在实际开发中,你需要将"zkmob-bin-0.8.10"解压后,将库文件导入到Android Studio项目中,并按照文档指示配置项目设置,然后就可以开始使用ZK Mobile的组件和API来创建和管理你的用户界面了。同时,不断地学习和参考...
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 6 学习资料是一套全面的资源集合,专为想要深入理解和掌握ZK 6框架的开发者设计。ZK是一个Java为基础的用户界面(UI)框架,它简化了构建富互联网应用程序(RIA)的过程,特别是对于企业级应用。这个压缩包包含了...