本文适合熟悉V2.7版本开发,准备使用V3.1版本开发的开发者。
BeX5 V3.1版本推出了新一代的界面模型——UI2,这里包括全新的组件、模块化的js,所有这些和V2.7版本的UI在使用上有了一些不同,本文从js、组件、新增特性、java四个方面列举了一些不同之处。
一、js相关
(一)、引用js
1、5.3版本——写在js文件中
引用的写法
- 例如:引用UI2/OA/personalOffice/js/pub.js文件
- var OA = require(“$UI/OA/personalOffice/js/pub”);
调用pub.js文件中的js方法
- OA.calcLeaveDayHour(map.days);
2、5.2版本——写在w文件中
(二)、引用css
1、5.3版本——写在js文件中
引用的写法
- 例如:引用UI2/OA/config/pub.css文件
- require(“css!$UI/OA/config/pub”).load();
2、5.2版本——写在w文件中
(三)、在js文件中定义全局变量
1、5.3版本——定义实例变量
var Model = function() { this.callParent(); //在这下面定义变量,这里定义的是实例变量 this.openTaskStatus; };
在方法中使用this.openTaskStatus访问实例变量
2、5.2版本——定义全局变量
var openTaskStatus;
5.2版本中定义的是全局变量
(四)、在js文件中自定义方法
1、5.3版本——定义实例方法
方法应该定义在define的里面,复制系统生成的方法,修改方法名和参数即可。
例如:自定义一个方法showlistCount
Model.prototype.showlistCount = function() { var appNO = this.comp('approveList').getBindingObjects().length; this.comp('numData').setValue('appNum', appNO); };
2、5.2版本——定义全局方法
略
(五)、调用js文件中的其它js方法
1、5.3版本
this.showlistCount();
2、5.2版本
showlistCount();
(六)、在js文件中获得组件的js对象
1、5.3版本
this.comp(‘组件的xid’)
2、5.2版本
justep.xbl(‘组件的id’)
(七)、在js文件中获取上下文
1、5.3版本
使用this.getContext()获取
- 例如:获取当前人员姓名
- this.getContext().getCurrentPersonName()
2、5.2版本
使用justep.Context获取
- 例如:获取当前人员ID
- justep.Context. getCurrentPersonName()
(八)、调用action
1、5.3版本
引用biz.js文件
- var biz = require(‘$UI/system/lib/biz’);
参数options中增加上下文参数context
- options.context = this.getContext();
调用方法
- biz.Request.sendBizRequest(options);
2、5.2版本
justep.Request.sendBizRequest(options);
(九)、使用this
1、5.3版本
在方法中如果嵌套了方法,那么在嵌套的方法中的this不再是当前实例,如果要在嵌套的方法中使用当前实例this,就需要先将this赋值给一个变量,在嵌套的方法中使用这个变量就可以访问当前实例了。
var me = this; var socialData = this.comp("socialData"); socialData.each(function(options) { if(options.row.val('sPersonID') == me.getContext().getCurrentPersonID()){ me.comp("mainData").setValue("fMemo","本人"); } });
(十)、获取完整url
1、5.3版本——使用 require.toUrl方法
var url = require.toUrl(“./map.html”);
2、5.2版本——使用 convertURL方法
(十一)、调用父窗口中的方法
1、5.3版本——使用 this.getParent()方法
通过this.getParent()获得父窗口的modal对象,相当于当前窗口的this,后面直接调用方法即可。例如:父窗口中有一个方法getPos,在子窗口中这样调用this.getParent().getPos();
2、5.2版本
略
二、组件相关
(一)、组件定义
1、5.3版本——白盒组件
白盒组件在设计时和运行时,节点元素一样
2、5.2版本——黑盒组件
(二)、组件案例的位置
1、5.3版本
组件所在目录下面有一个demo目录,组件案例就在这个demo目录下
- 例如:messageDialog组件在/UI2/system/components/justep/messageDialog目录下
- 组件案例在/UI2/system/components/justep/messageDialog/demo目录下
2、5.2版本
略
(三)、Data的API参数
1、5.3版本
data组件增加了行对象Row,在很多方法中使用了row代替了rowid.
- 例如:getValue,setValue方法的参数改成了Row
- public object getValue (string col, Data.Row row)
- public void setValue (string col, object value, Data.Row row)
事件onValueChange
- 原名:onValueChanging
- 清空本次修改的代码是:event.newValue = “”;
2、5.2版本
getValue,setValue方法的参数使用rowid
事件onValueChanging
- 清空本次修改的代码是:event.value = “”;
(四)、Data的遍历
1、5.3版本
使用each方法遍历,每遍历一行会触发一次each方法中定义的回调函数,在回调函数中使用传入的参数options.row获得遍历的每一行,使用event.cancel=true;终止遍历。
data.each(function(options){ options.row.val('sTime'); });
2、5.2版本
略
(五)、Data的sum
1、5.3版本
data组件提供了sum、count等方法,用于计算合计,计算记录数
this.comp(‘taskData’). sum(“列名”)
2、5.2版本
justep.Xdata.Sum(‘taskData’, “列名”)
(六)、windowDialog组件的open方法
1、5.3版本
open方法是原来的open2方法
- public void open (object option)
2、5.2版本
open2
(七)、组织机构选择对话框返回
1、5.3版本
组织机构选择对话框返回的是行数组
Model.prototype.orgDialogReceive = function(event) { var rows = event.data; var orgData = this.comp('OrgData'); orgData.clear(); for ( var i in rows) { orgData.add({ fID : rows[i].val('SA_OPOrg'), fName: rows[i].val('sName'), fFID: rows[i].val('sFID') }); } };
2、5.2版本
略
三、新增特性
(一)、组件的事件
在原有on开头的事件上,增加了bind开头的事件,bind开头的事件都是标准dom事件。
(二)、组件增加表达式属性
组件增加了可以设置表达式的属性
- bind开头的属性
- list的filter属性
- grid的rowAttr属性
- grid的列的footerData属性
在表达式中使用环境变量$model、$row
- 获得当前行数据:$row.val(‘列名’) == 1
- 调用js文件中的js方法:$model.dataFilter($row)
(三)、控制组件是否显示、是否可用
使用表达式控制
- 在bind-visible属性中设置表达式,控制组件是否显示
- 在bind-enable属性中设置表达式,控制组件是否可用
使用组件的set方法控制
(四)、动态创建组件
使用new创建一个组件
例如:在工具条里面增加一个按钮
1、这是工具条的定义
<div xid=”bar” component=”$UI/system/components/justep/toolBar/toolBar”
class=”x-toolbar x-toolbar-spliter form-inline”>
2、在js文件中引用Button组件的js文件
var Button = require(“$UI/system/components/justep/button/button”);
3、动态创建按钮
var parentNode = this.getElementByXid("bar"); if (parentNode) { var xid = "--" + (++this.i) + "--"; var flag = { xid : xid, label : xid, parentNode : parentNode, 'class' : "btn btn btn-default" }; var button = new Button(flag); button.on("onClick", function(event) { alert(event.source.get('label')); }); }
(五)、html标签绑定数据
html标签(例如:input)也可以和data组件绑定,使用bind-text、bind-checked等属性进行绑定
(六)、增加文件后缀.m.w和.a
1、增加了一种手机优先访问的页面,后缀是.m.w
.w页面手机和pc都可以访问
2、增加了一种虚拟的文件后缀 .a
在功能树文件和SA_Task表中的url字段中,url访问的文件后缀都为.a
当url访问的文件的后缀是.a时,系统按照下面的规则进行访问
- 手机访问.a文件:优先打开UI2下面的.m.w文件,如果文件不存在,再打开UI2下的.w文件,如果文件不存在,最后打开mobileUI下.w文件
- PC访问.a文件:优先打开UI2下面的.w文件,如果文件不存在,再打开UI下.w文件,如果文件不存在,最后打开UI2下.m.w文件
四、java
(一)、blobDownloadAction
blobDownloadAction的参数名变了,如果你的代码中用到了,需要修改一下
参数 | V2.7 | V3.1 |
数据模块 | dataModel | blobDataModel |
blob所在概念 | concept | blobConcept |
blob对应的关系 | relation | blobRelation |
概念的唯一标示 | id | blobConceptValue |
本文由WeX5君整理,WeX5一款开源免费的html5开发工具,H5 App开发就用WeX5!
阅读其他app 开发相关文章:http://doc.wex5.com/?p=3443
引用UI2/OA/config/pub.css文件
•require(“css!$UI/OA/config/pub”).load();
在V5.31改成:
Require.css(“$UI/OA/config/pub”);
感觉更容易理解!
require(“css!$UI/OA/config/pub”).load(); 这种形式确实不如Require.css(“$UI/OA/config/pub”)好理解,但前者这种形式符合js模块化规范AMD(requirejs等实现的标准)。采用这种规范的形式,基于AMD规范的工具比如r.js、jspm等都可以直接使用。x5早期就是用的后一种,但是为了更符合规范,所以还是在正式版里采用了前一种规范的做法。
btw:为啥引入css需要加.load(),这是为了保证引入多个css的顺序正确。