共计 3343 个字符，预计需要花费 9 分钟才能阅读完成。
这是 Jerry 2021 年的第 26 篇文章，也是汪子熙公众号总共第 297 篇原创文章。
本文绝非题目党。
Jerry 前一篇文章 SAP Cloud Application Programming 介绍 – 2021 更新版，介绍了如何应用 SAP Cloud Application Programming，在本地创立一个 OData 服务，并且利用 SAP CAP SDK，在一个主动且长期生成的 Fiori Elements 利用里，生产该 OData 服务，展现其裸露的在线书店的业务数据。这个长期的 Fiori Elements 利用界面如下：
本文 Jerry 持续介绍，如何在没有任何前端开发教训的前提下，利用 SAP 公布的一个规范 OData 服务，通过 SAP Fiori Elements 提供的一系列工具，创立第一个 Fiori Elements 利用，将 SAP 规范 OData 服务裸露的业务数据，显示在 Fiori UI 上。
实现本文例子所需的惟一前提，就是须要在本地装置 nodejs 和 Visual Studio Code 这个代码编辑器。
首先简略介绍 SAP Fiori Elements 的概念。在其问世之前，SAP Fiori 利用的开发只有一种形式，即 SAP UI5 Freestyle 开发方式。
我回顾了本人 2014 年，在 SAP 成都研究院 CRM Fiori 开发团队基于 SAP Fiori 1.0 时的开发经验。过后咱们团队采纳 SAP UI5 Freestyle 开发了 7 个规范的 Fiori 利用，其应用形式都有一个共同点：
点击 Launchpad tile 进入利用，每个利用的初始页面都是所谓的 Master-Detail 格调，在屏幕左侧的 List 页面里抉择以后待查看的对象，在屏幕左边的明细页面切换不同的标签，来查看不同维度的数据。
例如，下图是 SAP CRM Fiori My Leads 利用的界面，和上图的 My Opportunities 利用界面的格调，简直完全一致，仅仅在字段 Label 上存在轻微差别。
所以过后咱们团队负责的 7 个 CRM Fiori 利用，其实蕴含了很多反复的 UI5 代码。起初 SAP Fiori 的架构师们，也发现了这个问题，并最终促成了 SAP Fiori Elements 的诞生。
SAP Fiori Elements 预置了一系列蕴含 SAP Fiori 开发最佳实际思维的 Fiori 利用模板，利用开发人员能够借助这些模板，疾速生成 Fiori 利用，并且可能在模板的根底上做扩大。如此一来，SAP UI5 利用开发的复杂度，从利用开发人员所在的 UI5 Freestyle 端，转移到了 Fiori Elements 的框架实现端，后者由 SAP 研究院里前端框架开发经验丰富的老兵们实现，代码品质和健壮性均有保障。
采纳 SAP Fiori Elements 之后，利用开发人员，通过在 CDS view 或者 OData 服务里定义注解 (Annotations) 的形式，来指定 Fiori UI 的页面布局。换句话说，不必写一行 JavaScript 代码，也能失去一个满足 SAP Fiori Design 最佳实际的 Fiori 利用。
上面介绍创立 Fiori Elements 利用的具体步骤。Fiori Elements 利用的目标就是用来展现 OData 服务裸露的业务数据。原本我想应用之前这篇文章 SAP Cloud Application Programming 介绍 – 2021 更新版 里开发的在本地部署运行的 OData 服务，但转念一想，这样就违反了本文题目“没有任何前端开发教训”的初衷。因而，Jerry 应用另一个 SAP 公布的专门用于 Demo 和学习用处，可能通过公网拜访的 OData 服务。
通过上面的链接，在 SAP Demo 服务器 ES5 上注册一个帐号：
https://register.sapdevcenter…
之后就能够拜访这个公开的 OData 服务了：
https://sapes5.sapdevcenter.c…
浏览器关上，能看到其 metadata：
而后在 Visual Studio Code 里装置名为 SAP Fiori tools 的扩大包，蕴含了 6 个 SAP Fiori 利用开发的辅助工具。
装置结束之后，应用快捷键 Ctrl + Shift + P, 关上 Visual Studio Code 命令面板，执行 Fiori: Open Application Generator, 关上 Fiori Elements 利用的创立向导：
在 Application Type 下拉框里，抉择 SAP Fiori Elements:
后面提到，SAP Fiori Elements 预置了很多页面模板：
- List Report Object Page
- Worklist
- Analytical List Page
- Overview Page
本文咱们抉择 List Report Object Page 模板：
在指定该 Fiori Elements 利用生产的 OData Source 步骤，将之前提到的 SAP Demo 服务器 ES5 上运行的 OData url 粘贴到向导步骤的 OData service URL 字段里：
Main entity 字段，从下拉框里抉择 SEPMRA_C_PD_Product，意思是咱们基于 List Report Object Page 模板创立的 Fiori Elements 利用，围绕该 OData 模型节点，来展现其数据。
最初保护一些 Fiori 我的项目级别的属性，比方利用题目，命名空间等等。
点击 Finish，即可在指定的本地文件夹里，生成对应的 Fiori Elements 利用。
利用生成结束后，在右键菜单里抉择 Preview Application：
抉择 start，即可启动 Fiori Elements 利用：
在浏览器里即可拜访这个 Fiori Elements 利用了：
http://localhost:8080/test/fl…
这是 List Report 页面：
选中一个产品后，能跳转进入 Object Page 明细页面：
至此，咱们一行代码都没有书写，仅仅通过几个简略的鼠标点击，就失去了这样一个反对搜寻，展现搜寻后果，并点击后果跳转到明细页面的 Fiori 利用。
通过这个例子，大家应该能领会到，SAP Fiori Elements 在进步 Fiori 利用前台开发效率上的劣势。
关上通过 Visual Studio Code Fiori Tools 扩大主动生成的 Fiori 利用，发现工程文件里全是一些元数据的定义。翻遍了整个 webapp 文件夹，咱们也很难找到一行 JavaScript 代码。
这就带来的新的问题，如下图所示，一个敌人在微信上向我征询：想批改通过 SAP Fiori Elements 生成的利用，但基本不晓得从何处下手。因为 Fiori Elements 我的项目里基本不像通过 SAP UI5 Freestyle 形式开发而成的利用那样，具备对应的 view 和 controller 文件。
如我答复的那样，基于 SAP Fiori Elements 的页面定制，得通过特定的扩大形式来实现。
Jerry 最近的开发工作，应用的都是 Angular 框架，理念和技术细节均和 SAP Fiori Elements 大同小异，这就好比一个习武之人之前练得是《九阳真经》，突然有一天因为种种客观原因，须要改练修习形式截然不同的《九阴真经》了。最近我能不断感觉到脑子里 Angular 和 SAP Fiori Elements 两种技术思潮的交错和碰撞。对于 Fiori Elements 利用如何定制化的内容，后续 Jerry 会抽时间持续分享，敬请关注。
orient/strip%7CimageView2/2/w/1240)
更多 Jerry 的原创文章，尽在：” 汪子熙 ”:
更多浏览
- 应用 SAP Cloud Application Programming 模型开发 OData 的一个理论例子
- 30 分钟用 Restful ABAP Programming 模型开发一个反对增删改查的 Fiori 利用
- Jerry 带您理解 Restful ABAP Programming 模型系列之二：Action 和 Validation 的实现
- Jerry 带您理解 Restful ABAP Programming 模型系列之三：云端 ABAP 利用调试
- SAP 云平台上的 Low Code Development(低代码开发) 解决方案
- SAP Cloud Application Programming 介绍 (2021 更新版）
更多 Jerry 的原创文章，尽在：” 汪子熙 ”: