如何免費試用SAP的Fiori應用

i042416發表於2019-12-01

什麼是SAP Fiori?SAP Fiori不是SAP釋出的某款產品,而是SAP新一代UI設計風格和使用者體驗的代號。
Fiori是一個義大利語中的單詞,意思是“花”:

如何免費試用SAP的Fiori應用

不得不說SAP確實對“花”情有獨鍾,因為SAP的另一款記憶體資料庫HANA(全稱:High-performance Analytic Appliance),在日語裡也是“花”的意思。

如何免費試用SAP的Fiori應用

再回到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
點選“免費試用”的按鈕:

如何免費試用SAP的Fiori應用

在跳轉的頁面裡點選按鈕“See it in action”:

如何免費試用SAP的Fiori應用

然後我們就能看到一個Fiori應用的入口介面了,這個介面有個術語叫做Fiori Launchpad。我們也可以把下面這個連結加到收藏夾裡,下次直接訪問。
https://www.sapfioritrial.com/sites?helpset=trial&sap-client=001

如何免費試用SAP的Fiori應用

Fiori Launchpad裡每個方方正正的白色區域,我們稱之為Tile。每個Tile代表一個Fiori應用。其中上圖紅色高亮的幾個Tile代表的應用就是Jerry所在的SAP成都研究院的開發團隊負責開發和維護的。
任意點選一個Tile,比如My Opportunities。在進入頁面的過程中,能看到一個旋轉的花瓣動畫效果,這也呼應了Fiori的“花”的含義:

如何免費試用SAP的Fiori應用

進入Opportunity應用後,您就能看到類似下圖的介面了,這就是一個典型的SAP Fiori應用。

如何免費試用SAP的Fiori應用

如果您對這些Fiori的前端實現好奇,想看看它們背後的JavaScript或者CSS的實現,那麼同時按住Ctrl+Alt+Shift+P四個按鍵,會看到下面這個彈出視窗。選中“Use Debug Sources”的勾選項,

如何免費試用SAP的Fiori應用

然後重新重新整理瀏覽器,

如何免費試用SAP的Fiori應用

這樣就會載入SAP Fiori應用的除錯版本了。如果不這樣做的話,預設載入的是釋出版本的前端程式碼,裡面的JavaScript程式碼經過壓縮,變數名和函式名完全不可讀。
此時在Chrome瀏覽器的開發者工具的Networ標籤裡能看到一系列除錯版本的指令碼檔案的載入。

如何免費試用SAP的Fiori應用

稍等片刻之後,就可以到Chrome開發者工具的Sources標籤頁去閱讀載入好的除錯版本的指令碼檔案了。

如何免費試用SAP的Fiori應用

要獲取更多Jerry的原創文章,請關注公眾號"汪子熙":

如何免費試用SAP的Fiori應用


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2666396/,如需轉載,請註明出處,否則將追究法律責任。

相關文章