SAPUI5 Walkthrough教程（十）——Descriptor for Applications应用程序描述符

沁熙儿

已于 2023-10-20 13:22:02 修改

阅读量95

点赞数

分类专栏： sap fiori 文章标签： javascript css3 visual studio code

于 2023-10-20 09:46:32 首次发布

本文链接：https://blog.csdn.net/qq_54432686/article/details/133939418

版权

sap fiori 专栏收录该内容

26 篇文章 11 订阅

订阅专栏

这一教程中我们将进一步优化代码，最后展示效果跟前面一摸一样。我们将所有特定于应用程序的配置设置放在一个名为 manifest.json 的单独描述符文件中。
这清楚地将应用程序编码与配置设置分开，使应用程序更加灵活。
我们可以使用描述符文件来加载其他资源并实例化模型，例如 i18n 资源包。

webapp/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",
		"id": "app"
	},
	"dependencies": {
	  "minUI5Version": "1.93",
	  "libs": {
		"sap.ui.core": {},
		"sap.m": {}
	  }
	},
	"models": {
	  "i18n": {
		"type": "sap.ui.model.resource.ResourceModel",
		"settings": {
		  "bundleName": "sap.ui.demo.walkthrough.i18n.i18n",
		  "supportedLocales": [""],
		  "fallbackLocale": ""
		}
	  }
	}
  }
}

manifest.json 文件的内容是 JSON 格式的配置对象，其中包含所有全局应用程序设置和参数。manifest文件称为应用程序、组件和库的描述符，在用于应用程序时也称为“描述符”或“应用程序描述符”。它存储在 Web 应用文件夹中，并由 SAPUI5 读取以实例化组件。manifest.json 文件中的命名空间定义了三个重要部分：sap.app、sap.ui、sap.ui5

sap.app 命名空间包含以下特定于应用程序的属性：

id (必须): 应用程序组件的命名空间.ID 不得超过 70 个字符。它必须是唯一的，并且必须与组件 ID/命名空间相对应。
type: Defines what we want to configure, here: an application
i18n: 定义我们要配置的内容
title: 从应用的资源包引用的处理条语法中的应用程序标题
description: 简短描述
applicationVersion: 应用版本

sap.ui 命名空间提供以下特定于 UI 的属性：

technology：此值指定 UI 技术
deviceType：告知应用支持哪些设备：台式机、平板电脑、手机（默认情况下均为 true）

sap.ui5 命名空间添加特定于 SAPUI5 的配置参数，这些参数由 SAPUI5 自动处理。最重要的参数是：
rootView：指定此参数，组件将自动实例化视图并将其用作此组件的根。
dependencies: 这里声明应用程序中使用的 UI 库。
models：在描述符的这一部分中，我们可以定义在应用启动时由 SAPUI5 自动实例化的模型。在这里，我们现在可以定义本地资源包。

webapp\index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SAPUI5 Walkthrough</title>
	<script
		id="sap-ui-bootstrap"
		src="https://sdk.openui5.org/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>

现在我们在索引.html的主体中声明我们的组件。在 index.html 的引导脚本中，我们启用 ComponentSupport 模块并删除 sap.m 库。然后，我们通过 div 标签在主体中声明我们的组件。这将在执行 onInit 事件时实例化组件。
webapp/i18n/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}

webapp/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 : {
            interfaces: ["sap.ui.core.IAsyncContentCreation"],
            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);
      }
   });
});