1. 概述

我们设计表单的时候经常会有这样的需求：在表单或者组件加载前/加载后，能够执行一些脚本来改变表单或组件的样式和行为。或者用户在点击组件的时候能够执行脚本。表单的事件就是为这样的场景而设计。

在表单中有两类事件：组件事件和Element事件。

当我们打开表单设计器，在表单属性或组件属性中的“事件”附签中可以看到一组事件，这组事件即包含了两种事件。表单事件见下图。

开发人员可以在事件编辑器中编写脚本，也可以添加或删除事件。

添加的组件事件需要在API的列表中才有效。

2 Element 事件

2.1 简介

Element 是经过Mootools框架封装后的HTML DOM对象，参考 http://www.chinamootools.com/element.html。

Element 的事件类型和 HTML DOM 对象一致，比如"focus、click、blur"等。

本平台的Element事件，是基于Mootools的 Element.Event 类进行封装的。Element.Event类参考http://www.chinamootools.com/element_event.html。

2.2 表单设计器中的使用

表单设计器中的事件，this对象指向平台的MWF.xScript.Environment对象，这是平台脚本的上下文，可以执行类似于"this.form"的脚本，上下文API请查看：链接。

平台在每次运行事件的时候，都会为 this 对象添加一个属性"target"。我们可以通过 this.target 来获取当前组件。

//获取当前组件对象
this.target;
//等价于
this.form.get("fieldName");
当我们在表单设计器的各种组件中添加了事件，在表单加载的时候，平台会把事件添加到相应的Element对象。下表是各种组件对应的Element事件对象。

组件类型	Element事件对象	获取Element脚本
Checkbox 多选按钮	input[type='checkbox']	this.form.get("fieldName").node.getElements("input['type='checkbox']")
Radio 单选按钮	input[type='radio']	this.form.get("fieldName").node.getElements("input['type='radio']")
Textarea 多行文本	textarea	this.form.get("fieldName").node.getFirst() \|\| this.form.get("fieldName").node;
Textfield 单行文本	input	this.form.get("fieldName").node.getFirst() \|\| this.form.get("fieldName").node;
Org 人员	第一个子div	this.form.get("fieldName").node.getFirst() \|\| this.form.get("fieldName").node;
Calendar 日期	input	this.form.get("fieldName").node.getFirst() \|\| this.form.get("fieldName").node;
Combox 组合框	第一个子div	this.form.get("fieldName").node.getFirst() \|\| this.form.get("fieldName").node;
Opinion 意见框	第一个子对象	this.form.get("fieldName").node.getFirst() \|\| this.form.get("fieldName").node;
Address 地址选择	第一个子对象	this.form.get("fieldName").node.getFirst() \|\| this.form.get("fieldName").node;
Number 数字	input	this.form.get("fieldName").node.getFirst() \|\| this.form.get("fieldName").node;
其他	node	this.form.get("fieldName").node;

样例：

在一个标识为"subject"的文本组件的 focus 事件中增加了脚本。

对于上面的脚本，当光标进入输入框的时候被执行。

如果希望由其他条件来触发这个事件，也可以通过下面的脚本来执行：

var node = this.form.get("subject").node; //获取组件节点
( node.getFirst() || node ).fireEvent("focus"); //触发focus事件

2.3 在脚本中的使用

在上面的例子中，我们都是通过组件属性中的事件区域来添加事件。除了这种方法，还可以在脚本中增加事件。

使用 addEvent 对元素设置一个侦听器。

myElement.addEvent(type, fn);

参数:

type - (string) 事件名,没有'on'。

fn - (function) 事件函数。

(element)当前元素。

样例：

下面的脚本可以实现上一个样例的功能，在一个标识为"subject"的文本组件的 focus 事件中增加脚本

var node = this.form.get("subject").node;
node.getElement("input").addEvent("focus", function(ev){//ev 是Mootools Element的Event对象，参考http://www.chinamootools.com/event.html//这里的this指向inputthis.setStyle("border","1px solid blue");
})

使用 addEvents 对元素设置多个侦听器。

myElement.addEvents(events);

参数：

events - (object) 包含多个事件的对象(对象的key为事件名,value为事件函数)。

(element)当前元素。

样例：

