前端框架ZK自学文档讲解.docx

上传人:b****1 文档编号:437528 上传时间:2022-10-10 格式:DOCX 页数:23 大小:198.24KB
下载 相关 举报
前端框架ZK自学文档讲解.docx_第1页
第1页 / 共23页
前端框架ZK自学文档讲解.docx_第2页
第2页 / 共23页
前端框架ZK自学文档讲解.docx_第3页
第3页 / 共23页
前端框架ZK自学文档讲解.docx_第4页
第4页 / 共23页
前端框架ZK自学文档讲解.docx_第5页
第5页 / 共23页
点击查看更多>>
下载资源
资源描述

前端框架ZK自学文档讲解.docx

《前端框架ZK自学文档讲解.docx》由会员分享,可在线阅读,更多相关《前端框架ZK自学文档讲解.docx(23页珍藏版)》请在冰豆网上搜索。

前端框架ZK自学文档讲解.docx

前端框架ZK自学文档讲解

ZK开发说明

1.什么是ZK

Ø定义:

一种用户界面开发框架。

Ø特点:

基于AJAX事件驱动、丰富的XUL[1]和XHTML[2]、ZUML(ZK用户界面标记语言)。

Ø原理:

✓ZKloader:

由一系列Javaservlets组成,负责接受URLrequest生成相应的HTML页面(包括css,javascript,ZK组件).

✓ZKAU(asynchronousupdate):

即ZK异步更新引擎,负责接收Ajaxrequests,更新ZK组件属性,并将response返回客户端.

✓ZKclientengine:

ZK客户端引擎,由一些列javascript组成,负责监控浏览器javascript事件队列,如果有事件触发就将事件以Ajaxrequests的方式发送到服务器端的ZK异步更新引擎,然后接收ZK异步更新引擎返回的应答更新页面。

2.ZK的优缺点

优点:

1.几乎可不用JS,组件的形式方便复用,便捷开发。

2.界面与服务器端直接交互,可直接使用JAVA对象,比使用dwr或buffalo更方便。

3.

缺点:

IE早期的版本不是标准的W3C规范,所以兼容性会较差。

3.ZK的常用开发说明

3.1.页面与JAVA类关联

页面与Java类关联主要用到2种方式。

一种是写成窗体的形式(window),在页面中指定对应的JAVA类,图1;一种是写成插件的形式(ext),在JAVA类中指定对应的页面,图2。

图1窗体

图2插件

3.1.1.Window

写成Window,在ZUL页面中使用apply或use属性指定对应的JAVA类。

Apply和use的使用方法如下:

Use:

使用一个组件类,该类必须是当前组件对应接口的实现。

方法里面不实现doAfterCompose

Apply:

应用一个构建器类,这个类必须是FullComposer或Composer的实现类或实现类的子类(我们一般是继承GenericForwardComposer)。

apply是帮助类,帮助use类或默认组件类构建当前组件。

可以apply多个类帮助构建,使用逗号隔开。

由于在组件及其子组件初始化之后会调用doAfterCompose方法,所以你可以在doAfterCompose方法内进行初始化。

指定对应的JAVA类时,有两种方式。

一种是直接指定包路径和类名,如

apply="mon.ui.EntityLoadComposer"

一种是通过注释的形式,如

Aapply="${servProdInstMktResourceDetailInfoComposer}”

使用注释的时候,变量名为要指向的类(首字母小写),并且zul页面必须加变量解析器指令。

variable-resolverclass="org.zkoss.zkplus.spring.DelegatingVariableResolver"?

>

3.1.2.Ext

写成ext形式时,在JAVA类的构造函数中用Executions.createComponents绑定对应的ZUL页面(图3)。

createComponents的第一个参数即为zul的页面地址。

Ext页面是用来引用到别的页面上的,相当一个插件。

用法很如下。

首先在zul页面头部声明引用的对象类,并给它取个别名,然后跟写button一样,直接使用。

--页面头部声明-->

componentname="organizationTree"extends="tree"class="mon.ui.sysmgr.OrganizationTree"?

>

--使用-->

vflex="1"/>

3.2.页面加载

ZK加载器(ZKloader)加载并解释页面需要经历四个阶段:

页面初始阶段,组件创建阶段,事件处理阶段及响应阶段。

●页面初始阶段:

在这个阶段,ZK处理处理指令,被称为初始化(init)。

如果并没有定义这样的处理指令,此阶段会被跳过。

对于每个init处理指令都有一个class属性,一个指定类的实例(instance)将会被创建,然后它的doInit方法将会被调用。

initclass="org.zkoss.zkplus.databind.AnnotateDataBinderInit"root="./bulletinEditWindow"?

>

Init只需要写在zul页面中即可,写法如下,其中class固定指定这个类即可,root属性值要唯一,可根据window的id进行更改,写法为root=”./窗体id”。

