本文适合熟悉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