SAP学习笔记 - 开发18 - 前端Fiori开发 应用描述符(manifest.json)的用途

article/2025/8/11 12:52:57

上一章讲了 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 格式的清单文件,包含以下关键信息:

  1. 应用程序的基本信息:应用ID、版本、标题、描述等

  2. 数据源配置:OData 服务的定义和模型配置

  3. 路由和导航配置:定义应用的导航结构和路由规则

  4. UI5组件配置:使用的UI5库版本、组件设置等

  5. i18n国际化设置:支持的语言和资源文件位置

  6. 扩展点配置:允许扩展的点和自定义配置

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博客


http://www.hkcw.cn/article/maUVlFvfGe.shtml

相关文章

定时任务:springboot集成xxl-job-core(一)

springboot:2.7.2 xxl-job-core: 2.3.0 一、集成xxl-job 1. 在gitee上下载xxl-job项目 git clone https://gitee.com/xuxueli0323/xxl-job.git 2. 执行以下目录下的sql /xxl-job-2.3.0/doc/db/tables_xxl_job.sql 3. 在xxl-job-admin的项目中配置数据库信息 ### xxl-job, data…

【STM32开发板】接口部分

一、USB接口 可以看到USBP和USBN与PA12,PA11引脚相接,根据协议&#xff0c;需要添加上拉电阻 二、ADC和DAC 根据原理图找到可以作为ADC和DAC的引脚 ADC和DAC属于模拟部分的&#xff0c;所以要接模拟地 三、指示灯电路 找几个通用的引脚&#xff0c;因为单片机的灌电流比拉电流…

阻塞队列BlockingQueue解析

阻塞队列是一个支持两个附加操作的队列。这两个附加的操作支持阻塞的插入和移除的方法。 阻塞插入&#xff1a;当队列满的时候&#xff0c;队列会阻塞插入元素的线程&#xff0c;直到队列不满。 阻塞移除&#xff1a;当队列空的时候&#xff0c;队列会阻塞移除元素的线程&…

[Redis] Redis命令在Pycharm中的使用

初次学习&#xff0c;如有错误还请指正 目录 String命令 Hash命令 List命令 set命令 SortedSet命令 连接pycharm的过程见&#xff1a;[Redis] 在Linux中安装Redis并连接桌面客户端或Pycharm-CSDN博客 redis命令的使用见&#xff1a;[Redis] Redis命令&#xff08;1&#xf…

车载控制器的“机电一体化”深度集成

我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 所谓鸡汤&#xff0c;要么蛊惑你认命&#xff0c;要么怂恿你拼命&#xff0c;但都是回避问题的根源&…

PINN模型相关原理

PINN模型相关原理 目录 PINN模型相关原理原本的物理界的利用神经网络的参数估计PINN 的原理介绍一、基本思想二、PINN 的损失函数三、自动微分&#xff08;Autodiff&#xff09;四、PINN 的优势与挑战 原本的物理界的利用神经网络的参数估计 原本物理界需要确定一个三维流体&a…

计算机基础——宏病毒防御与网络技术

文章目录 宏病毒详解与防范措施宏病毒简介宏病毒的特点宏病毒的传播途径宏病毒的防范措施宏病毒的检测与清除 自治计算机与自治系统解析什么是自治计算机&#xff1f;技术特点 自治系统&#xff08;Autonomous System, AS&#xff09;特点&#xff1a;自治系统类型 总结&#x…

MySql(十一)

目录 准备工作 1&#xff09;准备一张表 2&#xff09;插入数据 分组 1&#xff09;通过性别去统计各组的平局工资 2.limit关键字 不使用limit的关键字 使用limit的关键字 使用limit关键字获取从指定行开始获取 准备工作 1&#xff09;准备一张表 CREATE table role(roleid INT…

论文阅读(六)Open Set Video HOI detection from Action-centric Chain-of-Look Prompting

论文来源&#xff1a;ICCV&#xff08;2023&#xff09; 项目地址&#xff1a;https://github.com/southnx/ACoLP 1.研究背景与问题 开放集场景下的泛化性&#xff1a;传统 HOI 检测假设训练集包含所有测试类别&#xff0c;但现实中存在大量未见过的 HOI 类别&#xff08;如…

使用 SASS 与 CSS Grid 实现鼠标悬停动态布局变换效果

