HTML5開發移動web應用——SAP UI5篇(7)

標籤：data-   class   roo   pop   組件   mode   fiori   table   extend   

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");      }   });});

我們將原來Controller.js檔案裡的初始化函數、資料模型綁定配置等工作都放到了Component.js其中。對應的改動Controller.js檔案：

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);      }   });});

在Controller.js檔案裡，僅僅保留本項目中須要使用的各個函數。這樣使得項目中各個檔案的邏輯更清晰了。

在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)