共计 2061 个字符，预计需要花费 6 分钟才能阅读完成。
昨天是 2020 年的最初一天，我终日的工夫，都在和两位欧洲共事一起解决一个 SAP Spartacus UI 里的 Checkbox bug.
解决完 bug 之后，很天然地回忆起了这么多年来，我经验过的不同 SAP 产品里的 Checkbox 的设计与实现。
文章目录
(1) SAP GUI 里的 Checkbox
(2) SAP CRM 里的 Checkbox
(3) SAP Cloud for Customer 里的 Checkbox
(4) SAP UI5 里的 Checkbox
(5) SAP S/4HANA 里的 Checkbox
(6) SAP Spartacus 里的 Checkbox
本文介绍前三局部，其中历史最悠久的当然就是 SAP GUI 里的 Checkbox.
值得一提的是，SAP GUI Screen 里的控件也反对 Keyboard Accessibility，即通过键盘的 Tab 键，能够逐个导航到屏幕上的每一个控件。
SAP CRM WebClient UI 实质上还是 ABAP BSP 技术，其 Checkbox 的一个例子，如下图 Main Partner 列：
一个用户肉眼可见的 Checkbox，在 SAP CRM 零碎里由总共 6 个 HTML 标签组合而成。
当 Checkbox 里的勾选中时，最外层的 wrapper div 标签的 class 变为 th-sapcb-chkd，chkd 是 checked 的缩写。内层 a 标签属性值 aria-checked 设置为 true.
div 内层一个暗藏的 input 标签，如下图标号 6 所示，用于同 ABAP 后盾进行值传递，其 value 属性值变为 X.
当 Checkbox 勾选时，上述介绍的最外层 wrapper div 的 class 变为 th-sapcb-blk, blk 意为 blank; 内层 a 标签的 aria-checked 属性设置为 false，hidden input 的 value 属性值置空。
而 Checkbox 的小勾视觉效果，通过 a 标签的 CSS::before 选择器实现。如上图黄色所示。
::before 选择器的用法，通过上面这个简略的例子能够学会——在施加了::before 选择器的 HTML 元素前部，会主动呈现选择器 content 属性指定的内容。
‘\e05d’ 代表小勾的视觉效果：
咱们试着在 Chrome 开发者工具里将这个 content 属性值改一改。’\e05c’ 代表 hint，一个小感叹号：
‘\e05d’ 代表 group：
::before 选择器的 width 和 height 属性管制 Checkbox 矩形框的宽和高：
这一套::before content 属性值和对应的 icon 视觉效果图的映射关系，能够在这个链接里取得：
https://sapui5.hana.ondemand….
当然，SAP CRM 的开发人员，是不会间接编写原生的 HTML 代码的。在 SAP CRM 里须要将一个控件定义成 Checkbox，只须要实现这个控件绑定的模型节点字段的 GET_P 办法：
外面将控件的 fp_fieldtype 设置为 field_type_checkbox.
Jerry 之前的文章 SAP UI 搜寻分页技术 提到，SAP CRM UI 采纳服务器端渲染技术，WebClient UI 框架基于上述保护的控件元数据，为一个 Checkbox 控件，在 ABAP 端渲染出上述介绍的总共 7 个 HTML 元素对应的原生 HTML 代码。
SAP Cloud for Customer(C4C) 里的 Checkbox
SAP C4C 里的 Checkbox 颜值较之 SAP GUI 和 SAP CRM 有了很大的晋升：
同 SAP CRM 一样，SAP C4C 最终渲染出的 HTML 页面里，也是由多个 HTML 元素协同工作，造成最初的 Checkbox 视觉效果。
C4C 的 Checkbox 处于未选中状态时，wrapper div 的 aria-checked 属性值为 false, 内层 div 被赋予 css 类 sapMSwtOff，span 节点的值为 No：
Checkbox 处于选中状态时，aria-checked 属性切换为 true, 内层 div 的 class 切换成 sapMSwtOn, span 的值为 Yes：
C4C 里的 Checkbox，视觉效果上并不是 SAP GUI 里和 SAP CRM 里奢侈的小勾，而是一个相似抽屉的滑动成果。
这个成果并未像 SAP CRM 那样采取::before 实现，而是通过给一个 div 标签同时增加 sapMSwtOn 和 sapMSwtHandle 这两个类实现的，handle 的字面意思即抽屉的把手。
Checkbox 敞开状态的把手视觉效果通过 sapMSwtOff 和 sapMSwtHandle 这两个类独特实现，把手尺寸通过 sapUiSizeCompact 的 height 和 width 管制：
当然，SAP C4C 二次开发人员也不须要间接编写这些原生的 HTML 代码，而是在 SAP C4C UI Designer 里，从控件工具箱里拖拽一个 Checkbox 类型的控件到 UI 编辑界面即可实现 Checkbox 成果。
本文后续会接着简略介绍 SAP UI5，SAP S/4HANA 和 SAP Spartacus 里的 Checkbox 设计，感激浏览。
更多 Jerry 的原创文章，尽在：” 汪子熙 ”:
