SAP UI5
上次尝试了UI5的View和controller，今天准备学习下UI5的数据绑定。先尝试Json模式
首先在Controller.js中定义一个json数据源，并且绑定到数据Model上
代码如下：
1 onInit: function() {
2 var oModel = new sap.ui.model.json.JSONModel();
3 var data = {
4 firstName: "John",
5 lastName: "Doe",
6 birthday: {day:01,month:05,year:1982},
7 address:[{city:"Heidelberg"}],
8 enabled: true
9 };
10 oModel.setData(data);
11 sap.ui.getCore().setModel(oModel);
12 },
运行时内存中应该就会有这个数据模型了，下一步是在View中使用这些数据
首先为了美观，这次的View中添加了一个Form,form中有若干field,包含结构如下：
先简写如下：
sap.ui.layout.form.Form->Form
sap.ui.layout.form.FormContainer->FormContainer
sap.ui.layout.form.FormElement->FormElement
sap.ui.commons.TextField->TextField
Form
FormContainer1
FormElement1
TextField1
TextField2
TextField3
FormElement2 '
....
FormContainer2
.......
现在Form构建好了，View.js中createContent方法的代码如下：
1 createContent : function(oController) {
2
3 var oTextField1 = new sap.ui.commons.TextField("T1",
4 {
5 value: "{/firstName}"
6 });
7 var oTextField2 = new sap.ui.commons.TextField("T2",
8 {
9 value: "{/lastName}"
10 });
11 var oTextField3 = new sap.ui.commons.TextField("T3",
12 {
13 value: "{/birthday/year}"
14 });
15 var oTextField4 = new sap.ui.commons.TextField("T4",
16 {
17 value: "{/address}"
18 });
19
20 var oFormContainer = new sap.ui.layout.form.FormContainer("F1C1",
21 {
22 title: "Personnel data",
23 formElements: [
24 new sap.ui.layout.form.FormElement(
25 {
26 label: new sap.ui.commons.Label(
27 {text:"Name",
28 }),
29 fields: [oTextField1,
30 oTextField2,
31 oTextField3,
32 oTextField4,]
33 })],
34 });
35
36 var oLayout = new sap.ui.layout.form.GridLayout();
37
38 var oForm = new sap.ui.layout.form.Form("F1",
39 {
40 title: "FORM",
41 layout: oLayout,
42 formContainers:[
43 oFormContainer
44 ]
45
46 });
47 return oForm;
48 }
在定义TextField时，通过两种方法可以绑定数据
第一种就是代码中的 value: "{/firstName}" 这样的，绑定的数据就是Json数据源中的firstName对应的值
第二种方法是通过oTextField.bindProprety('value','/firstName') 效果是一样的。
如果Json数据有多层格式，就按照/birthday/year的方式访问，相当于Jsondata.
如果Json数据是一个数组，有多条记录，并且想要绑定到一个Table中，可以采用如下方式：
View中Table的构建如下：
Table:
Column1
TextField:
value: "{/firstName}"
Column2
value: "{/lastName}"
然后在绑定Model的时候
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(tableData);
oTable.setModel(oModel);
oTable.bindRows("/");
这样每一条记录都会被绑定到Table对应的一行，并且按照TextField绑定的column名字匹配
附上完整的Table绑定Json数据的代码：
这边我把数据源一并写在了View.js中
1 sap.ui.jsview("ui5_view.MyView", {
2
3 getControllerName : function() {
4 return "ui5_view.MyView";
5 },
6
7 createContent : function(oController) {
8 var oColumn1 = new sap.ui.table.Column('C1',
9 {
10 label:
11 new sap.ui.commons.Label({
12 text: "FirstName"
13 }),
14 template:
15 new sap.ui.commons.TextField().bindProperty("value","firstName"),
16 });
17
18 var oColumn2 = new sap.ui.table.Column('C2',
19 {
20 label: "LastName",
21 template:
22 new sap.ui.commons.TextField().bindProperty("value","lastName"),
23 });
24
25 var oTable = new sap.ui.table.Table('TB1',
26 {
27 });
28 oTable.addColumn(oColumn1);
29 oTable.addColumn(oColumn2);
30 var oModel = new sap.ui.model.json.JSONModel();
31 var data = [
32 {
33 firstName: "John",
34 lastName: "Doe",
35 },
36
37 {
38 firstName: "Tom",
39 lastName: "Jerry",
40 }];
41
42 oModel.setData(data);
43 oTable.setModel(oModel);
44 oTable.bindRows("/");
45 return oTable;
46 }
47 }
48 );
效果如下：
页:
[1]