zk开发教程

javarun

贡献于2017-12-01

字数:25164 关键词: ZK JavaScript框架

ZK开发关键知识点 前言 本文是对ZK开发过程中必须掌握的关键知识点的总结,针对目前对新版本zk-6.5.2 关于ZK是什么参见前一篇博客 《ZK(The leading enterprise Ajax framework)入门指南》 http://blog.csdn.net/daquan198163/article/details/9304897 1. 页面布局 ZK具有非常高的开发效率(以至于可以取代HTML用来完成高质量的Fast Prototyping),最主要缘自它采用的页面布局技术——ZUL; 采用XML语言以声明式的方式创建用户界面——XML UI技术并不是ZK的独创,Android UI、JavaFX、Microsoft Silverlight和Mozilla XUL等开发 框架都采用了这种技术,这是目前最先进的构造用户界面技术; ZUL只不过是为所有ZK组件指定了一个对应的XML Element,然后通过这些Element以声明式的方式定义页面由哪些组件以什么样的方式构成。 相对于Java编程式方式,这种声明式方式的优点十分明显: · 直观:ZUL代码结构与页面布局完全一致(而且必须一致),ZUL元素的嵌套关系就是页面组件的嵌套关系,ZUL元素的前后并列关系就 · 是页面组件的前后摆放;而Java编程方式与最终页面却没有这种一致性; · 代码简洁:由于XML在表达页面布局时语义的先天优势(一致性),同样的页面用ZUL比Java代码量要少得多; 直观、简洁的代码意味着容易理解、容易编写、容易修改维护、不容易出错,因此带来开发效率上的巨大优势。 值得注意的是,上述ZUL相对于Java编程的优势也适用于JS,比如EXT、DOJO等JS UI框架。 1.1. 布局组件 1.1.1. 东西南北中布局Borderlayout Borderlayout将屏幕划分成东西南北中五个区域,如下图所示,其灵活性可以实现绝大多数系统的首页整体布局。 首先纵向看,要指定N和S的高度,剩下中间部分就是W C E的高度;然后水平看,N S宽度百分百,中间部分指定W E的宽度后, 剩下的部分就是C了。 由于Center大小不是自己决定的,当里面摆放组件过多显示不全时,可以指定autoscroll="true"产生滚动条。 1.1.2. 基本布局 Borderlayout适合于实现大的页面结构布局,在页面局部最常见的需求就是如何将各种组件有序的摆放:有时需要水平摆放有时需要垂直摆放, 还要考虑居中居左居右问题、摆不下的问题(摆放不下时要有滚动条); ZK提供了更细粒度的布局组件——hbox/vbox/hlayout/vlayout用于实现这些常见需求; hlayout和hbox(h代表horizon水平)用于水平布局,vlayout和vbox(v代表vertical垂直)用于垂直布局,它们是最常用的的容器组件,里面可以 放任意多的组件; hbox vbox与hlayout vlayout的区别: · Hbox and Vbox provide more functionalities such as splitter, align and pack. · However, their performance is slower, · so it is suggested to use Hlayout and Vlayout if you'd like to use them a lot in a UI, unless you need the features that only Hbox and Vbox support. 1.2. 各种容器组件 1.2.1. groupbox 企业应用往往需要在一个页面中显示大量信息或组件,如果随意摆放或只是简单的罗列,会让用户感觉很混乱难以使用,用户体验不好。 groupbox顾名思义就是用来分组布局的组件,它就像收纳盒一样可以把页面组件分门别类的摆放,标题栏可以清晰的标识分类名称,而且可收缩。           ……………… 1.2.2. tabbox页签 像ZK这样的RIA框架做出来的系统基本上SinglePage的(整个系统只有一个页面,其它都是组件和AJAX), 同时企业应用不同于网站,用户需要打开很多视图查看各种数据和表单,因此普遍采用“多页签布局”来保证系统的方便易用。 ZK提供了tabbox组件方便的实现多种形式的页签: 默认水平排列页签                                          This is panel A         This is panel B      纵向排列页签                                          This is panel A         This is panel B      最新zk-7支持下方的水平排列页签。 另外只需设置属性 mold="accordion"就可以把页签变成可纵向滑动伸缩的“抽屉”式页签: 纵向排列页签                                          This is panel A         This is panel B      1.2.3. window与panel window和panel是GUI最常见的容器形式,可以在里面放置任意多的组件; 它们不同于其它容器之处在于可以关闭、最小化、最大化、模态显示(始终显示在最前面,除非最小化或关闭)、可拖动; 但是window和panel也有两个很小的区别: · window是一个独立的idspace,而panel不是;因此panel内部的组件与panel外部的是一样的; · panel智能在自己的parent组件范围内移动,而window可以在整个页面移动; 在ZK中创建一个窗口并以模态显示,代码如下: //create a window programmatically and use it as a modal dialog.        Window window = (Window)Executions.createComponents("/widgets/window/modal_dialog/employee_dialog.zul",null,null); window.doModal(); 一个简单的窗口页面:            ………………      详见 http://www.zkoss.org/zkdemo/window/modal_dialog 1.3. Messagebox对话框 · Warning :      Messagebox.show("Warning is pressed", "Warning", Messagebox.OK, Messagebox.EXCLAMATION); · Question:      Messagebox.show("Question is pressed. Are you sure?", "Question", Messagebox.OK | Messagebox.CANCEL, Messagebox.QUESTION); · Information:        Messagebox.show("Information is pressed", "Information", Messagebox.OK, Messagebox.INFORMATION); · Error:                 Messagebox.show("Error is pressed", "Error", Messagebox.OK, Messagebox.ERROR); · Confirm Dialog:详见http://www.zkoss.org/zkdemo/window/message_box 2. MVC ZK虽然支持在ZUL脚本语言编程,但显然更正规也更有效的开发模式是把交互逻辑放到后台Java代码中实现,MVC模式正是这样的风格。 ZK MVC很简单:页面apply指定Controller、Controller中注入页面组件、Controller方法监听页面事件并修改操纵页面组件; 详见 http://www.zkoss.org/zkdemo/getting_started/mvc 2.1. MVC基本原理示例 1 2 3 4 5 6 7 8 9 10 11 public class SearchController extendsSelectorComposer {     @Wire   privateTextbox keywordBox;//注入页面组件     @Wire   privateListbox carListbox;//注入页面组件           @Listen("onClick = #searchButton")   //监听页面事件     publicvoidsearch(Event event){         Button searchButton = (Button) event.getTarget();         String keyword = keywordBox.getValue();         List result = carService.search(keyword);         carListbox.setModel(newListModelList(result));//操纵页面组件(显示数据或改变状态)     } 其中2、3行代码将页面中id为keywordBox和carListbox的组件注入Controller作为实例变量,后面方法中对它们进行的修改将被ZK框架自动同步到前端页面上去; 第5行代码为方法注册了页面事件监听器——页面中id为searchButton的组件的onClick事件发生时调用此方法, 组件以及事件监听的表达式详见:http://books.zkoss.org/wiki/Small_Talks/2011/January/Envisage_ZK_6:_An_Annotation_Based_Composer_For_MVC 2.2. MVC forward事件处理 当页面组件很多时,如果只用onClick等少数内建事件进行监听会显得混乱。 forward可以用来将某个组件上发生的内建事件转发到外层并取别名,示例如下:                  controller事件处理代码 1 2 3 @Listen("onDetail= #mywin")//监听mywin的onDetail事件     publicvoidonDetail(ForwardEvent e) {         MouseEvent me = (MouseEvent) e.getOrigin();//获取源事件 4 5         System.out.println(me.getData());//获取参数     } 3. MVVM 3.1. MVVM Binding 3.1.1. Binding绑定概述 Binding(绑定)是Web框架最重要特性之一,Binding没有一个统一的定义,通常的Binding是指: 在 页面元素 与 后台(Controller)组件字段 之间建立起链接,使得后台数据(及其变化)可以显示(同步更新)到页面, 同时用户在页面的输入(修改)也可以传递(更新)到后台; 从这个定义可以看出,Binding是很常见的需求,如果不采用Binding技术,那么手工完成上述工作(如request.getParameter或setAttribute) 会十分的繁琐无聊,产生大量重复代码; 3.1.2. 复杂类型Binding 幸好ZK的MVVM数据绑定非常强大——支持任意复杂类型,例如枚举类型: ? class ComboitemRenderer4UserTypeCc implements ComboitemRenderer {     @Override     public void render(Comboitem item, USER_TYPE_FOR_CC data, int index) throws Exception {         item.setLabel(data.getText());     } } 3.1.3. Binding标签 而且用起来很简单——只要三个标签(@load、@save、@bind)就可以实现各种类型的数据绑定: · @load 用来从后台读数据显示在页面; · @save 用来将页面输入的信息传递给后台绑定的组件字段; · @bind 是@load加@save; 3.1.4. Binding表达式 标签中还可以运用复杂表达式,例如: · 日期格式转换:

下载文档,方便阅读与编辑

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享文档获得金币 ]
1 人已下载

下载文档

相关文档