共计 3018 个字符,预计需要花费 8 分钟才能阅读完成。
这是 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 的渲染原理和应用办法有一些根底的理解,感激浏览。
更多浏览
- SAP Fiori 利用索引大全
- Fiori Fundamentals 和 SAP UI5 Web Components
- 为什么 SAP GUI 里的传统事务码能通过 Fiori Launchpad 启动并运行在浏览器里
- 一步步把 SAP GUI 的事务码配置到 SAP Fiori Launchpad 里
- SAP UI5 利用开发人员理解 UI5 框架代码的意义
- SAP UI5 module 懒加载机制
- SAP UI5 控件渲染机制
- HTML 原生事件 VS SAP UI5 Semantic 事件
- SAP UI5 控件元数据的元数据实现
- SAP UI5 控件的实例数据批改和读取逻辑
- SAP UI5 控件数据绑定的实现原理
- SAP UI5 控件数据绑定的三种模式:One Way, Two Way 和 OneTime 实现原理比拟
- SAP UI5 OData 流言粉碎机:极短时间内发送两个 Odata request, 前一个会主动被 cancel 掉吗
- SAP UI5 和 Angular 的函数防抖 (Debounce) 和函数节流 (Throttle) 实现原理介绍
- SAP UI 渲染模式:客户端渲染 VS 服务器端渲染
- SAP UI 的加载动画成果和幽灵设计(Ghost Design)
- 介绍一个能开发简略 SAP UI5 利用的在线 IDE:StackBlitz
- SAP CRM Fiori 利用和 SAP Commerce Cloud (电商云) UI 如何通过调整 CSS 来扭转 UI 显示格调
- SAP 产品一脉相承的 UI 加强思路,在 SAP Commerce Cloud(电商云) UI 加强实现中的体现
- 如何分辨 SAP Fiori Launchpad 里的虚实 Fiori 利用
- 在没有任何前端开发教训的根底上, 创立第一个 SAP Fiori Elements 利用