var node = this.form.get("subject").node;
node.getElement("input").addEvents({"focus" : function(ev){//ev 是Mootools Element的Event对象，参考http://www.chinamootools.com/event.html//这里的this指向inputthis.setStyle("border","1px solid blue");},"blur": function(ev){//ev 是Mootools Element的Event对象，参考http://www.chinamootools.com/event.html//这里的this指向inputthis.setStyle("border","1px solid gray");}
})

使用fireEvent 触发一个或多个事件

myElement.fireEvent(type[, args[, delay]]);

参数:

type - (string) 事件名称(例如"click" )

args - (mixed, optional) 事件函数的参数,数组或单个对象，如果超过一个参数,必须是一个数组。

delay - (number, optional) 延迟(ms)执行时间。

(element)当前元素。

样例：

var node = this.form.get("subject").node; //获取组件节点
( node.getFirst() || node ).fireEvent("focus"); //触发focus事件

3 组件事件

3.1 简介

平台中的组件是一组基于Mootools Class生成的对象。Mootools Class是MooTools框架的基类，参考http://www.chinamootools.com/class.html。

在Mootools Class中有一系列的特性，其中就包括了 Class:Event，参考http://www.chinamootools.com/class_extras.html 中的 Event章节。

当我们在表单设计器的各种组件中添加了事件脚本，在表单加载的时候，代码运行到相应的位置，这些脚本就会被触发。比如平台在加载组件（包括生成Html Dom,赋值等等）之前，会去执行queryLoad事件中的脚本；加载组件以后，会去执行postLoad中的事件。

3.2 表单设计器中的使用

表单设计器中的事件，this对象指向平台的MWF.xScript.Environment对象，这是平台脚本的上下文，可以执行类似于"this.form"的脚本，上下文API请查看：链接。

平台在每次运行事件的时候，都会为 this 对象添加一个属性"target"。我们可以通过 this.target 来获取当前组件。

//获取当前组件对象
this.target;
//等价于
this.form.get("fieldName");

某些需要参数的事件，平台在每次运行的时候，会为 this 对象添加一个属性"event "。我们可以通过 this.event 来获取参数。

//有时候可以通过this.event获取参数
this.event;

样例：在queryLoad脚本中根据流程活动名称把当前组件设置为只读。

系统在加载组件的时候，会根据json的isReadonly判断生成输入框还是div节点。

如果希望由其他条件来触发这个事件，也可以通过下面的脚本来执行：

var field = this.form.get("subject"); //获取组件
field.fireEvent("queryLoad"); //触发queryLoad事件

3.3 在脚本中的使用

在上面的例子中，我们都是通过组件属性中的事件区域来添加事件。除了这种方法，还可以在脚本中增加事件。

使用 addEvent 对组件设置一个事件。

myClass.addEvent(type, fn[, internal]);

参数:

type - (string)事件的类型(例如'queryLoad') ，包含在表单设计器里组件的事件。

fn - (function)事件函数。

internal - (boolean, optional)设置函数属性:internal为true。internal属性通常用来防止删除。

(object)这个类的实例。

样例：

在表单的保存的时候加一个事件，将临时字段置空。

var form = this.form.getApp().appForm; //获取表单组件
form.addEvent("beforeSave", function(){  //添加保存前事件this.form.get("tmpField").setData(''); //给临时字段置空
}.bind(this))  //通过 bind(this), 把上下文传到事件方法里

使用 addEvents 对组件设置多个侦听器。

myClass.addEvents(events);

参数：

events - (object)一个key:value对象,key事件名称(如"queryLoad" ) ，和值，当事件发生时要调用的函数。

(object)这个类的实例。

注：通过这种方式添加事件，this.target 和 this.event 均为空。

样例：

var form = this.form.getApp().appForm; //获取表单组件;
form.addEvents({"beforeSave" : function(){  //添加保存前事件this.form.get("tmpField").setData(''); //给临时字段置空}.bind(this), //"beforeDelete": function(){ //增加删除前事件//do something}
})

使用fireEvent 触发一个或多个事件

myClass.fireEvent(type[, args[, delay]]);

参数:

type - (string)事件的类型(例如'beforeSave') 。

args - (mixed，optional)传递给函数的参数。要传递多个参数，该参数必须是一个数组。

delay - ( number，optional)等待时间,单位毫秒。

(object)这个类的实例。

注：通过这种方式添加事件，this.target 和 this.event 均为空。

样例一：

var form = this.form.getApp().appForm; //获取表单组件;
form.fireEvent("beforeSave"); //触发beforeSave事件

样例二：假如临时字段是触发时传入的，可以这样写

var form = this.form.getApp().appForm; //获取表单组件;
form.fireEvent("beforeSave",["tmpFieldName1"]); //触发beforeSave事件

则添加的事件需要改成如下：

var form = this.form.getApp().appForm; //获取表单组件
form.addEvent("beforeSave", function( fieldName ){  //添加保存前事件this.form.get(fieldName").setData(''); //给临时字段置空
}.bind(this))  //通过 bind(this), 把上下文传到事件方法里

3.4 表单和组件的加载顺序

整个表单加载时的顺序遵循以下规则（a-f也是有顺序的）：

a、执行主表单事件 queryLoad -> beforeLoad -> beforeModulesLoad；

b、根据组件在主表单的位置从上到下，从里到外执行组件的queryLoad->postLoad->load事件；

c、执行主表单事件 postLoad；

c、子表单、子页面、部件上的直接事件不会被执行，但子表单里组件的事件也是根据规则b 执行；

d、由于子表单、子页面、部件是异步加载，这些组件内的组件事件在异步加载后分别执行；

e、执行主表单事件 afterModulesLoad -> afterLoad；

f、当 Tab 组件、子表单、公文管理器等组件被设置为延迟加载的时候，主表单加载的时候，这些组件内的子组件在不会加载。当这些组件被激活的时候，根据规则b 执行事件。

表单加载时触发的直接事件说明:

表单的直接事件	说明
queryLoad	表单加载前触发。数据（businessData）、预加载脚本和表单html已经就位。
beforeLoad	表单加载前触发。已提示抢办锁定。
beforeModulesLoad	表单的所有组件加载前触发，此时表单的样式和js head已经加载。
postLoad	表单加载后触发。主表单的组件加载完成，但不保证子表单、子页面、部件加载完成。
afterModulesLoad	表单的所有组件加载后触发。表单包含有子表单、子页面、部件时，此事件会在这些组件加载后触发。
afterLoad	表单加载后触发。表单包含有子表单、子页面、部件时，此事件会在这些组件加载后触发。

开源OA办公平台搭建教程：O2OA表单中的事件相关推荐

开源OA办公平台搭建教程：O2OA+Arduino实现物联网应用（五）
我们已经登录到了O2OA服务器,本章就要连接Websocket,接收服务器的消息. 创建O2IOTWebsocket类在o2iot目录下创建文件:O2IOTWebsocket.h,代码如下: #if ...
开源OA办公平台搭建教程：O2OA+Arduino实现物联网应用（四）
之前我们通过O2IOTServer类已经实现了设备的初始化配置,现在我们需要使用配置信息,连接到可以用的WiFi,并连接登录到O2OA服务器. 创建O2IOTClient类在o2iot目录下创建文件 ...
开源OA办公平台搭建：流程开发中常见的正则表达式
在线测试正则地址 https://tool.oschina.net/regex/ 腾讯QQ号腾讯QQ号从10000开始 [1-9][0-9]{4,} 中国邮政编码中国邮政编码为6位数字 [1-9] ...
开源OA协同办公平台搭建教程：开源O2OA中log4j2使用配置
O2OA应用开发平台是兰德纵横网络技术股份有限公司精心打造的一款开源办公产品,是使用JavaEE技术栈,分布式架构设计的真正全代码开源的企业应用定制化开发平台,平台既可以支持小企业的OA协同办公系统快 ...
开源OA协同办公平台搭建教程丨服务器端命令:数据导入导出及配置
O2OA应用开发平台是一款开源办公产品,是使用JavaEE技术栈,分布式架构设计的真正全代码开源的企业应用定制化开发平台,平台既可以支持小企业的OA协同办公系统快速搭建,也能支持复杂的集团化大型协同门 ...
开源OA协同办公平台搭建教程：服务管理中接口的调用权限
O2OA应用开发平台是兰德纵横网络技术股份有限公司精心打造的一款开源办公产品,是使用JavaEE技术栈,分布式架构设计的真正全代码开源的企业应用定制化开发平台,平台既可以支持小企业的OA协同办公系统快 ...
O2OA开源免费开发平台搭建教程：系统配置中，主要配置文件的说明详情
O2OA开发平台有比较多的配置文件,目前多数配置已经已经可以直接在WEB端进行修改.本章节主要讲述O2OA信息化系统开发平台支持的配置文件以及各项配置相关的用途说明. 系统配置文件分成两类: loca ...
开源协同办公平台部署教程：O2OA PAAS平台部署
一.镜像制作 1.将安装介质o2server-5.0.3-linux.zip上传至镜像制作服务器上.(上传目录为/paas/xxhpaas/moka/o2oa) 2.使用unzip命令解压安装包,参考 ...
用全开源的协同OA办公平台，可以自己搭建OA啦！
今天给大家介绍的,确确实实是一款鲜为人知,但是好用的全开源协同OA项目,它的名字叫做:O2OA企业应用开发平台(简称O2OA平台). O2OA平台是什么? O2OA开源企业应用开发平台基于J2EE分布 ...

开源OA办公平台搭建教程：O2OA表单中的事件

1. 概述

2 Element 事件

2.1 简介

2.2 表单设计器中的使用

2.3 在脚本中的使用

3 组件事件

3.1 简介

3.2 表单设计器中的使用

3.3 在脚本中的使用

3.4 表单和组件的加载顺序

开源OA办公平台搭建教程：O2OA表单中的事件相关推荐

最新文章

热门文章