HTML5开发移动web应用——SAP UI5篇

Posted fareise

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML5开发移动web应用——SAP 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");
      }
   });
});
我们将原来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篇的主要内容,如果未能解决你的问题,请参考以下文章

HTML5开发移动web应用——SAP UI5篇

UI5-文档-2.2-使用SAP Web IDE开发应用程序

如何在 SAP UI5 应用中集成第三方库 :一个在移动设备上查看 Web 应用打印调试信息的小技巧

使用SAP云平台portal服务将SAP UI5应用部署到portal上

如何在SAP UI5应用里添加使用摄像头拍照的功能

最简单的SAP云平台开发教程 - 如何开发UI5应用并运行在SAP云平台上