sapui5 walkthrough 6-10

6. Step 6: Modules

在sapui5中，将资源称为model。

修改App.controller.js

sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast"
], function (Controller, MessageToast) {
   "use strict";
   return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
      onShowHello : function () {
         MessageToast.show("Hello World");
      }
   });
});

sap.ui.define可以为controller跟其他js model定义全局命名空间。使用命名空间，可以在整个应用程序中进行寻址。

7. Step 7: JSON Model

修改App.controller.js

sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast",
   "sap/ui/model/json/JSONModel"
], function (Controller, MessageToast, JSONModel) {
   "use strict";
   return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
      onInit : function () {
         // set data model on view
         var oData = {
            recipient : {
               name : "World"
            }
         };
         var oModel = new JSONModel(oData);
         this.getView().setModel(oModel);
      },
      onShowHello : function () {
         MessageToast.show("Hello World");
      }
   });
});

添加了一个onInit函数，onInit是SAPUI5的生命周期方法之一，在创建controller时由框架调用，类似于控件的构造函数。

使用setModel函数，可以将当前的JSONModel设置到view中。

修改App.view.xml

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Button
      text="Say Hello"
      press=".onShowHello"/>
   <Input
      value="{/recipient/name}"
      description="Hello {/recipient/name}"
      valueLiveUpdate="true"
      width="60%"/>
</mvc:View>

{…}表示数据取自对象"recipient"的"name"属性。被叫做 "data binding".

修改index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>SAPUI5 Walkthrough</title>
    <script
        id="sap-ui-bootstrap"
        src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-theme="sap_belize"
        data-sap-ui-libs="sap.m"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-async="true"
        data-sap-ui-resourceroots='{
            "sap.ui.demo.walkthrough": "./"
        }'
        data-sap-ui-oninit="module:sap/ui/demo/walkthrough/index">
    </script>
    <script src="index.js"></script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>

view中description="Hello {/recipient/name}"这种形式为复杂绑定，需要设置data-sap-ui-compatVersion="edge"来确保它可以正确的运行

不设置

设置

8. Step 8: Translatable Texts

i18n用来实现国际化过程。

新建i18n.properties

showHelloButtonText=Say Hello
helloMsg=Hello {0}

通过在文本中添加花括号中的数字，可以向文本添加任意数量的参数。这些数字对应参数的顺序(从0开始)。

再实际项目中，通过添加后缀来实现多语言支持，i18n_de.properties为德文，i18n_en.properties为英文。

修改App.controller.js

sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast",
   "sap/ui/model/json/JSONModel",
   "sap/ui/model/resource/ResourceModel"
], function (Controller, MessageToast, JSONModel, ResourceModel) {
   "use strict";
   return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
     onInit : function () {
         // set data model on view
         var oData = {
            recipient : {
               name : "World"
            }
         };
         var oModel = new JSONModel(oData);
         this.getView().setModel(oModel);
         // set i18n model on view
         var i18nModel = new ResourceModel({
            bundleName: "sap.ui.demo.walkthrough.i18n.i18n"
         });
         this.getView().setModel(i18nModel, "i18n");
      },
      onShowHello : function () {
         // read msg from i18n model
         var oBundle = this.getView().getModel("i18n").getResourceBundle();
         var sRecipient = this.getView().getModel().getProperty("/recipient/name");
         var sMsg = oBundle.getText("helloMsg", [sRecipient]);
         // show message
         MessageToast.show(sMsg);
      }
   });
});

当页面使用多个model的时候，可以用 this.getView().setModel(i18nModel, "i18n"); 为页面指定多个model。

修改App.view.xml

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Button
      text="{i18n>showHelloButtonText}"
      press=".onShowHello"/>
   <Input
      value="{/recipient/name}"
      description="Hello {/recipient/name}"
      valueLiveUpdate="true"
      width="60%"/>
</mvc:View>

9. Step 9: Component Configuration

component是SAPUI5应用程序中使用的独立且可重用的部分。

sapui5执行程序的顺序是index.html⇒Component.js⇒manifest.json。但是当我们使用Fiori Launchpad来启动sapui5的程序时，不使用index.html，而是直接从Component.js文件启动。

创建Component.js

