SAP UI5

YY-LIN

　　上次尝试了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[birthday][year].
　　
　　
　　如果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     );
　　效果如下：