初始处理指令的另一种形式是使用zscript属性指定包含脚本代码的文件(如下)。

那么在页面初始阶段这个文件将会被解释

initzscript="/my/init.zs"?

>

●组件创建阶段:

在这个阶段,ZK加载器(ZKloader)解释一个ZUML页面,它创建并初始组件。

◆对于window(继承composer类的)可以通过监听onCreate事件或实现AfterCompose接口(doAfterCompose(Componentcomp))来完成一些特定应用程序的初始化。

AfterCompose在组件创建阶段被调用,而onCreate事件是由事件监听器来处理的(即先调用doAfterCompose方法,后调用onCreate方法)。

@Override

publicvoiddoAfterCompose(Componentcomp)throwsException{

super.doAfterCompose(comp);//比写

Components.wireVariables(comp,bulletinEditBean);//比写

}

如果你是把页面控件的对象都先在bean类里面,则Components.wireVariables的第二个参数是用bean的名称,如果只是写在Composer类中,则第二个参数只要写this即可。

◆对于Ext,组件的创建在初始化类时实现。

publicBaseMoreListExt(){

//1.绑定页面

Executions.createComponents(this.zul,this,null);//比写

//2.页面控件与java属性绑定

Components.wireVariables(this,this);//比写

//3.绑定监听事件

Components.addForwards(this,this,'$');

//4.监听事件

this.addForward();

}

●事件处理阶段:

ZK依次调用每个事件的监听器,这些事件已经为桌面排好队列。

●响应阶段:

在所有的事件都被处理后,ZK将这些组件组成一个规则的HTML页面并将这个页面送到浏览器。

3.3.java类中获取界面中的组件

我们在写js代码时,获取html中的控件通过docoment.getElementById()获取的。

那么在zk中,要怎么获取呢?

有2种方法:

第一种,在java类中定义变量,这个变量的类型和变量名必须和zul页面中的控件类型以及ID一致。

这样在zk就会自己实现java对象与界面元素的绑定。

第二种方法,通过getFellow(id)。

这与js中的docoment.getElementById()是类似的。

3.4.事件监听

3.4.1.zul与java类的事件交互

zul上的页面交互事件需要传递到页面类中,有3种写法。

●在控件中加事件属性。

这也有2种写法,一种是用forward属性,属性值为需要监听的方法名,然后直接在页面类中实现这个方法即可。

注意,方法名都要以on开头,否则监听不到。

还可以像html一样,直接用zk自带的事件类型做为属性,如onClick、onOpen、onClose等。

关闭

●不定义事件属性,即不在zul页面中写forward或onclick等事件,而是直接在页面类中写即可,写法为:

事件名$控件id()。

使用这种写法时,zul页面中一定要为该控件设定id。

publicvoidonClick$dataExportBtn()throwsException{

Gridg=this.getGrid();

Excel.gridToExcel(g);

}

●Java类中监听页面事件。

当页面控件触发事件时,页面类中监听该事件。

这种写法实际上就是swing中事件的写法。

this.self.addEventListener(Events.ON_OPEN,newEventListener(){

@Override

publicvoidonEvent(Eventevent)throwsException{

Detaildetail=(Detail)event.getData();

}

});

实现监听的方法的参数类型可以有2种,一种是用Event,一种是ForwardEvent。

当用Eevent,用event.getData()取传参,如上面的代码。

当用ForwardEvent时,用event.getOrigin().getData()取传参,如:

publicvoidonSubSelectProdInst(ForwardEventevent)throwsException{

finalProdInsttprodInst=(ProdInst)event.getOrigin().getData();

}

假如监听的事件与处理事件的方法名不一样。

可以用addForwad中转。

3.4.2.java类之间的事件传递

我们经常会遇到一段逻辑处理时,需要让某一控件触发事件,这时候需要在页面类中抛出事件,触发该控件。

抛出事件有2种方式,postEvent和sendEvent。

postEvent的使用方法为Events.postEvent(事件名称,目标,参数)。

其中,目标为要触发的控件,当触发的自身时,则目标填为this,当不需要传递参数时,参数填null。

如:

Events.postEvent("onClickTreeItem",tree,item);

sendEvent的用法与postEvent的一样,如:

Events.sendEvent("onStaffPositionSelectEvent",this,staffPosition);

二者存在区别。

区别1:

postEvent将要触发的事件加到目标的接收事件队列中,当前面的事件执行完后,才执行这个事件;sentEvent让这个事件马上触发。

也就是说,postEvent能够控制事件的执行顺序,sentEvent不行。

区别2:

使用postEvent时,源对象抛出事件后,不管目标对象是否接受成功,它的任务就已完成;使用sendEvent时,抛出事件和接受事件在同一个线程中

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 表格模板 > 合同协议

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1