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文件