前端框架ZK自学文档共25页.docx

前端框架ZK自学文档共25页.docx

《前端框架ZK自学文档共25页.docx》由会员分享，可在线阅读，更多相关《前端框架ZK自学文档共25页.docx（25页珍藏版）》请在冰豆网上搜索。

前端框架ZK自学文档共25页

ZK开发（kāifā）说明

1.什么（shénme）是ZK

Ø定义（dìngyì）：

一种用户界面开发（kāifā）框架。

Ø特点：

基于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的优缺点

优点（yōudiǎn）：

1.几乎（jīhū）可不用JS，组件的形式方便（fāngbiàn）复用，便捷开发（kāifā）。

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页面中使用（shǐyòng）apply或use属性指定对应的JAVA类。

Apply和use的使用方法如下：

Use:

使用一个（yīɡè）组件类，该类必须是当前组件对应（duìyìng）接口的实现。

方法里面（lǐmiàn）不实现doAfterCompose

Apply:

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

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

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

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

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

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

apply="mon.ui.EntityLoadComposer"

一种（yīzhǒnɡ）是通过注释（zhùshì）的形式（xíngshì），如

Aapply="${servProdInstMktResourceDetailInfoComposer}”

使用注释的时候，变量名为要指向的类（首字母小写），并且（bìngqiě）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.页面（yèmiàn）加载

ZK加载器（ZKloader）加载并解释页面需要（xūyào）经历四个阶段：

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

●页面（yèmiàn）初始阶段：

在这个阶段，ZK处理处理指令，被称为初始化（init）。

如果并没有定义（dìngyì）这样的处理指令，此阶段会被跳过。

对于每个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）;//比写

}

如果（rúguǒ）你是把页面控件的对象都先在bean类里面，则Components.wireVariables的第二个参数（cānshù）是用bean的名称，如果（rúguǒ）只是写在Composer类中，则第二个参数（cānshù）只要写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依次（yīcì）调用每个事件的监听器，这些事件已经为桌面排好队列。

●响应阶段：

在所有（suǒyǒu）的事件都被处理后，ZK将这些组件组成一个规则的HTML页面并将这个页面送到浏览器。

3.3.java类中获取界面（jièmiàn）中的组件

我们在写js代码（dàimǎ）时，获取html中的控件通过docoment.getElementById（）获取的。

那么在zk中，要怎么获取呢？

有2种方法：

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

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

第二种方法，通过getFellow（id）。

这与js中的docoment.getElementById（）是类似的。

3.4.事件（shìjiàn）监听

3.4.1.zul与java类的事件（shìjiàn）交互

zul上的页面交互事件（shìjiàn）需要传递到页面类中，有3种写法（xiěfǎ）。

●在控件中加事件属性。

这也有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（）;

}

}）;

实现监听的方法的参数（cānshù）类型可以有2种，一种是用Event，一种（yīzhǒnɡ）是ForwardEvent。

当用Eevent，用event.getData（）取传参，如上面（shàngmiɑn）的代码。

当用ForwardEvent时，用event.getOrigin（）.getData（）取传参，如：

publicvoidonSubSelectProdInst（ForwardEventevent）throwsException{

finalProdInsttprodInst=（ProdInst）event.getOrigin（）.getData（）;

}

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

可以（kěyǐ）用addForwad中转。

3.4.2.java类之间的事件传递

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

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

postEvent的使用方法为Events.postEvent（事件名称，目标，参数）。

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

如：

Events.postEvent（"onClickTreeItem",tree,item）;

sendEvent的用法（yònɡfǎ）与postEvent的一样（yīyàng），如：

Events.sendEvent（"onStaffPositionSelectEvent",this,staffPosition）;

二者存在区别。

区别1：

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

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

区别2：

使用postEvent时，源对象抛出事件后，不管目标对象是否接受成功，它的任务就已完成；使用sendEvent时，抛出事件和接受事件在同一个线程中，确认目标接受成功，线程才会结束。

所以使用postEvent时，可以不写接收方法（fāngfǎ），但是sendEvent不行。

目标控件监听（jiāntīnɡ）事件时，用3.4.2中的第二、三种监听方式即可，实现监听。

3.5.弹出页面

主页面中:

//设置传参

Maparg=newHashMap（）;

arg.put（"opType",opType）;//设置操作类型，新增或修改

if（opType.equals（"mod"））{

bulletin=（Bulletin）bulletinMainBean.getBulletinListbox（）.getSelectedItem（）.getValue（）;

arg.put（"bulletin",bulletin）;//修改时，将修改对象传进编辑页面

}

//创建弹出页面

Windowwin=（Window）Executions.createComponents（"bulletin_edit.zul",this.self,arg）;

ZkWindUtil.doModal（win,ZkWindUtil.WIN_MID_SIZE）;//初始化页面，并设置页面大小

//监听弹出框中返回事件

win.addEventListener（"onDataChange",newEventListener（）{

publicvoidonEvent（Eventevent）throwsException{

PubUtil.reDisplayListbox（bulletinMainBean.getBulletinListbox（）,（CrmEntityImpl）event.getData（）,

opTypeGlobal）;//刷新表格，这种方式是直接把对象更新到表格中，也可重新查询。

}

}）;

