Descriptor for Applications
manifest.json
所有特定于应用程序的配置设置现在将进一步放在名为manifest.json的单独描述符文件中。这清楚地将应用程序编码与配置设置分开,使我们的应用程序更加灵活。例如,所有sapfiori应用程序都实现为组件,并附带一个描述符文件,以便托管在sap fiori launchpad中。
SAP Fiori launchpad充当应用程序容器并实例化应用程序,而无需为bootstrap提供本地HTML文件。相反,描述符文件将被解析,组件将被加载到当前的HTML页面中。这允许在同一上下文中显示多个应用程序。每个应用程序都可以定义本地设置,例如语言属性、支持的设备等。我们还可以使用描述符文件加载额外的资源,并实例化i18n资源包之类的模型。
注意
自动实例化模型仅适用于SAPUI5 1.30版。如果您使用的是旧版本,那么可以在Component.js文件的init方法中手动实例化资源包和应用程序的其他模型,就像我们在步骤:组件配置中所做的那样。
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",
"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/命名空间相对应。 - type:定义我们想要配置什么,这里是:application
- i18n:定义资源包文件的路径
- title:从应用程序资源包中引用的句柄(handlebars)语法中的应用程序标题
- description:从应用的资源包中引用的句柄语法的简短描述文本
- applicationVersion:应用程序的版本,以便以后能够轻松地更新应用程序
- id(强制):应用程序组件的命名空间
-
sap.ui
sap.ui命名空间提供了以下ui特定的属性:- technology:这个值指定了UI技术;在我们的例子中,我们使用SAPUI5
- deviceTypes:告诉应用程序支持什么设备类型:桌面,平板,手机(所有默认为true)
-
sap.ui5
sap.ui5命名空间添加了与SAPUI5相关的配置参数,由SAPUI5自动处理。最重要的参数是:- rootView:如果指定此参数,组件将自动实例化视图,并将其用作该组件的根
- dependencies: 这里我们声明应用程序中使用的UI库
- models: 在描述符的这一部分,我们可以定义models,当应用程序启动时,SAPUI5会自动实例化这些模型。现在我们可以定义本地资源包。我们将模型的名称“i18n”定义为键,并通过命名空间指定包(bundle)文件。与前面的步骤一样,翻译文本的文件存储在i18n文件夹中,名称为i18n.properties。我们只需用app的命名空间作为文件路径的前缀。app组件的init方法中的手动实例化将在稍后的步骤中删除。将supportedLocales和fallbackLocale属性被设置为空字符串,如在本教程中只有一个我们的演示应用程序使用i18n.properties为简单起见,我们希望防止浏览器尝试i18n_*.properties根据您的浏览器设置和区域设置加载其他文件。
出于兼容性原因,根对象和每个部分均在内部属性_version下声明了描述符版本号1.12.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的bootstrapping 脚本中,我们启用了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}
在资源包中,我们简单地为应用添加文本,并添加注释来从语义上分离bundle文本。
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);
}
});
});
在组件的metadata(元数据)部分,我们现在用属性键manifest和值json替换rootView属性。这定义了一个对描述符的引用,该描述符将在组件实例化时自动加载和解析。现在我们可以完全删除包含资源包模型实例化的代码行。SAPUI5在描述符中的配置条目的帮助下自动完成。我们还可以删除对sap/ui/model/resource/ResourceModel和相应的正式参数ResourceModel的依赖,因为我们不会在匿名回调函数中使用它。
在SAPUI5的早期版本中,应用程序的其他配置设置,如服务配置、根视图和路由配置,必须添加到Component.js文件的元数据部分。从SAPUI5版本1.30开始,我们建议您在manifest.json描述符文件中定义这些设置。基于更老的SAPUI5版本创建的应用程序和示例仍然使用Component.js文件来实现这个目的——所以它仍然被支持,但不推荐。
约定:
1、描述符文件名为manifest.json,位于webapp文件夹中。
2、为应用的标题和描述使用可翻译的字符串