SAPUI5应用程序描述符：配置分离与组件灵活性-CSDN博客

说明

所有特定于应用程序的配置设置现在将进一步放在一个称为manifest.json的单独描述符文件中。这明确地将应用程序编码与配置设置分离开来，使我们的应用程序更加灵活。例如，所有SAP Fiori应用程序都是作为组件实现的，并附带一个描述符文件，以便托管在SAP Fiori启动平台中。

SAP Fiori launchpad充当应用程序容器，并实例化应用程序，而没有本地HTML文件作为引导。相反，将解析描述符文件，并将组件加载到当前HTML页面中。这允许在同一上下文中显示多个应用程序。每个应用程序都可以定义本地设置，比如语言属性、支持的设备等等。我们还可以使用描述符文件来加载额外的资源并实例化模型，比如我们的i18n资源包。

预览

在这里插入图片描述

一个输入字段和一个显示输入字段值的描述(与上一步没有视觉上的改变)

代码

你可以在演练-第10步查看和下载所有文件。

注意事项
自动模型实例化仅在SAPUI5版本1.30中可用。如果你使用的是旧版本，你可以在Component.js文件的init方法中手动实例化资源包和应用的其他模型，就像我们在步骤9:组件配置中所做的那样。

webapp/manifest.json (New)

{
  "_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",
		  "supportedLocales": [""],
		  "fallbackLocale": ""
		}
	  }
	}
  }
}

注意
在本教程中，我们只介绍描述符文件的最重要的设置和参数。在SAP Web IDE中，您可能会得到验证错误，因为缺少一些设置—您可以忽略这些设置。

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

sap.app

sap.app命名空间包含以下特定于应用程序的属性:
id(必选)：应用程序组件的命名空间
ID不能超过70个字符。必须唯一，与组件ID/namespace对应。
type：定义了我们想要配置的内容，在这里是:应用程序
i18n：定义资源包文件的路径
title：handlebars(语义模板库)语法的应用程序标题，引用自应用程序的资源包
description：从应用的资源包中引用的句柄语法的简短描述文本
applicationVersion：应用程序的版本，以便以后能够轻松地更新应用程序

sap.ui

sap.ui命名空间提供以下UI-specific属性:
technology：这个值指定了UI技术; 在我们的例子中，我们使用SAPUI5
deviceTypes：应用程序支持的设备类型：桌面，平板，手机(所有默认为true)

sap.ui5

sap.ui5命名空间添加了SAPUI5-specific的配置参数，由SAPUI5自动处理。最重要的参数是:
rootView：如果指定此参数，组件将自动实例化视图，并将其用作该组件的根
dependencies：这里我们声明应用程序中使用的UI库
models：在描述符的这一部分，我们可以定义模型，当应用程序启动时，SAPUI5会自动实例化这些模型。现在我们可以定义本地资源包。我们将模型的名称“i18n”定义为key，并通过命名空间指定包文件。与前面的步骤一样，翻译后的文本文件存储在i18n文件夹中，命名为i18n.properties。我们只需用app的命名空间作为文件路径的前缀。app组件的init方法中的手动实例化将在稍后的步骤中删除。supportedlocale和fallbackLocale属性被设置为空字符串，因为在本教程中，我们的演示应用程序为了简单起见只使用了一个i18n.properties文件，并且我们希望防止浏览器试图根据您的浏览器设置和您的语言环境加载额外的i18n_*.properties文件。

出于兼容性原因，根对象和每个节在内部属性ABC下声明了描述符版本号1.1.0。特性可能会在描述符的未来版本中添加或更改，版本号有助于通过读取描述符的工具识别应用程序设置。

注意
资源包的属性包含在描述符中的两个花括号中。这不是SAPUI5数据绑定语法，而是在句柄语法中的描述符对资源包的变量引用。引用的文本在本教程中构建的应用程序中是不可见的，但可以被应用程序容器如SAP Fiori launchpad读取。

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

从现在开始，我们将不再需要index.js，因为描述符会处理一切。

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 : {
            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)替换rootView属性。这定义了一个对描述符的引用，该描述符将在组件实例化时自动加载和解析。现在我们可以完全删除包含资源包模型实例化的代码行。它通过SAPUI5在描述符中的配置条目的帮助下自动完成。我们还可以删除对sap/ui/model/resource/ResourceModel和相应的形参ResourceModel的依赖，因为我们不会在匿名回调函数中使用它。

提示
在SAPUI5的早期版本中，应用程序的其他配置设置，如服务配置、根视图和路由配置，必须添加到Component.js文件的元数据部分。从SAPUI5版本1.30开始，我们建议您在manifest.json描述符文件中定义这些设置。基于更老的SAPUI5版本创建的应用程序和示例仍然使用Component.js文件——所以它仍然被支持，但不推荐。