- 浏览: 88672 次
- 性别:
最新评论
-
yanhua:
很好很好很好很好很好很好很好很好很好很好
是什么让BS软件变得如此脆弱 -
sonymusic:
似乎有很多代码来查找,我很久以前写过一个命令行的java程序来 ...
查看Class从那个jar文件加载及在jar文件中查找Class -
yanhua:
ViewScope出现不能序列化的问题是因为:<cont ...
讨论:如何处理SessionScope和序列化自己的关系? -
pujialei:
myeclipse加了jaf2 mojarra实现的2个包,能 ...
JSF2.0——编写复合组件更容易 -
marshan:
好文章!<%@page contentType=&quo ...
动态改变RichFaces的皮肤
译注:我对JSF比较熟悉,最近想研究一些其它的事件驱动的基于组件的WEB层框架,继Wicket和GWT之后,我开始仔细学习了一下ZK,虽然之前说的那几种框架也各有很多的优点,但ZK还是给了我很强的冲击。肤浅的总结一下:
我现在还在学习,上面只是粗浅的认识,下面是关于ZK5的一篇文章,我照着文章几分钟就做出了一个还挺漂亮的示例,现在把它翻译一下。 |
简介
从ZK 5开始,开发者不仅能(继续)享受使用服务器为中心的便利开发方式,而且还能使用客户端编程进行全面的控制。二者可以按需选择。这篇文章中将为您分别演示使用服务器为中心的模式和客户端/服务器混合模式来编写一个真实的应用。
应用: ZK Finance(ZK 财经)
ZK finance 是一个真实的应用,用户可以查找一个股票的历史价格,并通过一个表格和图表来显示结果。下面是一个界面图,在左面板上有一个搜索框,右边是显示结果的表格和图表。
纯粹的服务器处理方式
首先我们使用服务器端编程来实现这个应用,我们使用MVC (Model-View-Controller) 模式。
模型
这里有两个对象——股票和价格。它们是一对多的关系,一支股票有多个历史价格。
Stock.java
public class Stock { private int _id; private String _name; private List _priceItems = new ArrayList(); .... getter and setter methods }
Price.java
public class Price { private String _date; private double _open; private double _high; private double _low; private double _close; private int _volumn; .... getter and setter methods }
然后我们创建一个DAO对象来负责提供股票数据,StockDAO.java
public class StockDAO { private List stocks = new LinkedList(); public Stock getStock(int id) {} public List findAll() {} }
View
提供一个搜索功能在listbox中显示搜索的结果
index.zul
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?> <borderlayout id="main" apply="StockController"> <west title="ZK Finance" size="250px" flex="true" splittable="true" minsize="210" maxsize="500" collapsible="true"> <panel> <toolbar> <label value="Search:" /> <textbox id="searchBox" ctrlKeys="#down#up" focus="true" sclass="demo-search-inp" /> </toolbar> <panelchildren> <listbox id="itemList" model="@{main$composer.stocks}" fixedLayout="true" vflex="true"> <listitem self="@{each='stock'}" value="@{stock}"> <listcell label="@{stock.name}" /> </listitem> </listbox> </panelchildren> </panel> </west> <center> <include id="detail"/> </center> </borderlayout>
我们使用一个数据表格和图表来显示价格
price.zul
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?> <window id="main2" apply="PriceController"> <grid id="history" model="@{main2$PriceController.prices}" > <columns menupopup="auto"> <column label="Date" /> <column label="Open" /> <column label="High" /> <column label="Low" /> <column label="Close" /> <column label="Volumn" /> </columns> <rows> <row self="@{each='price'}"> <label value="@{price.date}"/> <label value="@{price.open}"/> <label value="@{price.high}"/> <label value="@{price.low}"/> <label value="@{price.close}"/> <label value="@{price.volumn}"/> </row> </rows> </grid> <chart id="line" width="500" height="250" type="line" fgAlpha="128" model="@{main2$PriceController.cateModel}"/> </window>
Controller
搜索功能
在StockController.java中我们给TextBox注册一个onChanging事件的监听器,当用户输入时我们搜索股票并把结果显示在ListBox中
StockController.java
public class StockController extends GenericForwardComposer { Textbox searchBox; Listbox itemList; Include detail; StockDAO dao = new StockDAO(); private static String DETAIL_URL = "price.zul"; public void onCreate$main(){ itemList.setSelectedIndex(0); Events.postEvent(new Event(Events.ON_SELECT, itemList)); } public void onSelect$itemList(){ int id = ((Stock)itemList.getSelectedItem().getValue()).getId(); detail.setSrc(DETAIL_URL + "?id=" + id); } public void onChanging$searchBox(InputEvent event) { String key = event.getValue(); LinkedList item = new LinkedList(); List items = dao.findAll(); if (key.trim().length() != 0) { for (Iterator iterator = items.iterator(); iterator.hasNext();) { Stock st = (Stock) iterator.next(); if (st.getName().toLowerCase() .indexOf(key.toLowerCase()) != -1) item.add(st); } itemList.setModel(new ListModelList(item)); } else itemList.setModel(new ListModelList(items)); } public List getStocks(){ return dao.findAll(); } }
当用户点击任何一支股票,onSelect事件被触发,onSelect$itemList()这个监听方法被执行,然后重新加载price.zul,显示这支股票的历史价格。
在表格和图中显示股票的历史价格
在PriceController.java中我们得到股票的历史价格的数据并为图表构建一个合适的模型。
PriceController.java
public class PriceController extends GenericAutowireComposer { private StockDAO dao = new StockDAO(); private CategoryModel cateModel; private List items; public PriceController() { init(); } public void init() { //get stock id int id = Integer.parseInt((String) Executions.getCurrent().getParameter("id")); Stock stock = dao.getStock(id); items = stock.getPriceItems(); //create category model for chart cateModel = new SimpleCategoryModel(); for (Iterator iterator = items.iterator(); iterator.hasNext();) { Price price = (Price) iterator.next(); cateModel.setValue(stock.getName(), price.getDate(), price.getClose()); } } public List getPrices(){ return items; } public CategoryModel getCateModel() { return cateModel; } }
Server+client混合模式
除了上面的纯粹的服务器编程方式,我们再介绍一种混合模式。 我们想提高搜索的响应速度,那可以把相应的代码移到客户端。下面我们用搜索功能做一个例子。
修改现有的代码
为了在客户端实现搜索功能,首先我们要加载股票数据到客户端,我们使用一个include组件从服务器端加载data.xml。
<include id="data" src="data.xml" comment="true"/>
其次在服务器端的控制器(StockController.java) 可以不要了,它的功能将在客户端实现。
<borderlayout id="main">
另外我们不再在服务器端生成股票列表了,把这部分相关的服务器端代码也除去。
<listbox id="list" rows="10" width="300px">
客户端编程
为了在客户端实现搜索功能,我们为listbox 创建一个更新方法来生成用户搜索的股票项目。
<zk xmlns:w="http://www.zkoss.org/2005/zk/client"> .... <listbox id="list" rows="10" width="300px"> <attribute w:name="update"><![CDATA[ (function () { var data; function loadData(w) { var xmlDoc = zUtl.parseXML(jq(w).html().replace(/^<!--|-->$/g, '').trim()), ids = xmlDoc.getElementsByTagName("id"), labels = xmlDoc.getElementsByTagName("name"); data = []; jq(ids).each(function (i) { data.push({id: this.firstChild.nodeValue, label: labels[i].firstChild.nodeValue}); }); } function createItems (listbox, data) { if (!data.length) return; jq(data).each(function () { listbox.appendChild(new zul.sel.Listitem({label: this.label, uuid: this.id})); }); } return function (txt) { txt = txt || ''; if (!data) loadData(this.$f('data')); this.clear(); createItems(this, jq.grep(data, function (item) { return item.label.toLowerCase().indexOf(txt.toLowerCase()) != -1; })); this.stripe(); }; })() ]]></attribute> </listbox>
- $f (id), a way to get fellow component. It is the same as getFellow(id), i.e., an alias of getFellow.
- http://www.zkoss.org/2005/zk/client is the so-called client namespace that tells ZK engines to generate the code at the client-side instead of server-side.
然后我们为textbox注册一个客户端的onChange监听方法,这个将方法调用listbox的update方法去更新listbox。注意我们要声明一个命名空间(w: ),因为这个监听器是在客户端的。
<textbox id="inp" w:onChanging="this.$f('list').update(event.data.value)"/>
此外,我们还要在一开始显示所有的股票,这需要调用注册一个bind_方法来实现初始化,这个方法将调用listbox的update方法。
<listbox id="list" rows="10" width="300px"> <attribute w:name="bind_"> function (desktop, skipper, after) { this.$bind_.apply(this, arguments); var self = this; after.push(function () { self.update(); self.firstChild.setSelected(true); }); } </attribute> .... </listbox>
和服务器端交互
最后,还需要和服务器端交换,用户点击一支股票,需要告诉服务器更新历史价格的表格和图表。在listbox上指定onSelect事件,这样一旦用户点击了一个股票,ZK引擎将给服务器发送一个onSelect事件。
<listbox id="list" onSelect="" rows="10" width="300px">
接下来,为了在服务器端处理onSelect事件, 我们在服务器端实现一个service,通过它我们可以实现股票历史价格的更新:
<listbox id="list" onSelect="" rows="10" width="300px"> .... </listbox> <include id="content" src="price.zul?id=1"/> <zscript> public class MyService implements org.zkoss.zk.au.AuService { public boolean service(org.zkoss.zk.au.AuRequest request, boolean everError) { final String cmd = request.getCommand(); if (cmd.equals(Events.ON_SELECT)) { String uuid = ((List)request.getData().get("items")).get(0); System.out.println("selected:" + uuid); content.setSrc("price.zul?id=" + uuid); return true; } return false; } } list.setAuService(new MyService()); </zscript>
总结
在上文中,我们演示了两种不同的实现方式——纯粹的服务器编程和客户端/服务器混合编程——来实现同一个应用。无论使用哪一种,ZK 5 提供了一种新的方式来平衡易于开发和更多的可控性。
译注:最后上传两张IDE中的截图吧,我用的是ZK3.6.2,客户端/服务器端混合编程的方式没有去做。
评论
不过ZK的基于事件驱动和Ajax服务器端的编程方式倒是不错...
WYSIWYG的ZK studio也很诱人...
发表评论
-
用Word和在线工具快速制作6寸PDF
2012-11-14 23:37 1296http://yanhua365.org/posts/b ... -
是什么让BS软件变得如此脆弱
2012-11-14 22:56 1690原文链接。 一个 ... -
讨论:如何处理SessionScope和序列化自己的关系?
2010-07-17 10:43 3068事情的起因是这样的:我想使用JSF2.0的ViewScope的 ... -
安装rails2.3.3环境
2009-11-21 17:42 1424以前学习rails都是下载一个netbeans,在jruby上 ... -
和一个朋友关于快速开发的对话
2009-07-22 17:31 1375Alex_朋友 说: 你看过金 ... -
JSF中不同种类的managed-beans
2009-05-18 16:46 2016在icefaces的博客上看到一篇文章——Making dis ... -
为icefaces的表格组件实现延迟加载的DataModel
2009-05-18 16:40 3258这篇文章摘译自IceFaces ... -
RichFaces要换了个LOGO,看看备选图案吧
2009-05-13 11:04 1302... -
检查jar文件编译版本的groovy脚本
2009-04-20 14:25 1547写了一段检查jar是不是1.6编译的groovy脚本,没有优化 ... -
好消息:GAE开始支持java,GWT1.6发布,而且有了Google Eclipse插件
2009-04-08 15:12 1480现在到 Google Web Toolkit (GWT)提供的 ...
相关推荐
《Zookeeper源码解析——基于zk-src-5.0.7.1》 Apache ZooKeeper,简称ZK,是一款开源的分布式协调服务,它为分布式应用提供一致性服务,包括命名服务、配置管理、组服务、分布式同步和分布式锁等。在ZK 5.0.7.1...
主要介绍了zk+spring+hibernate的使用方法 早期使用的是 hibernate的配置文件 后来 被改成了 引用注释的方式 老的绑定文件也没有删除,sql下面由数据库文件 导入mysql就可以,不错的教学例子 学习起来很简单
zk5.0.7API 是ZK框架:Ajax开发实战对应的手册
《ZK+Spring+Hibernate整合详解》 ZK、Spring和Hibernate是Java开发中的三大重要框架,它们分别在用户界面、依赖注入与事务管理、持久层操作方面发挥着关键作用。将这三者进行整合,可以构建出高效、稳定且易于维护...
ZK Finger SDK 5.0 是一款专门用于生物识别技术,特别是指纹识别的软件开发工具包。这个SDK为开发者提供了一整套的功能,使他们能够轻松地在自己的应用程序中集成指纹识别功能。以下是对该SDK及其相关文件的详细说明...
ZK(Zookeeper)是一个分布式的,开放源码的分布式应用程序协调服务,它是集群的管理者,监视着集群中各个节点的状态根据节点提交的反馈进行下一步合理操作。最终将简单易用的接口和性能高效、功能稳定的系统提供给...
在IT行业中,`ZK`(ZooKeeper)、`Spring`和`Hibernate`都是非常重要的技术组件,分别在分布式协调、应用框架和对象关系映射领域有着广泛应用。本项目是将这三个技术进行整合,用于构建一个基于MySQL数据库的完整...
【标题】"eclipse springboot+dubbo+zk+mybatis restful编程风格"涉及的关键技术栈包括了Eclipse IDE、Spring Boot、Dubbo、Zookeeper以及MyBatis,并且采用了RESTful编程风格。这些组件共同构成了一个高效、可扩展...
使用zk+spring+hibernate+mysql做的demo,只需要修改下MySQL连接字符串就可以运行。因为容量 有点大。分卷压缩了,请先下载zk+spring+hibernate+mysql demo(),下全后解压。
综合以上信息,这个压缩包适合对Zookeeper感兴趣的开发者,他们可以通过运行`fckez.jar`、设置和启动`zk-bin-5.0.0-RC`,以及探索`zk_demo`或`zk-demo-5.0.z`来学习Zookeeper的使用、配置和API。通过这些实践,...
综合来看,"ZK+Spring+Hibernate"项目搭建涉及了前端UI展现、后端业务逻辑处理、数据持久化和数据库管理等多个层面,这种技术栈的组合可以实现高度模块化的应用开发,便于团队协作和后期的维护升级。在实际操作中,...
ZK以其事件驱动模型和服务器端渲染技术而闻名,它简化了用户界面的开发,提供丰富的组件库,允许开发者无需编写JavaScript就能实现动态交互功能。 **Spring框架** 是一个全面的企业级应用开发框架,它支持依赖注入...
使用zk+spring+hibernate+mysql做的demo,只需要修改下MySQL连接字符串就可以运行。因为容量有点大。分卷压缩了,请下全后解压。
本资源包涵盖了"Dubbo+SSM+Zookeeper"这一经典组合,旨在帮助开发者更好地理解和运用这些技术,构建高效、可扩展的系统。以下是对各组件及其交互的详细解析。 一、Dubbo:高性能的服务框架 Dubbo是阿里巴巴开源的...
客户端是Curator Framework,是Apache的项目,它主要的功能是为ZK的客户端使用提供了高可用的封装。在Curator Framework基础上封装的curator-recipes,实现了很多经典场景。比如:集群管理(Leader选举)、共享锁、...
"ZK+SpringMVC+Ibatis"是一个常见的企业级应用开发框架组合,它整合了三个强大的技术:ZK作为用户界面的展示层框架,SpringMVC作为控制层框架,而Ibatis则作为数据访问层的持久化工具。这个系统的构建旨在提供高效、...
3. **开发环境**:使用ZK32 SDK时,开发者通常需要有合适的开发环境,如Visual Studio或其他支持C/C++编程的IDE,以便能够编译和调试利用这些库的代码。 4. **生物识别技术**:ZK32库的核心功能可能涉及多种生物...
ZK+Spring+Hibernate jar包名稱
描述中提到的“启动bat脚本,输入连接ip”,这通常是指在Windows环境下,使用Zookeeper提供的zkServer.cmd脚本来启动服务,然后通过zkCli.cmd客户端工具连接到Zookeeper服务器。连接时,用户需要输入Zookeeper服务器...
1. **ZK框架**:ZK提供了事件驱动的组件模型,使得开发者可以通过拖拽和配置方式快速构建UI。了解ZK的组件体系、事件机制以及布局管理器是必要的。 2. **SpringMVC**:掌握SpringMVC的基本工作流程,包括请求的分发...