sap ui5教程（3） MVC及view、model、contronller文件结构

1、MVC

MVC 是 Model、View、Controller 的简称，将程序的数据、界面展示和用户交互分离，降低耦合。
1、model、view和controller

• Model: 应用程序的数据
• View: 通过界面展示应用程序的数据和其它界面元素
• Controller: 处理应用程序的数据，以及用户的交互。
  

2、各自的关系

• Model – View ：OpenUI5 有单向绑定或者双向绑定两种绑定模式，通过绑定，当 model 变更时， UI自动更新。
• Controller – View ：View 通知 Controller，或者 Controller使用 API 来修改 View。
• Controller – Model：Model 通知 Controller，或者 Controller 修改 Model。

2、文件结构

文件结果包括根目录webapp文件夹和两个json文件：

• webapp文件夹：主要代码

    1、index.html：项目入口文件
    2、mainfest.json:JSON格式的项目配置文件，包括项目一些基础models(如i18n models的配置)，sap.app、sap.ui5、sap.ui的配置，路由，样式(以前在Componet.js文件里，现在单提成json文件形式)
    3、Componet.js：配置文件入口

    4、controller文件夹：存放所有view控制器，原则上一个view对应一个controller(名字也一一对应，以view的命名开头)，通过contronller中逻辑将得出的数据传给view显示出来
    5、view文件夹：存放所有view页面，由静态标签组成，contronller控制动起来。在view中`contronllerName = "项目名.contronller.controller名"` 制定了对应的controller,需要引入所需库如 xmlns:mvc="sap.ui.core.mvc"
    6、model：存放model,创建项目新建了个json model，以后和服务器交换数据时创建的ODataModel也存在此。

    7、css：存放页面样式
    8、i18n：存放多语言数据文件（文本数据，例如:{i18n>title}）

• project.json：项目信息，基本不用修改
• neo-app.json：项目基础配置文件，指定程序入口

3、文件内容简介

1、i18n（RsourceModel）数据绑定
i18n文件：
存放不经常变化的文字，如在<page></page>中的title =”{i18n>title}”,按钮文字，输入框提示文字，placeholder
newTitle = hijuly

manifest.json 文件
61行配置当前项目的基础models

 "models": {
    "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
            "bundleName": "new_test02.i18n.i18n"
        }
    }
}

其中bundleName指明文件所在路径，页面上的所有数据都由model提供，服务器取回来的数据必须封装成jsonmodel才能绑定在页面上
App.view.xml文件

• 因为i18n是RsourceModel，所以绑定方式略特殊，绑定方式为title="{i18n>title}"

<Page title="{i18n>title}">
    <content></content>
</Page>

• 一般开发中都是jsonmodel，绑定方式略有不同

2、jsonmodel数据绑定
controller文件
在其中添加onInit方法，然后创建一个model，定义其数据

return Controller.extend("new_test02.controller.App", {
    onInit: function(){
    this.labelModel = new sap.ui.model.json.JSONModel({
        text:"Hi,this is july!"
    });
    // this.labelModel.setData({text:"Hi,this is july!"});
    this.getView().byId("test_label").setModel(this.labelModel,"label");
    }
});

onInit方法：controller被加载后自动执行该方法,如进入页面自动获取初始化数据的代码
App.view.xml文件
view文件中添加content标签，将contronller新创建的model数据绑定在此，绑定方式text="{label>/text}" 注意/

 <Page title="{i18n>newTitle}">
    <content>
        <Label id="test_label" text="{label>/text}"></Label>
    </content>
</Page>

4、举例的MVC实现

举例：页面上有一个 Button，用户点击的时显示 “Hlello”
1、SAP 的view类型：
SAPUI5 提供了JSView, XMLView, JSONView 和HTMLView 等几种类型。

• XMLView：SAPUI5 的示例代码主要采用的，也是现代开发语言的趋势
• JSView：对开发人员来说可能感觉比较舒适。

sapui5声明view和conronller文件的名称和位置
bootstrap声明：data-sap-ui-resourceroots = '{"文件名":"路径"}'

view文件

displayBlock="true"使页面全屏
修改的内容都在<content>里,一般结构为

<app>
    <pages>
            <page>
                <content>
                </content>
            </page>
    </pages>
</app>

index文件
shell是最外层控件

new sap.m.Shell({

}).placeAt("content");

5、注

component： controller的组织单元，也可封装JSONModel
Fragment：重用单元，不包含controller，但有处理js文件