在现代 SAP UI5 和 OpenUI5 的开发工作中,SAP Fiori Tools 是一个不可或缺的工具集。它旨在简化开发者的工作流程,提高效率,同时确保应用符合 SAP Fiori 的设计原则与最佳实践。
SAP Fiori Tools 是 Visual Studio Code 内八个扩展包的集合,在笔者的《一套适合 SAP UI5 开发人员循序渐进的学习教程》里介绍过详细的安装和使用步骤。
有教程的学习者在评论区留言:
请教一个问题。是只有通过UI5 Tools向导创建的应用才会有Application Information。非向导创建的,比如跟着官方的Walkthrough教程做的练习,也想用这个Application Info页面,该怎么做呢?
本文就来解答这个问题。
我们打开 Visual Studio Code,使用菜单 View->Command Palette... 或者快捷键 Ctrl+Shift+P, 打开命令输入栏:
可以看到一系列以 Fiori:开头的命令菜单,其中之一就是教程读者咨询的 Open Application Info.
我们点击下图右侧的齿轮图标:
可以发现这个 Fiori:Open Application Info菜单,来自 SAP Fiori Tools - Application Modeler这个 Visual Studio Code 的扩展。换言之,Application Info 菜单,属于 Application Modeler 扩展的一部分。
SAP Fiori Tools - Application Modeler 是一个专注于应用模型设计的扩展,其目标是通过直观的可视化方式和工具,帮助开发者快速定义和管理 SAP Fiori 应用的应用模型。
对于刚接触 SAP Fiori 开发的新手来说,配置应用模型可能是一项复杂且容易出错的任务。Application Modeler 的可视化界面和向导式操作显著降低了学习曲线,开发者可以专注于应用功能本身,而不需要深入了解底层实现细节。
单击上图 Sources 下面的超链接,打开 Application Modeler 扩展的帮助文档,得知如果一个 SAP UI5 应用使用 SAP Fiori Tools 创建,则默认支持 Application Modeler.
因此笔者教程配套的源代码里,凡是 Fiori Elements 应用,都能够出现在 Open Application Info 命令的显示结果里:
扩展的帮助文档也提到,手动创建的 SAP UI5 Freestyle 应用,也是支持 Application Modeler 的,只是需要用菜单 Fiori:Migrate Project for use in Fiori tools做一个迁移。
具体迁移的步骤也很简单,使用 Ctrl+Shift+P 召唤出菜单之后:
Visual Studio Code 扩展会自动帮助我们分析,当前文件下存在哪些 SAP UI5 项目可以做迁移:
稍等片刻后,检索出结果,笔者《一套适合 SAP UI5 开发人员循序渐进的学习教程》里绝大多数项目,都被检索出来罗列如下。
比如我想将编号为 09 的项目做迁移,将其勾选,点击 Start Migration 按钮即可开始迁移。
点击 Start Migration 之后,看到 Project migrated successfully,说明迁移成功了:
这个迁移命令会自动修改下列这些 SAP UI5 项目文件的部分源代码,让其可以被 Application Info 菜单触发的功能识别出来:
迁移完成之后,仍然使用命令行 ui5 serve启动应用。和迁移前稍有不同的是,因为 package.json的依赖定义区域,自动添加了 SAP Fiori Tools的依赖:
"devDependencies": {"@ui5/cli": "^3.0.0","@sap/ux-ui5-tooling": "1", ---------- migration 命令自动添加的依赖"rimraf": "3.0.2" },
@sap/ux-ui5-tooling 是 SAP 提供的工具集,扩展了 UI5 Tooling 的功能,特别是与 SAP Fiori 应用的开发相关。它包含了一系列中间件和任务,用于增强 UI5 应用的开发体验。
同时 ui5.yaml 文件也增添了额外的内容,新的源代码如下:
在 SAP UI5 应用的开发中,ui5.yaml 文件是一个关键配置文件,用于定义项目的元数据、类型以及与开发服务器相关的中间件配置。
最后 ui5 serve 打印了一些额外的输出信息:
并且 SAP UI5 Freestyle 应用,也能在 Application Info 页面里正常显示了:
领取专属 10元无门槛券
私享最新 技术干货