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：

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="sap.ui.demo.walkthrough.controller.App" displayBlock="true">
    <Shell id="shell">
        <App id="app">
            <pages>
                <Page id="page" title="{i18n>title}">
                    <content>
                        <Label text="HelloWorld" width="100%" id="label0"/>
                        <Table noDataText="Drop column list items here and columns in the area above" id="table0" items="{path: '/People'}">
                            <items>
                                <ColumnListItem type="Active" id="item0">
                                    <cells>
                                        <Text text="{Name}" id="text1"/>
                                        <Text text="{Company}" id="text2"/>
                                    </cells>
                                </ColumnListItem>
                            </items>
                            <columns>
                                <Column id="column0">
                                    <header>
                                        <Label text="名字" id="label1"/>
                                    </header>
                                </Column>
                                <Column id="column1">
                                    <header>
                                        <Label text="公司" id="label2"/>
                                    </header>
                                </Column></columns></Table>
                        <Label text="名字" width="10%"/>
                        <Input xmlns="sap.m" id="inputName" width="90%"/>
                        <Label text="公司" width="10%"/>
                        <Input xmlns="sap.m" id="inputCompany" width="90%"/>
                        <Button xmlns="sap.m" text="添加" id="button2" press=".onClick"/>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

people.json：

{"People": [
    {
        "Name":"Jack",
        "Company":"IBM"    
    },
    {
        "Name":"Jerry",
        "Company":"Oracle"
    },
    {
        "Name":"Davie",
        "Company":"Microsoft"
    }
    ]
}

App.controller.js：

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel"
], function (Controller, JSONModel) {
    "use strict";

    return Controller.extend("sap.ui.demo.walkthrough.controller.App", {

        onClick: function () {

            var newName = this.byId("inputName").getValue();
            var newCompany = this.byId("inputCompany").getValue();
            var nameInsert = {
                                "Name" : newName,
                                "Company" : newCompany
                            };
            
            this.getView().getModel().getProperty("/People").push(nameInsert);
            this.getView().getModel().refresh();
        }

    });
});

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
            }
        },