漫談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.com/test-resources/sap/ui/core/Icon.html

當然，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效果。

ABAP Angular HTML

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。