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"); } }); });
使用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>
不设置
设置
8. Step 8: Translatable Texts
i18n用来实现国际化过程。新建i18n.properties
showHelloButtonText=Say Hello
helloMsg=Hello {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"); } }); });
定义在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); } }); });
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" } } } } }
- sap.appに関する設定：アプリケーションのid、タイトルなど
- sap.uiに関する設定：サポートするデバイスの種類、UIのテーマなど
- sap.ui5に関する設定：最初に表示するビュー(rootView)、従属するライブラリのバージョンなど
<!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>
之后可以删除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"表示对描述文件的引用，该引用将在组件实例化时自动加载和解析。
