SAP UI5学习笔记之（四）MVC之JSON模型

SAPUI5支持MVC模式，其中M-Model是模型层，它的功能主要是为View视图层提供数据。

 

在SAPUI5中的模型有三种，JSON模型、Odata模型、Resource模型。其实Resource模型也是JSON模型的一种。

接下来做一个JSON模型的实例熟悉JSON模型。

打开App.view.xml文件的Layout Editor，如图添加一个table控件，两个input控件和一个button控件。调整布局可用控件属性Width。

 

 

 回到Code Editor，在App.view.xml中自动生成相应代码，修改下图红框部分。

 

 

在webapp的model文件夹下创建people.json文件，这就是MVC的Model层。

 

 

Model层创建了之后需要在menifest.json中添加配置描述才能和View层和Controller层关联。

打开menifest.json，在Model分页签点击加号（+）如下图新建model。

 

 

然后在URI部分输入Model的路径model/people.json。

 

这样View层和Model层就完成了，接下来打开App.controller.js文件实现按钮事件。

 

 

简单的JSON模型完成。

运行一下。

 

 

输入新的名字和公司。

 

 

点击添加按钮，成功添加到table中。

 

附上相关代码：

 App.view.xml：

 1 <mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="sap.ui.demo.walkthrough.controller.App" displayBlock="true">
 2     <Shell >
 3         <App >
 4             <pages>
 5                 <Page >
 6                     <content>
 7                         <Label text="HelloWorld" width="100%" />
 8                         <Table noDataText="Drop column list items here and columns in the area above" >
 9                             <items>
10                                 <ColumnListItem type="Active" >
11                                     <cells>
12                                         <Text text="{Name}" />
13                                         <Text text="{Company}" />
14                                     </cells>
15                                 </ColumnListItem>
16                             </items>
17                             <columns>
18                                 <Column >
19                                     <header>
20                                         <Label text="名字" />
21                                     </header>
22                                 </Column>
23                                 <Column >
24                                     <header>
25                                         <Label text="公司" />
26                                     </header>
27                                 </Column></columns></Table>
28                         <Label text="名字" width="10%"/>
29                         <Input xmlns="sap.m" />
30                         <Label text="公司" width="10%"/>
31                         <Input xmlns="sap.m" />
32                         <Button xmlns="sap.m" text="添加" />
33                     </content>
34                 </Page>
35             </pages>
36         </App>
37     </Shell>
38 </mvc:View>

people.json：

 1 {"People": [
 2     {
 3         "Name":"Jack",
 4         "Company":"IBM"    
 5     },
 6     {
 7         "Name":"Jerry",
 8         "Company":"Oracle"
 9     },
10     {
11         "Name":"Davie",
12         "Company":"Microsoft"
13     }
14     ]
15 }

App.controller.js：

 1 sap.ui.define([
 2     "sap/ui/core/mvc/Controller",
 3     "sap/ui/model/json/JSONModel"
 4 ], function (Controller, JSONModel) {
 5     "use strict";
 6 
 7     return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
 8 
 9         onClick: function () {
10 
11             var newName = this.byId("inputName").getValue();
12             var newCompany = this.byId("inputCompany").getValue();
13             var nameInsert = {
14                                 "Name" : newName,
15                                 "Company" : newCompany
16                             };
17             
18             this.getView().getModel().getProperty("/People").push(nameInsert);
19             this.getView().getModel().refresh();
20         }
21 
22     });
23 });

menifest.json的models部分：

"models": {
            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "settings": {
                    "bundleName": "sap.ui.demo.walkthrough.i18n.i18n"
                }
            },
            "": {
                "type": "sap.ui.model.json.JSONModel",
                "settings": {},
                "uri": "model/people.json",
                "preload": false
            }
        },