HTML5開發移動web應用——SAP UI5篇(7)
阿新 • • 發佈:2017-06-30
function manifest supported 1.3 配置文件 ini 使用 .get return
分析一下Component框架的代碼含義,引用了core中的UIComponent基礎空間。組件的編寫在UIComponent.extend中進行,即進行擴展。
我們將原來Controller.js文件裏的初始化函數、數據模型綁定配置等工作都放到了Component.js其中。對應的改動Controller.js文件:
在Controller.js文件裏,僅僅保留本項目中須要使用的各個函數。這樣使得項目中各個文件的邏輯更清晰了。
能夠看到,manifest.json文件定義了包含ui5版本號、數據模型等一系列基本信息。
SAPUI5中支持利用Component對組件進行封裝。想封裝一個組件,Component的基本代碼例如以下:
sap.ui.define([ "sap/ui/core/UIComponent"], function (UIComponent) { "use strict"; return UIComponent.extend("", { init : function () { // call the init function of the parent UIComponent.prototype.init.apply(this, arguments); } }); });
分析一下Component框架的代碼含義,引用了core中的UIComponent基礎空間。組件的編寫在UIComponent.extend中進行,即進行擴展。
我們嘗試將之前的應用封裝成一個組件。新建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.wt.Component", { metadata : { rootView: "sap.ui.demo.wt.view.App" }, init : function () { UIComponent.prototype.init.apply(this, arguments); var oData = { recipient : { name : "World" } }; var oModel = new JSONModel(oData); this.setModel(oModel); var i18nModel = new ResourceModel({ bundleName : "sap.ui.demo.wt.i18n.i18n" }); this.setModel(i18nModel, "i18n"); } }); });
sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/m/MessageToast"], function (Controller, MessageToast) { "use strict"; return Controller.extend("sap.ui.demo.wt.controller.App", { onShowHello : function () { var oBundle = this.getView().getModel("i18n").getResourceBundle(); var sRecipient = this.getView().getModel().getProperty("/recipient/name"); var sMsg = oBundle.getText("helloMsg", [sRecipient]); MessageToast.show(sMsg); } }); });
在index.html中。我們能夠直接調用Component:
<script> sap.ui.getCore().attachInit(function () { new sap.ui.core.ComponentContainer( name : "sap.ui.demo.wt" }).placeAt("content"); }); </script>在SAP Fiori應用中。每一個應用都有一個配置文件即manifest.json。裏面定義了一些列的項目配置信息。
本例的manifest文件例如以下:
{ "_version": "1.1.0", "sap.app": { "_version": "1.1.0", "id": "sap.ui.demo.wt",//定義命名空間 "type": "application", "i18n": "i18n/i18n.properties", "title": "{{appTitle}}", "description": "{{appDescription}}", "applicationVersion": { "version": "1.0.0" }, "ach": "CA-UI5-DOC" }, "sap.ui": { "_version": "1.1.0", "technology": "UI5", "deviceTypes": { "desktop": true, "tablet": true, "phone": true }, "supportedThemes": [ "sap_bluecrystal" ] }, "sap.ui5": { "_version": "1.1.0", "rootView": "sap.ui.demo.wt.view.App", "dependencies": { "minUI5Version": "1.30", "libs": { "sap.m": {} } }, "models": { "i18n": { "type": "sap.ui.model.resource.ResourceModel", "settings": { "bundleName": "sap.ui.demo.wt.i18n.i18n" } } } }}
能夠看到,manifest.json文件定義了包含ui5版本號、數據模型等一系列基本信息。
在以後的開發過程中該配置文件會被不斷完好。
HTML5開發移動web應用——SAP UI5篇(7)