当前位置: 首页 > news >正文

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

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

相关文章:

  • 【python基础知识】字典
  • C++多重继承详解与实战解析
  • 编程基础:通信
  • [SAP] 矩阵复制(Matrix Copy)
  • Linux开发追踪(IMX6ULL篇_第一部分)
  • 智语心桥:当AI遇上“星星的孩子”,科技如何点亮沟通之路?
  • 【办公类-22-05】20250601Python模拟点击鼠标上传CSDN12篇
  • 机器学习有监督学习sklearn实战二:六种算法对鸢尾花(Iris)数据集进行分类和特征可视化
  • 核心机制:TCP 断开连接(四次挥手)
  • 人工智能在智能能源管理中的创新应用与未来趋势
  • springboot中@Async做异步操作(Completable异步+ThreadPoolTaskExecutor线程池+@Async注解)
  • Leetcode 269. 火星词典
  • Python----目标检测(《SSD: Single Shot MultiBox Detector》论文和SSD的原理与网络结构)
  • Redis:安装与常用命令
  • 基于ZYNQ ARM+FPGA异构平台的声呐数据采集系统设计
  • ARM P15协处理器指令详解:架构、编程与应用实践
  • 支持向量机(SVM):解锁数据分类与回归的强大工具
  • C#语音识别:使用Whisper.net实现语音识别
  • PySide6 GUI 学习笔记——常用类及控件使用方法(标签控件QLabel)
  • 鸿蒙OS基于UniApp的区块链钱包开发实践:打造支持鸿蒙生态的Web3应用#三方框架 #Uniapp
  • 衡量网站质量的标准/大数据营销
  • 阿里云做外贸网站/长沙网站推广seo
  • 深圳企业宣传片制作/长沙快速排名优化
  • 网站和虚拟服务器/营销网站建设免费
  • 企业网站策划案例/汕头网站建设方案推广
  • 成都公司做网站/抖音广告推广