本教程前面两篇步骤,我们已经学习了使用 CSS 对我们开发的 SAP UI5 应用的界面进行美化的一些步骤。
进入文件夹 13,运行命令行 ui5 serve
, 然后访问 url:http://localhost:8080/webapp/index.html
能看到如下界面:
![](https://img.haomeiwen.com/i2085791/8acd70dbde50dcf4.png)
我们回忆一下,Fiori 1.0 时代,SAP 发布的前端应用主题为 Blue Crystall,界面效果如下图所示。这是我 2015 年在 SAP 成都研究院 CRM Fiori 应用开发团队开发的 My Opportunity Fiori 应用,用的就是 Blue Crystall Theme.
![](https://img.haomeiwen.com/i2085791/c0b9f8b80d6c08ba.png)
Fiori 2.0 时代的 Belize 主题如下图2 所示。2018年的时候,我已经转到了 SAP S/4HANA Customer Management 开发团队了。下面是 Opportunity 应用套上了 Belize Theme 的界面外观。
![](https://img.haomeiwen.com/i2085791/e543853b45de44b2.png)
Fiori 3.0 时代的 Quartz Light 主题:
![](https://img.haomeiwen.com/i2085791/0ecf3cbed723eb8e.png)
以及 Quartz Dark 这种暗黑主题:
![](https://img.haomeiwen.com/i2085791/bfa51c9c1e86d71b.png)
本教程已经开发了很多 SAP UI5 应用了。如何在我们开发的这些 SAP UI5 应用也用上这些 Fiori 主题?
比如我们怎样才能把下面这个 SAP UI5 应用:
![](https://img.haomeiwen.com/i2085791/9f030cc772c0ddd8.png)
更改成使用 Quartz Dark 暗黑主题,成为下面这种效果?
![](https://img.haomeiwen.com/i2085791/82867378f07f9e19.png)
本文余下部分我们就来详细探讨这个需求的实现。
网友评论