SAP UI5 xml 视图里定义的控件,运行时如何创建其实例的?
入口函数在 XMLTemplateProcessor 里:
解析 xml 视图的源代码之后,调用 createRegularControls 进行实例创建:
这是我的 xml 视图源代码:
<mvc:View
controllerName="sap.ui5.walkthrough.controller.InvoiceList"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<List
headerText="{i18n>invoiceListTitle}"
class="sapUiResponsiveMargin"
width="auto"
items="{invoice>/Invoices}">
<items>
<ObjectListItem
title="{invoice>Quantity} x {invoice>ProductName}"
number="{
parts: [{path: 'invoice>ExtendedPrice'}, {path: 'view>/currency'}],
type: 'sap.ui.model.type.Currency',
formatOptions: {
showMeasure: false
}
}"
numberUnit="{view>/currency}"/>
</items>
</List>
</mvc:View>
number 字段的绑定路径被解析了出来:
在 BindingParser 的代码里,上述字符串类型的绑定路径,被解析成了 json 对象:
这里调用 sap.ui.model.type.Currency 的构造函数。
我们再回过头来看 xml 视图的加载和解析过程。
在 XMLView.js 的 this._xContent 字段里,我们能找到 xml 视图的字符串格式的源代码。
在 XMLView.js 里根据字符串 _xContent 进行搜索,即可查到这个字段赋值的位置:
在代码第 607 行触发 xml 视图文件的加载:
从方法名也能看出,xml 视图文件采用异步的方式进行加载:
loadResourceAsync(sResourceName).then(runPreprocessorsAsync).then(processView);
这里采用了 promise 异步编程模型:
function loadResourceAsync(sResourceName) {
return LoaderExtensions.loadResource(sResourceName, {async: true}).then(function(oData) {
return oData.documentElement; // result is the document node
});
}
LoaderExtensions.loadResource 执行异步加载 xml 视图文件的任务,加载成功的结果,通过输入参数 oData 传递到匿名回调函数内。
进入 loadResource 内部:
转发给 sap.ui.loader._.getModuleContent(sResourceName, mOptions.url);
从缓存里读取。由于是第一次加载,缓存没有命中:
最终还是用的 jQuery.ajax api 去加载的数据:
加载成功后,调用 335 行的 success 回调函数:
ajax 请求的 dataType 字段值为 xml:
加载成功的 xml document 对象:
调用 resolve 方法,将 xml document 传给 promise api 的 then 回调函数。
此处就开始递归地解析 xml document 的节点了:
function parseChildren(xmlNode, bRoot, bIgnoreToplevelTextNodes, pRequireContext) {
var children = xmlNode.childNodes;
for (var i = 0; i < children.length; i++) {
parseNode(children[i], bRoot, bIgnoreToplevelTextNodes, pRequireContext);
}
}
parseChildren 调用 parseNode.
更多Jerry的原创文章,尽在:“汪子熙”:
相关文章
- [ChatGPT 勘误] SAP UI5 的 sap.ui.base.Object
- SAP UI5 初学者教程之九 - 创建第一个 Component 的试读版
- SAP WebIDE 是如何加载SAP UI5里自定义的XML view的 - JerryMaster.view.xml
- SAP UI5 Gateway后台ETAG校验逻辑
- SAP Fiori架构一览
- SAP UI5里xml fragment getContent方法的实现
- how does SAP UI5 filter for list work in xml view
- 为什么SAP GUI里的传统事务码能通过Fiori Launchpad启动
- How is SAP Gateway metadata request converted to XML format transformation
- 如何通过outlet在SAP Spartacus的产品明细页面插入自定义UI
- SAP 电商云登录界面如何增添新的字段
- SAP 电商云 Spartacus UI 支持延迟加载的新功能的入口设计
- SAP Spartacus organization unit list抬头显示所有unit的标题实现
- 如何下载SAP Cloud for Customer UI技术模型的XML源代码到本地
- 如何将SAP C4C TI页面的值传递到Embedded Component里去
- SAP Commerce的extensioninfo.xml
- SAP Fiori Elements - How complex binding defined in XML view is parsed
- SAP UI5 FileUploader 的本地文件上传技术实现分享
- 如何提取SAP UI5 XML view里定义的字段元素绑定信息(binding path)
- SAP Fiori Elements - how to set breakpoint to get converted xml view parsed by f