sap.ui.define([
   "sap/ui/core/UIComponent",
   "sap/ui/model/json/JSONModel",
   "sap/ui/model/resource/ResourceModel"
], function (UIComponent, JSONModel, ResourceModel) {
   "use strict";
   return UIComponent.extend("sap.ui.demo.walkthrough.Component", {
      metadata : {
         rootView: {
            "viewName": "sap.ui.demo.walkthrough.view.App",
            "type": "XML",
            "async": true,
            "id": "app"
         }
      },
      init : function () {
         // call the init function of the parent
         UIComponent.prototype.init.apply(this, arguments);
         // set data model
         var oData = {
            recipient : {
               name : "World"
            }
         };
         var oModel = new JSONModel(oData);
         this.setModel(oModel);

         // set i18n model
         var i18nModel = new ResourceModel({
            bundleName : "sap.ui.demo.walkthrough.i18n.i18n"
         });
         this.setModel(i18nModel, "i18n");
      }
   });
});

component的init函数会在sapui5启动的时候，自动被调用，component继承sap.ui.core.UIComponent，这里需要在重写的init方法中，在调用父类的init方法。

定义在init中的model会被其他controls自动的继承，所以模型也可以使用在view中。

修改App.controller.js

sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast"
], function (Controller, MessageToast) {
   "use strict";
   return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
      onShowHello : function () {
         // read msg from i18n model
         var oBundle = this.getView().getModel("i18n").getResourceBundle();
         var sRecipient = this.getView().getModel().getProperty("/recipient/name");
         var sMsg = oBundle.getText("helloMsg", [sRecipient]);
         // show message
         MessageToast.show(sMsg);
      }
   });
});

修改index.js

sap.ui.define([
    "sap/ui/core/ComponentContainer"
], function (ComponentContainer) {
    "use strict";

    new ComponentContainer({
        name: "sap.ui.demo.walkthrough",
        settings : {
            id : "walkthrough"
        },
        async: true
    }).placeAt("content");
});

使用ComponentContainer才可以通过component的配置来进行view的实例化。

10. Step 10: Descriptor for Applications

所有application的特定配置都应该放进一个独立的描述文件"manifest.json"中。它会使程序更加灵活，以便托管在Fiori Lanuchpad中。

创建manifest.json文件

{
  "_version": "1.12.0",
  "sap.app": {
    "id": "sap.ui.demo.walkthrough",
    "type": "application",
    "i18n": "i18n/i18n.properties",
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "applicationVersion": {
      "version": "1.0.0"
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
        "desktop": true,
        "tablet": true,
        "phone": true
    }
  },
  "sap.ui5": {
    "rootView": {
        "viewName": "sap.ui.demo.walkthrough.view.App",
        "type": "XML",
        "async": true,
        "id": "app"
    },
    "dependencies": {
      "minUI5Version": "1.60",
      "libs": {
        "sap.m": {}
      }
    },
    "models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "sap.ui.demo.walkthrough.i18n.i18n"
        }
      }
    }
  }
}

manifest.json文件中有命名空间定义了三个重要的部分。

sap.appに関する設定：アプリケーションのid、タイトルなど
sap.uiに関する設定：サポートするデバイスの種類、UIのテーマなど
sap.ui5に関する設定：最初に表示するビュー(rootView)、従属するライブラリのバージョンなど

修改index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>SAPUI5 Walkthrough</title>
    <script
        id="sap-ui-bootstrap"
        src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-theme="sap_belize"
        data-sap-ui-resourceroots='{
            "sap.ui.demo.walkthrough": "./"
        }'
        data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-async="true">
    </script>
</head>
<body class="sapUiBody" id="content">
    <div data-sap-ui-component data-name="sap.ui.demo.walkthrough" data-id="container" data-settings='{"id" : "walkthrough"}'></div>
</body>
</html>

在bootstrapping的时候，启动了module ComponentSupport。通过div标签声明了组件，这样将在onInit事件中实例化组件。

之后可以删除index.js，描述文件将处理所有的事情。

修改i18n.properties

# App Descriptor
appTitle=Hello World
appDescription=A simple walkthrough app that explains the most important concepts of SAPUI5

# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}

修改Component.js

sap.ui.define([
   "sap/ui/core/UIComponent",
   "sap/ui/model/json/JSONModel"
], function (UIComponent, JSONModel) {
   "use strict";
   return UIComponent.extend("sap.ui.demo.walkthrough.Component", {
      metadata : {
            manifest: "json"
      },
      init : function () {
         // call the init function of the parent
         UIComponent.prototype.init.apply(this, arguments);
         // set data model
         var oData = {
            recipient : {
               name : "World"
            }
         };
         var oModel = new JSONModel(oData);
         this.setModel(oModel);
      }
   });
});

manifest: "json"表示对描述文件的引用，该引用将在组件实例化时自动加载和解析。