深入学习SAP UI5框架代码系列之四:SAP UI5控件的元数据实现

简介: 深入学习SAP UI5框架代码系列之四:SAP UI5控件的元数据实现

这是Jerry 2021年的第5篇文章,也是汪子熙公众号总共第276篇原创文章。


系列目录

(0) SAP UI5应用开发人员了解UI5框架代码的意义


(1) UI5 module懒加载机制


(2) UI5 控件渲染机制


(3) HTML原生事件 VS SAP UI5 Semantic事件


(4) UI5控件元数据的元数据实现(本文)


(5) UI5控件的实例数据实现细节


(6) UI5控件数据绑定的实现原理


(7) UI5控件数据绑定的三种模式:One Way,Two Way和OneTime实现原理比较


(8) UI5控件ID的生成逻辑


(9) UI5控件的多语言(国际化,Internationalization,i18n)支持的实现原理


(10) XML视图里的button控件


(11) button控件和它背后的DOM元素


在本系列的第二篇文章:深入学习SAP UI5框架代码系列之二:UI5 控件的渲染器 里,我们了解了什么是UI5控件的渲染器(Renderer), 以及如何从SAP UI5控件的元数据里,获得其对应渲染器的名称:sap.ui.commons.ButtonRenderer


image.png


本文我们将了解更多关于SAP UI5控件元数据的细节。


注:您会发现本文的SAP UI5框架调试截图,有些是白色背景,有些是深色背景。前者是Jerry 2015年书写本系列英文版时所截的图,后者为2021年Jerry将英文版改写成中文版,并重新发布在微信公众号平台上时截的图。


如何在运行时获取SAP UI5控件的元数据?

拿到控件实例后,调用其getMetadata()方法即可。


运行Jerry文章 一个用于SAP UI5学习的脚手架应用,没有任何后台API的依赖 里提到的SAP UI5脚手架应用,在下图第19行设置断点,拿到button控件实例oButton1, 调用其getMetadata方法,返回值就是button控件的元数据,如下图右边所示。


元数据里字段很多,这里只介绍对SAP UI5应用开发人员来说最重要的一部分字段:


image.png


_aAllPublicMethods

当我们在Chrome开发者工具的console面板里,输入oButton1之后,紧接着再敲一个"."(英文输入状态下的句号),就能看到该button实例能够调用的一系列公有方法。这些公有方法列表,维护在元数据里的数组_aAllPublicMethods.


image.png


这个数组的length为110,这意味着button实例总共可以调用110个公有方法。然而我们在Button.js里查看button的实现源代码,发现里面能够找到的方法数目远远小于110.


这是因为button控件实例能调用的110个公有方法,很多都来自其原型链继承关系上游的节点里实现的公有方法。


回顾本系列第一篇文章 深入学习SAP UI5框架代码系列之一:UI5 Module的懒加载机制 提到的SAP UI5控件原型继承链:


Button->Control->Element->ManagedObject->EventProvider->BaseObject

想判断一个方法是button本身所实现,还是从其原型链继承过来的,可以将方法名称传入函数oButton1.hasOwnProperty, 通过其返回的布尔值得知结果。


比如getText是button原型链上的一个方法,因此下面的JavaScript语句返回:false.

image.pngimage.png


_aAllPublicMethods数组的填充逻辑:控件本身的公有方法和其原型链上级节点的公有方法的并集(下图高亮JavaScript代码里数组的concat操作)



image.png

_aPublicMethods

该数组内的元素是刚刚介绍过的_aAllPublicMethods的一个子集,定义在metadata的_publicMethods字段内。下图是UI5控件原型链上的节点,EventProvider的publicMethods:


image.png




_mAllAggregations

该对象维护了控件所有可用的Aggregation.


在面向对象编程领域,我们常用association, aggregation(聚合)和composition(组合)描述类与类,对象与对象之间的关联关系。


