SAP学习笔记 - 开发18 - 前端Fiori开发 应用描述符(manifest.json)的用途
上一章讲了 Component配置(组件化)。
本章继续讲Fiori的知识。
目录
1,应用描述符(Descriptor for Applications)
1), manifest.json
2),index.html
3),Component.js
2,SAP Fiori 应用描述符总结
2-1,什么是应用描述符?
2-2,文件位置
2-3,主要作用
2-4,示例结构
下面是详细内容。
1,应用描述符(Descriptor for Applications)
OpenUI5 SDK - Demo Kit
这个东西是啥呢?其实就是进一步的把Component.js里的内容给优化。
这里指的就是拿到manifest.json 里面来,处理都放到框架里了,以进一步减少开发代码量。
下面来看一下具体把哪些代码拿到manifest.json里, 以及写法。
1), manifest.json
{"_version": "1.65.0","sap.app": {"id": "ui5.walkthrough","i18n": "i18n/i18n.properties","title": "{{appTitle}}","description": "{{appDescription}}","type": "application","applicationVersion": {"version": "1.0.0"}},"sap.ui": {"technology": "UI5","deviceTypes": {"desktop": true,"tablet": true,"phone": true}},"sap.ui5": {"dependencies": {"minUI5Version": "1.108.0","libs": {"sap.ui.core": {},"sap.m": {}}},"models": {"i18n": {"type": "sap.ui.model.resource.ResourceModel","settings": {"bundleName": "ui5.walkthrough.i18n.i18n","supportedLocales": [""],"fallbackLocale": ""}}},"rootView": {"viewName": "ui5.walkthrough.view.App","type": "XML","id": "app"}}
}
下面来看几行关键代码:可以看到,上一章还有之前讲的很多内容都在这里了
你只需要做配置,剩下的加载什么的都交给UI5来做。
1,下面几行指定了Fiori App的文件路径(./),Properties文件名,App的Title/描述/版本
"sap.app": {
"id": "ui5.walkthrough",
"i18n": "i18n/i18n.properties",
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"type": "application",
"applicationVersion": {
"version": "1.0.0"
}
2,这几行指定了运用的技术UI5,以及该应用会运行在哪些设备上(比如桌面,平板,手机)
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
3,这几行指定UI最低版本,以及加载的库
"dependencies": {
"minUI5Version": "1.108.0",
"libs": {
"sap.ui.core": {},
"sap.m": {}
}
}
4,这一段指定了国际化的处理类,以及bundle名称,该App支持的语言
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "ui5.walkthrough.i18n.i18n",
"supportedLocales": [""],
"fallbackLocale": ""
}
}
},
5,这段指定的是默认view的名称,ID,类型等
"rootView": {
"viewName": "ui5.walkthrough.view.App",
"type": "XML",
"id": "app"
}
2),index.html
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>UI5 Walkthrough</title><scriptid="sap-ui-bootstrap"src="resources/sap-ui-core.js"data-sap-ui-theme="sap_horizon"data-sap-ui-compat-version="edge"data-sap-ui-async="true"data-sap-ui-on-init="module:sap/ui/core/ComponentSupport"data-sap-ui-resource-roots='{"ui5.walkthrough": "./"}'></script>
</head>
<body class="sapUiBody" id="content"><div data-sap-ui-component data-name="ui5.walkthrough" data-id="container" data-settings='{"id" : "walkthrough"}'></div>
</body>
</html>
看一下几行关键代码:
- data-sap-ui-on-init="module:sap/ui/core/ComponentSupport"
这行代码指定了初期化跑的是Component.js,不再是index.js了,所以index.js也就没用了
- <div data-sap-ui-component data-name="ui5.walkthrough" data-id="container" data-settings='{"id" : "walkthrough"}'></div>
这行代码指定了很多信息,比如
- data-sap-ui-component 是一个标识,给UI5 用的,UI5 会根据这个标识来替换内容
- data-name 指定Component.js 路径
3),Component.js
sap.ui.define(["sap/ui/core/UIComponent","sap/ui/model/json/JSONModel"
], (UIComponent, JSONModel) => {"use strict";return UIComponent.extend("ui5.walkthrough.Component", {metadata : {interfaces: ["sap.ui.core.IAsyncContentCreation"],manifest: "json"},init() {// call the init function of the parentUIComponent.prototype.init.apply(this, arguments);// set data modelconst oData = {recipient : {name : "World"}};const oModel = new JSONModel(oData);this.setModel(oModel);}});
});
看一下几行代码:
- 这几行指定了元数据已经移到manifest.json里面了
index.html里面指定Component.js,然后跑到Component.js之后,就会去读取manifest.json
metadata : {
interfaces: ["sap.ui.core.IAsyncContentCreation"],
manifest: "json"
},
跑一下看看:效果是一样的
下面来做个总结。
以下内容是从Deepseek查询整理得到。(我发现用Deepseek内容之后吧,CSDN好像审核难了)
2,SAP Fiori 应用描述符总结
在 SAP Fiori 开发中,应用描述符(通常称为 manifest.json
文件)是一个核心配置文件,它定义了 Fiori 应用程序的元数据和配置信息。
2-1,什么是应用描述符?
应用描述符是一个 JSON 格式的清单文件,包含以下关键信息:
-
应用程序的基本信息:应用ID、版本、标题、描述等
-
数据源配置:OData 服务的定义和模型配置
-
路由和导航配置:定义应用的导航结构和路由规则
-
UI5组件配置:使用的UI5库版本、组件设置等
-
i18n国际化设置:支持的语言和资源文件位置
-
扩展点配置:允许扩展的点和自定义配置
2-2,文件位置
通常位于项目的 webapp
目录下,命名为 manifest.json
。
2-3,主要作用
-
作为Fiori应用的单一配置源
-
支持应用在SAP Fiori Launchpad中的集成
-
定义应用的元数据和行为
-
支持应用的扩展性(通过扩展点)
2-4,示例结构
json
{"_version": "1.32.0","sap.app": {"id": "my.app","type": "application","title": "My Fiori App","description": "A sample Fiori application"},"sap.ui5": {"rootView": {"viewName": "my.app.view.App","type": "XML"},"models": {"i18n": {"type": "sap.ui.model.resource.ResourceModel","settings": {"bundleName": "my.app.i18n.i18n"}}}},"sap.fiori": {"registrationIds": [],"archeType": "transactional"}
}
在SAP Fiori Elements应用中,描述符文件尤为重要,因为许多应用行为都是通过这个文件配置而非硬编码实现的。
以上就是本篇的全部内容。
更多SAP顾问业务知识请点击下面目录链接或东京老树根的博客主页
https://blog.csdn.net/shi_ly/category_12216766.html
东京老树根-CSDN博客