什么是SAP Fiori?SAP Fiori不是SAP发布的某款产品,而是SAP新一代UI设计风格和用户体验的代号。
Fiori是一个意大利语中的单词,意思是“花”:
不得不说SAP确实对“花”情有独钟,因为SAP的另一款内存数据库HANA(全称:High-performance Analytic Appliance),在日语里也是“花”的意思。
再回到Fiori。SAP Fiori 2.0在2015年时,曾经获得全球最富盛名的设计竞赛,红点设计概念竞赛(Red Dot Award:Design Concept 2015)的大奖。这次竞赛有全球来自61个国家4680件作品参与角逐,最终SAP脱颖而出获此殊荣。
如果您想看看按照SAP Fiori这套规范设计出的前端应用到底长什么样,可以按照本文介绍的方法免费体验。
访问链接:https://www.sap.com/china/products/fiori.html
点击“免费试用”的按钮:
在跳转的页面里点击按钮“See it in action”:
然后我们就能看到一个Fiori应用的入口界面了,这个界面有个术语叫做Fiori Launchpad。我们也可以把下面这个链接加到收藏夹里,下次直接访问。
https://www.sapfioritrial.com/sites?helpset=trial&sap-client=001
Fiori Launchpad里每个方方正正的白色区域,我们称之为Tile。每个Tile代表一个Fiori应用。其中上图红色高亮的几个Tile代表的应用就是Jerry所在的SAP成都研究院的开发团队负责开发和维护的。
任意点击一个Tile,比如My Opportunities。在进入页面的过程中,能看到一个旋转的花瓣动画效果,这也呼应了Fiori的“花”的含义:
进入Opportunity应用后,您就能看到类似下图的界面了,这就是一个典型的SAP Fiori应用。
如果您对这些Fiori的前端实现好奇,想看看它们背后的JavaScript或者CSS的实现,那么同时按住Ctrl+Alt+Shift+P四个按键,会看到下面这个弹出窗口。选中“Use Debug Sources”的勾选项,
然后重新刷新浏览器,
这样就会加载SAP Fiori应用的调试版本了。如果不这样做的话,默认加载的是发布版本的前端代码,里面的JavaScript代码经过压缩,变量名和函数名完全不可读。
此时在Chrome浏览器的开发者工具的Networ标签里能看到一系列调试版本的脚本文件的加载。
稍等片刻之后,就可以到Chrome开发者工具的Sources标签页去阅读加载好的调试版本的脚本文件了。
要获取更多Jerry的原创文章,请关注公众号"汪子熙":