Aggregation描述的是has-a的语义,在UML图里通过空心菱形箭头表示,比如tooltip可以脱离button控件单独存在;Composition关系描述part-of,即部分和整体的语义,用实心菱形箭头表示。

image.png



下图是一个例子:button控件的tooltip以Aggregation的方式维护和存储在控件元数据当中,通过getTooltip和setTooltip进行读写访问。



image.png



关于SAP UI5 Aggregation的权威介绍,可以查看SAP UI5官网.


官网里给出的一个例子,TextList的元数据里定义了一个指向texts的aggregation, 关系为1:N.


image.png


_mProperties

该对象包含了button控件所有可用的属性,以及针对这些属性的读写方法。注意mProperties存储的只是控件属性的元数据,而非属性运行时的值。SAP UI5控件运行时属性值的存储,会在本系列下一篇文章 UI5控件的实例数据实现细节 里介绍。


image.png


_oParent

指向该控件原型链父节点的元数据存储结构。顺着节点的oParent字段,我们可以遍历完整个原型链。


image.png


SAP UI5 button控件的公有方法,从Jerry 2015年写作时的110个,增添到了2021年1.85.0版本里的127个:


image.png


我们有两种方式可以手动计算出127这个数字。


方法1:button元数据的_aPublicMethods.length + _oParent._aAllPublicMethods.length

image.png



方法2:button自身,及其原型链上每个节点元数据的_aPublicMethods.length求和:


image.png


Jerry最近用Angular开发SAP Spartacus时,也会在Angular Component的template文件里使用控件。


这些控件的实现分为三类:


(1) 直接利用HTML原生标签,例如div, span, label, input这些:


image.png


(2) 由前缀为cx-的选择器代表的复合控件,这是我们团队开发的能够被SAP Spartacus其他UI和二次开发人员重用的控件,cx即Customer Experience.


比如下列高亮代码的语义是,如果当前Component的orderApproval模型处于可用状态,且loading标志位为true,则显示一个旋转的动画效果,即加载第四行的复合控件cx-spinner, 否则加载id为approvalFormTemplate的页面模板。复合控件本质上仍然是一个Angular Component:


image.png


对于以上这两种控件实现,不存在类似SAP UI5那样的源代码级别的元数据数据结构。


(3) 第三方提供的控件库,比如ng-select, 一个下拉菜单控件库:

image.pngimage.png


在node_modules文件夹下的ng-select.component.d.ts文件里,即可找到类似SAP UI5控件的元数据定义:


image.png


本系列下一篇文章,会介绍SAP UI5控件实例在运行时的属性值存储和读取实现,感谢阅读。


更多阅读


(0) SAP UI5应用开发人员了解UI5框架代码的意义


(1) UI5 module懒加载机制


(2) UI5 控件渲染机制


(3) HTML原生事件 VS SAP UI5 Semantic事件


(4) UI5控件元数据的元数据实现(本文)


(5) UI5控件的实例数据实现细节


(6) UI5控件数据绑定的实现原理


(7) UI5控件数据绑定的三种模式:One Way,Two Way和OneTime实现原理比较


(8) UI5控件ID的生成逻辑


(9) UI5控件的多语言(国际化,Internationalization,i18n)支持的实现原理


(10) XML视图里的button控件


(11) button控件和它背后的DOM元素


相关文章
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
2月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
2月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
|
2月前
|
存储 测试技术 UED
Qt中实现界面回放的艺术:从理论到代码“ (“The Art of Implementing UI Playback in Qt: From Theory to Code
Qt中实现界面回放的艺术:从理论到代码“ (“The Art of Implementing UI Playback in Qt: From Theory to Code
87 1
|
2月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
|
2月前
|
开发者 UED
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
|
2月前
|
监控 Linux Windows
装备神器edex-ui别人以为我很屌其实我只会if和else搬运代码
装备神器edex-ui别人以为我很屌其实我只会if和else搬运代码
34 1
|
2月前
|
开发者 UED
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
|
2月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