最终效果概述 页面为 3x3 的彩色格子网格&#xff1b;当鼠标悬停任意格子&#xff0c;所在的行和列被放大&#xff1b;使用纯 CSS 实现&#xff0c;无需 JavaScript&#xff1b;利用 SASS 的模块能力大幅减少冗余代码。 HTML 结构 我们使用非常基础的结构&#xff0c;9 个 .i…

linux 后记

Linux Server 下载一个Server的版本&#xff0c;就是那种只有命令行的 学会这个就可以去租一个aliyun服务器&#xff0c;挺便宜的 如果在aliyun买服务器的话就不用管镜像源 但是如果是自己的虚拟机就必须设置镜像源&#xff0c;上网搜索阿里的镜像源&#xff0c;然后手动输入&…

2025年第三届CCF·夜莺开源创新论坛通知

点击蓝字 关注我们 CCF Opensource Development Committee 01 大会简介 由中国计算机学会主办、CCF开源发展委员会及夜莺开源社区承办的第三届CCF夜莺开源创新论坛拟于2025年7月4日在北京召开。本次论坛以“AI 加速可观测”为主题&#xff0c;汇聚了开源夜莺核心开发团队&#…

【2025CCF中国开源大会】RISC-V 开源生态的挑战与机遇分论坛重磅来袭!共探开源芯片未来

点击蓝字 关注我们 CCF Opensource Development Committee 开源浪潮正从软件席卷硬件领域&#xff0c;RISC-V作为全球瞩目的开源芯片架构&#xff0c;正在重塑计算生态的版图&#xff01;相较于成熟的x86与ARM&#xff0c;RISC-V生态虽处爆发初期&#xff0c;却蕴藏着无限可能。…

分布式流处理与消息传递——Kafka ISR(In-Sync Replicas)算法深度解析

Java Kafka ISR&#xff08;In-Sync Replicas&#xff09;算法深度解析 一、ISR核心原理 #mermaid-svg-OQtnaUGNQ9PMgbW0 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-OQtnaUGNQ9PMgbW0 .error-icon{fill:#55222…

力扣题解106:从中序与后序遍历序列构造二叉树

一、题目内容 题目要求根据二叉树的中序遍历序列和后序遍历序列来重建二叉树。具体来说&#xff0c;我们需要利用中序遍历序列和后序遍历序列的特点&#xff0c;通过递归的方法逐步构建出完整的二叉树。 中序遍历序列的特点是&#xff1a;左子树 -> 根节点 -> 右子树。后…

基于微信小程序的scratch学习系统

博主介绍&#xff1a;java高级开发&#xff0c;从事互联网行业六年&#xff0c;熟悉各种主流语言&#xff0c;精通java、python、php、爬虫、web开发&#xff0c;已经做了六年的毕业设计程序开发&#xff0c;开发过上千套毕业设计程序&#xff0c;没有什么华丽的语言&#xff0…

win11回收站中出现:查看回收站中是否有以下项: WPS云盘回收站

好久没更新了&#xff0c;首先祝所有大朋友、小朋友六一儿童节快乐&#xff0c;真的希望我们永远都不会长大呀&#xff0c;长大真的好累呀(•_•) 免责声明 笔者先来个免责声明吧&#xff0c;被网上的阴暗面吓到了 若读者参照笔者的这篇文章所执行的操作中途或后续出现的任何…

基于springboot的运动员健康管理系统

博主介绍&#xff1a;java高级开发&#xff0c;从事互联网行业六年&#xff0c;熟悉各种主流语言&#xff0c;精通java、python、php、爬虫、web开发&#xff0c;已经做了六年的毕业设计程序开发&#xff0c;开发过上千套毕业设计程序&#xff0c;没有什么华丽的语言&#xff0…

6、修改和校正时间

一、输入date命令可以看到系统的日期时间 date (后面的CST表示中国标准时间) 二、如果显示时间比当前时间慢了8小时&#xff0c;那就要设置一下时区 sudo dpkg-reconfigure tzdata 选择Asia 选择Shanghai 三、树莓派没有电池&#xff0c;断电后无法保存时间。树莓派默认安…

MySQL基础查询

目录 一、表中的增删查改 1.1直接插入 1.2更新 1.3替换 二、Retrieve 2.1Select列 2.1.1where子句 2.1.2结果排序 三、Update 四、Delete 五、截断表 六、插入查询结果 6.1案例&#xff1a;对表中数据去重 七、聚合函数 八、分组统计group by子句 一、表中的增删查改 创建creat…