弹出页面中，获取（huòqǔ）传递参数：

if（opType.equals（"mod"））{

bulletin=（Bulletin）arg.get（"bulletin"）;

}

将对象（duìxiàng）赋值到页面上：

PubUtil.fillBeanFromPo（bulletin,bulletinEditBean）;

将页面填充（tiánchōng）值赋值到对象上：

PubUtil.fillPoFromBean（bulletinEditBean,bulletin）;

3.6.zk控件

我们已经有对zk控件写了一些封装方法，此处介绍时主要还是介绍封装好的方法怎么用，以及经常用到的一些特性，对于zk控件的属性（shǔxìng）列表就不详细说明了，若需要可在使用的时候查ZK官网上提供的API手册。

3.6.1.Listbox

Zk的listbox跟大部分的前端框架一样（yīyàng），都是有2种用法，一种是作为选择框来使用，另一种是作为表格来使用。

作为（zuòwéi）选择框使用时，写法如下。

ZUL页面（yèmiàn）中

要做为下拉列表使用时，mold=”select”必须写，否则默认为数据表格。

Rows表示展示几行，当行数=1时，则为下拉列表框，当行数>1时，为多行选择框（这与数据列表框是一样的，只是列数=1而已）。

我们用到的比较多的是下拉选择框。

Ø使用为下拉列表时，JAVA类中初始化时，写法如下：

//获取主数据配置

ListpositionType=CRMClassProvider.getValuesList（"Position",

"positionType"）;//参数分别对应sys_class、attr_spec表的java_code

//绑定

ListboxUtils.rendererForEdit（bean.getPositionType（）,positionType）;//参数1为下拉列表的ID对象

//默认选择

ListboxUtils.selectByCodeValue（bean.getPositionType（）,“1”）;//参数2为attr_value表的attr_value值

ListboxUtils为绑定下拉列表（lièbiǎo）提供2个方法（fāngfǎ）:

rendererForEdit和rendererForQuery。

区别（qūbié）在于rendererForQuery是查询时使用（shǐyòng）的，会自动未下拉列表加上”全部“选项”，rendererForEdit是编辑时使用的，会自动为下拉列表加一个空选项。

Ø使用为数据列表时，zul页面中写法如下

--列表-->

--分页-->

forward="onBulletinListboxPaging"pageSize="10">

Rows表示每次展示几条，假如你全部查询出数据，不分页，而rows又设定了值，那每次展示时只会展示设定的行数，滚动条下拉的时候，页面（yèmiàn）才会继续加载数据，有点像微博的展示。

若将其设置（shèzhì）为0，或者（huòzhě）不设置，listbox会将自身大小调整到容纳（róngnà）所有的项目。

排序：

listheader标签中设置属性sort="auto",该列列名旁就会出现上下2个三角键，点击即可顺序、逆序排序。

Java类中绑定数据写法如下：

//分页查询

PageInfopageInfo=bulletinManager.queryBulletinByHQLAndParams（strBufHql.toString（）,params,bulletinMainBean

.getBulletinListboxPaging（）.getActivePage（）,bulletinMainBean.getBulletinListboxPaging（）.getPageSize（））;

//绑定数据

ListModeldataList=newBindingListModelList（pageInfo.getDataList（）,true）;

bulletinMainBean.getBulletinListbox（）.setModel（dataList）;

//设置分页控件中数据总数bulletinMainBean.getBulletinListboxPaging（）.setTotalSize（NumericUtil.nullToZero（pageInfo.getTotalCount（）））;

数据绑定时，是把查询出来的对象绑定到页面中的。

获取选中的行时，使用getSelectedItem方法：

bulletin=（Bulletin）bulletinMainBean.getBulletinListbox（）.getSelectedItem（）.getValue（）;

判断（pànduàn）是否有选中行时时，假如列表只允许单行选中，则可使用getSelectedIndex方法（fāngfǎ）：

if（bulletinMainBean.getBulletinListbox（）.getSelectedIndex（）<0）{

Messagebox.show（"请选择公告！

","提示信息",0,null）;

return;

}

假如列表允许多行选择（xuǎnzé），则使用getSelectedItem（）.size（）判断（pànduàn）。

3.6.2.Combobox

Combobox也是作为下拉列表框使用。

ZUL页面写法：

readonly="true"forward="onChange=onConfTypeChange">

JAVA类中绑定下拉列表:

ComboboxUtils.rendererForEdit（bean.getStatusCd（）,CRMClassProvider.getValuesList（"CommonConfObj","statusCd"））;

跟listbox一样，ComboboxUtils也提供了2种绑定变量的方法，编辑时使用的rendererForEdit，查询时使用的rendererForQuery。

设置默认选中值:

ComboboxUtils.setSelected（bean.getConfId（）,monConfObj.getConfId（）.toString（））;

获取（huòqǔ）选中值：

（String）bean.getStatusCd（）.getSelectedItem（）.getValue（）

3.6.3.Tree

Zul页面设置列名:

forward="onSelect=onSelectOrder"vflex="true"height="100%">