本文适合熟悉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的参数名变了，如果你的代码中用到了，需要修改一下