當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

SAP Fiori 应用里图标(Icon)的渲染原理和使用技巧

發(fā)布時間：2023/12/19 编程问答 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 SAP Fiori 应用里图标(Icon)的渲染原理和使用技巧小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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

近日，一位 SAP 合作伙伴的開發(fā)人員，向我咨詢一個關(guān)于 SAP Fiori 應(yīng)用里圖標(biāo)的使用問題。

這位開發(fā)人員在 SAP 某標(biāo)準(zhǔn) Fiori 應(yīng)用里，發(fā)現(xiàn)了一個圖標(biāo)(例如下圖紅色高亮區(qū)域所示的圖標(biāo)), 希望在自己開發(fā)的 Fiori 應(yīng)用里也使用這個圖標(biāo)，但是不知道其對應(yīng)的 sap-icon:// 屬性值。

開發(fā)人員希望找到一種簡易的辦法，能夠根據(jù) SAP Fiori 應(yīng)用頁面上渲染出來的圖標(biāo)，反查出其對應(yīng)的 sap-icon:// 值。

在 SAP UI5 圖標(biāo)控件 (Icon) 里, 給其 src 屬性綁定上對應(yīng)的 sap-icon:// 值，就能在渲染出的 SAP Fiori 頁面上，看到對應(yīng)的圖案了。

比如 sap-icon://syringe 對應(yīng)下圖這個注射器圖標(biāo)。至于運行時，Icon 控件 src 屬性值對應(yīng)的圖案是如何被渲染出來的，該技術(shù)細(xì)節(jié)由 SAP UI5 框架去實現(xiàn)，一般的 SAP UI5 應(yīng)用開發(fā)人員無需了解。

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

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

SAP 發(fā)布了六百多種標(biāo)準(zhǔn)的圖標(biāo)，能直接在 Fiori 應(yīng)用中使用。這些圖標(biāo)能夠在一個稱為 SAP Icon Explorer 的網(wǎng)頁中統(tǒng)一瀏覽。

https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#

假設(shè)我們在 SAP Icon Explorer 里找到了和我們在某 SAP Fiori 應(yīng)用里看到的一模一樣的圖標(biāo)，則單擊該圖標(biāo)：

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

顯然，這種方法效率較低，因為需要用肉眼，在 SAP Icon Explorer 中數(shù)以百計的圖標(biāo)中去人工匹配。

方法2：在 SAP Fiori 源程序中進(jìn)行搜索

這種方式的前提是，我們能夠拿到待查找 SAP Fiori 應(yīng)用的源代碼。

?使用 Visual Studio Code 等編輯器打開 SAP Fiori 應(yīng)用的源代碼，搜索關(guān)鍵字 sap-icon://, 則編輯器會列出該 Fiori 應(yīng)用使用到的所有圖標(biāo)的 sap-icon:// 值。

這種方法的局限性在于：

(1) 如果一個 Fiori 應(yīng)用使用了相當(dāng)多圖標(biāo)，那么開發(fā)人員仍然需要在搜索結(jié)果集里逐一手動過濾，最終定位到自己真正想要查找的那一個圖標(biāo)；

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

以下圖為例，該應(yīng)用通過 SAP Fiori Elements 開發(fā)而成，圖中高亮的幾個圖標(biāo)，是 SAP Fiori Elements List Report 模板內(nèi)定義的標(biāo)準(zhǔn)圖標(biāo)，并沒有包含在應(yīng)用開發(fā)人員通過 Application Generator 創(chuàng)建出來的本地工程文件里。因此這些圖標(biāo)對應(yīng)的 sap-icon:// , 根本無法通過本地工程源代碼搜索的方式獲得。

方法3：通過運行時單步調(diào)試 SAP UI5 渲染器的方式查找

Jerry 之前的文章深入學(xué)習(xí)SAP UI5框架代碼系列之二：UI5 控件的渲染器曾經(jīng)介紹過，每個 SAP UI5 控件都有專屬的渲染器，在運行時負(fù)責(zé)根據(jù) SAP UI5 控件的實例數(shù)據(jù)，生成對應(yīng)的 HTML 源代碼。

在 Icon 控件的渲染器實現(xiàn)，IconRenderer.js 的 render 方法里設(shè)置斷點。

運行時斷點觸發(fā)，第61行變量 vIconInfo里包含的 uri 字段的值，即是我們要找的 sap-icon://product.

這種方法仍然有一定的局限性：一個 SAP Fiori 應(yīng)用，幾乎不大可能只使用單一圖標(biāo)。換言之，每個圖標(biāo)的渲染，都會觸發(fā) IconRenderer.js 的 render 方法。

比如下面這個斷點的觸發(fā)，是為了渲染 action-settings 這個圖標(biāo)：

即 SAP Fiori Elements 應(yīng)用里，點擊之后能進(jìn)行用戶個性化設(shè)置的齒輪圖標(biāo)。

當(dāng)待查找 SAP Fiori 應(yīng)用里包含的圖標(biāo)個數(shù)較多時，我們通常需要進(jìn)行一段時間的調(diào)試，才能最終找到期望的圖標(biāo)值。

方法4：通過 SAP Fiori 應(yīng)用界面圖標(biāo)的 Unicode 值反向查找

這是 Jerry 最喜歡的一個辦法，能 100% 準(zhǔn)確而快速地定位到待查找的圖標(biāo)，而且無需調(diào)試。缺點在于步驟稍嫌繁瑣。

在 Chrome 開發(fā)者工具的 Elements 標(biāo)簽頁里，找到 Icon 控件最終渲染出來的 span 元素，發(fā)現(xiàn)其 data-sap-ui-icon-content 的值，顯示為一個普通用戶不可讀的小方框。

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

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

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

UTF-16 LE，即 Little Endian，小端存儲，高位字節(jié)放在高地址表示。

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

還記得方法 3 里提到的 Icon 控件的渲染器 IconRenderer.js 么？在它的旁邊就是IconPool.js，該文件里硬編碼了 SAP Fiori 支持的所有標(biāo)準(zhǔn)圖標(biāo)的名稱，及其對應(yīng)的 Unicode 值。

Chrome 開發(fā)者工具里打開該文件，根據(jù)剛才找到的 Unicode 值 e011 進(jìn)行搜索，立即得出該 Unicode 值對應(yīng)的圖標(biāo)名稱為 product：

再返回 SAP Icon Explorer 進(jìn)行核對，至此能確認(rèn)我們要查找的圖標(biāo)，其 sap-icon:// 值為 product，Unicode 值為 0xe011，和我們在 IconPool.js 里找到的值完全一致。

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

生活随笔