SAP UI5 xml 视图里定义的控件,运行时如何创建其实例的?

简介: SAP UI5 xml 视图里定义的控件,运行时如何创建其实例的?

入口函数在 XMLTemplateProcessor 里:

42.png

解析 xml 视图的源代码之后,调用 createRegularControls 进行实例创建:

43.png

这是我的 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 字段的绑定路径被解析了出来:

44.png

在 BindingParser 的代码里,上述字符串类型的绑定路径,被解析成了 json 对象:

image.png

这里调用 sap.ui.model.type.Currency 的构造函数。

2.png

我们再回过头来看 xml 视图的加载和解析过程。

在 XMLView.js 的 this._xContent 字段里,我们能找到 xml 视图的字符串格式的源代码。

3.png

在 XMLView.js 里根据字符串 _xContent 进行搜索,即可查到这个字段赋值的位置:

4.png

在代码第 607 行触发 xml 视图文件的加载:

5.png

从方法名也能看出,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 内部:

image.png

转发给 sap.ui.loader._.getModuleContent(sResourceName, mOptions.url);

image.png

从缓存里读取。由于是第一次加载,缓存没有命中:

8.png

最终还是用的 jQuery.ajax api 去加载的数据:

image.png

加载成功后,调用 335 行的 success 回调函数:

image.pngajax 请求的 dataType 字段值为 xml:

image.png

加载成功的 xml document 对象:

image.png

调用 resolve 方法,将 xml document 传给 promise api 的 then 回调函数。

image.png

此处就开始递归地解析 xml document 的节点了:

14.png

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.

目录
相关文章
|
1月前
|
API
在阿里云RPA中,你可以使用"SetForegroundWindow"函数来将SAP控件置顶
【2月更文挑战第28天】 在阿里云RPA中,你可以使用"SetForegroundWindow"函数来将SAP控件置顶
45 1
|
1月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
1月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
1月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
|
1月前
|
XML JavaScript 数据格式
SAP UI5 XML Preprocessor 的工作原理和 instructions 指令详解
SAP UI5 XML Preprocessor 的工作原理和 instructions 指令详解
|
1月前
|
XML JavaScript 前端开发
xml文件使用及解析
xml文件使用及解析
|
1月前
|
XML 数据格式
小米备份descript.xml文件
小米备份descript.xml文件
42 0
|
1月前
|
XML Java 数据库连接
mybatis中在xml文件中通用查询结果列如何使用
mybatis中在xml文件中通用查询结果列如何使用
70 0
|
1月前
|
SQL
Mybatis.xml文件中大于小于等于
Mybatis.xml文件中大于小于等于
19 0

相关课程

更多

相关实验场景

更多