技術文章 » SAP Fiori 應用裡圖示(Icon)的渲染原理和使用技巧

SAP Fiori 應用裡圖示(Icon)的渲染原理和使用技巧

2021-04-19 03:01:44

這是 Jerry 2021 年的第 27 篇文章，也是汪子熙公眾號總共第 298 篇原創文章。

近日，一位 SAP 合作伙伴的開發人員，向我諮詢一個關於 SAP Fiori 應用裡圖示的使用問題。

這位開發人員在 SAP 某標準 Fiori 應用裡，發現了一個圖示(例如下圖紅色高亮區域所示的圖示), 希望在自己開發的 Fiori 應用裡也使用這個圖示，但是不知道其對應的 sap-icon:// 屬性值。

開發人員希望找到一種簡易的辦法，能夠根據 SAP Fiori 應用頁面上渲染出來的圖示，反查出其對應的 sap-icon:// 值。

在 SAP UI5 圖示控制元件 (Icon) 裡, 給其 src 屬性繫結上對應的 sap-icon:// 值，就能在渲染出的 SAP Fiori 頁面上，看到對應的圖案了。

比如 sap-icon://syringe 對應下圖這個注射器圖示。至於執行時，Icon 控制元件 src 屬性值對應的圖案是如何被渲染出來的，該技術細節由 SAP UI5 框架去實現，一般的 SAP UI5 應用開發人員無需瞭解。

本文介紹四種通過 SAP Fiori 頁面渲染出的圖示，反查出其 sap-icon:// 值的方法。

方法1：在 SAP Icon Explorer 中手動查詢

SAP 釋出了六百多種標準的圖示，能直接在 Fiori 應用中使用。這些圖示能夠在一個稱為 SAP Icon Explorer 的網頁中統一瀏覽。

https://openui5.hana.ondemand...

假設我們在 SAP Icon Explorer 裡找到了和我們在某 SAP Fiori 應用裡看到的一模一樣的圖示，則單擊該圖示：

在右邊明細頁面，就能找到其 sap-icon:// 值：

顯然，這種方法效率較低，因為需要用肉眼，在 SAP Icon Explorer 中數以百計的圖示中去人工匹配。

方法2：在 SAP Fiori 源程式中進行搜尋

這種方式的前提是，我們能夠拿到待查詢 SAP Fiori 應用的原始碼。

​使用 Visual Studio Code 等編輯器開啟 SAP Fiori 應用的原始碼，搜尋鍵碼 sap-icon://, 則編輯器會列出該 Fiori 應用使用到的所有圖示的 sap-icon:// 值。

這種方法的侷限性在於：

(1) 如果一個 Fiori 應用使用了相當多圖示，那麼開發人員仍然需要在搜尋結果集裡逐一手動過濾，最終定位到自己真正想要查詢的那一個圖示；

(2) 該方法無法 100% 保證能夠找到自己需要的圖示。

以下圖為例，該應用通過 SAP Fiori Elements 開發而成，圖中高亮的幾個圖示，是 SAP Fiori Elements List Report 模板內定義的標準圖示，並沒有包含在應用開發人員通過 Application Generator 建立出來的本地工程檔案裡。因此這些圖示對應的 sap-icon:// , 根本無法通過本地工程原始碼搜尋的方式獲得。

方法3：通過執行時單步偵錯 SAP UI5 渲染器的方式查詢

Jerry 之前的文章 深入學習SAP UI5框架程式碼系列之二：UI5 控制元件的渲染器 曾經介紹過，每個 SAP UI5 控制元件都有專屬的渲染器，在執行時負責根據 SAP UI5 控制元件的範例資料，生成對應的 HTML 原始碼。

在 Icon 控制元件的渲染器實現，IconRenderer.js 的 render 方法裡設定斷點。

執行時斷點觸發，第61行變數 vIconInfo裡包含的 uri 欄位的值，即是我們要找的 sap-icon://product.

這種方法仍然有一定的侷限性：一個 SAP Fiori 應用，幾乎不大可能只使用單一圖示。換言之，每個圖示的渲染，都會觸發 IconRenderer.js 的 render 方法。

比如下面這個斷點的觸發，是為了渲染 action-settings 這個圖示：

即 SAP Fiori Elements 應用裡，點選之後能進行使用者個性化設定的齒輪圖示。

當待查詢 SAP Fiori 應用裡包含的圖示個數較多時，我們通常需要進行一段時間的偵錯，才能最終找到期望的圖示值。

方法4：通過 SAP Fiori 應用介面圖示的 Unicode 值反向查詢

這是 Jerry 最喜歡的一個辦法，能 100% 準確而快速地定位到待查詢的圖示，而且無需偵錯。缺點在於步驟稍嫌繁瑣。

在 Chrome 開發者工具的 Elements 分頁裡，找到 Icon 控制元件最終渲染出來的 span 元素，發現其 data-sap-ui-icon-content 的值，顯示為一個普通使用者不可讀的小方框。

把整個 span 元素的 HTML 程式碼拷貝到記事本里：

以 UTF-16 LE 的 Encoding 格式儲存。

我選取 UTF-16 的編碼模式，是因為其較 UTF-8 相比，大部分字元都以固定長度即 2 位元組的方式儲存，這樣我檢索起來比較方便。

UTF-16 LE，即 Little Endian，小端儲存，高位位元組放在高地址表示。

用 UltraEdit 或者 WinHex 之類的工具軟體，開啟以 UTF-16 另存的記事本檔案。找到之前在瀏覽器和記事本里，均無法正常顯示的 data-sap-ui-icon-content 屬性值，其 Unicode 為 E011.

還記得方法 3 裡提到的 Icon 控制元件的渲染器 IconRenderer.js 麼？在它的旁邊就是IconPool.js，該檔案裡寫死了 SAP Fiori 支援的所有標準圖示的名稱，及其對應的 Unicode 值。

Chrome 開發者工具裡開啟該檔案，根據剛才找到的 Unicode 值 e011 進行搜尋，立即得出 該 Unicode 值對應的圖示名稱為 product：

再返回 SAP Icon Explorer 進行核對，至此能確認我們要查詢的圖示，其 sap-icon:// 值為 product，Unicode 值為 0xe011，和我們在 IconPool.js 裡找到的值完全一致。

希望本文能幫助大家對 SAP Fiori Icon 的渲染原理和使用方法有一些基礎的瞭解，感謝閱讀。

更多閱讀