SAP CRM系统UI checkbox的设计与实现
SAP CRM checkbox的一個例子,如下圖Main Partner列:
一個用戶肉眼可見的Checkbox,在SAP CRM系統里由總共6個HTML標簽組合而成。
當Checkbox里的勾選中時,最外層的wrapper div標簽的class變為th-sapcb-chkd,chkd是checked的縮寫。 內層a標簽屬性值aria-checked設置為true.
div內層一個隱藏的input標簽,用于同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矩形框的寬和高:
這一套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元素。
更多Jerry的原創文章,盡在:“汪子熙”:
總結
以上是生活随笔為你收集整理的SAP CRM系统UI checkbox的设计与实现的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Angular数据绑定的学习笔记
- 下一篇: 世嘉《索尼克:未知边境》全球游戏销量突破