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

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介: 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.

相关文章
|
2月前
|
API
在阿里云RPA中,你可以使用"SetForegroundWindow"函数来将SAP控件置顶
【2月更文挑战第28天】 在阿里云RPA中,你可以使用"SetForegroundWindow"函数来将SAP控件置顶
52 1
|
1月前
|
存储 开发框架 JavaScript
深入探讨Flutter中动态UI构建的原理、方法以及数据驱动视图的实现技巧
【6月更文挑战第11天】Flutter是高效的跨平台移动开发框架,以其热重载、高性能渲染和丰富组件库著称。本文探讨了Flutter中动态UI构建原理与数据驱动视图的实现。动态UI基于Widget树模型,状态变化触发UI更新。状态管理是关键,Flutter提供StatefulWidget、Provider、Redux等方式。使用ListView等可滚动组件和StreamBuilder等流式组件实现数据驱动视图的自动更新。响应式布局确保UI在不同设备上的适应性。Flutter为开发者构建动态、用户友好的界面提供了强大支持。
36 2
|
2月前
|
XML JavaScript 前端开发
属性和方法向 XML DOM 定义了编程接口
XML DOM 提供编程接口,通过属性和方法操作XML结构。使用JavaScript等语言,可访问和修改节点。属性如nodeName、nodeValue揭示节点信息,方法如getElementsByTagName、appendChild、removeChild实现查找、添加和删除节点功能。节点对象x的应用示例贯穿其中。
|
2月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
|
23天前
|
Android开发 开发者
Android UI设计中,Theme定义了Activity的视觉风格,包括颜色、字体、窗口样式等,定义在`styles.xml`。
【6月更文挑战第26天】Android UI设计中,Theme定义了Activity的视觉风格,包括颜色、字体、窗口样式等,定义在`styles.xml`。要更改主题,首先在该文件中创建新主题,如`MyAppTheme`,覆盖所需属性。然后,在`AndroidManifest.xml`中应用主题至应用或特定Activity。运行时切换主题可通过重新设置并重启Activity实现,或使用`setTheme`和`recreate()`方法。这允许开发者定制界面并与品牌指南匹配,或提供多主题选项。
24 6
|
1月前
|
XML JavaScript 前端开发
属性和方法向 XML DOM 定义了编程接口
XML DOM 是一个编程接口,它将XML表示为节点对象集合,可通过JavaScript等语言访问。接口通过属性和方法定义,属性如nodeName、nodeValue显示节点信息,方法如getElementsByTagName、appendChild、removeChild执行操作。例如,x.nodeName返回节点名称,x.appendChild(node)添加子节点。
|
2月前
|
XML 数据格式
XML Schema 复杂元素类型详解:定义及示例解析
在XML Schema(XSD)中,复杂元素包含其他元素和/或属性,分为4类:空元素、仅含元素、仅含文本和既含元素也含文本。定义复杂元素可通过直接声明或引用预定义的复杂类型。复杂空元素仅含属性,而仅含元素的类型则只包含其他子元素。XSD提供了`&lt;xs:sequence&gt;`、`&lt;xs:all&gt;`、`&lt;xs:choice&gt;`等指示器来规定元素顺序和出现次数,以及`&lt;xs:attributeGroup&gt;`和`&lt;xs:group&gt;`来组织元素和属性。
197 7
|
2月前
|
开发框架 前端开发 JavaScript
【Flutter前端技术开发专栏】Flutter中的动态UI构建与数据驱动视图
【4月更文挑战第30天】Flutter是一款高效跨平台移动开发框架,以其热重载、高性能渲染和丰富组件库著称,简化了动态UI和数据驱动视图的实现。本文深入讨论了动态UI构建原理,包括基于Widget树模型的UI更新和状态管理,如使用StatefulWidget和数据流库(如Provider、Redux)。此外,文中还介绍了实现技巧,如使用ListView等可滚动组件、StreamBuilder进行数据流驱动的UI更新,以及应用响应式布局以适应不同设备。Flutter为开发者提供了构建高效动态界面的强大工具。
【Flutter前端技术开发专栏】Flutter中的动态UI构建与数据驱动视图
|
2月前
|
iOS开发
Xcode强大的多视图立体分层显示View UI Herarchy
Xcode强大的多视图立体分层显示View UI Herarchy
26 0
|
2月前
|
XML JavaScript 数据格式
XML Schema(XSD)详解:定义 XML 文档结构合法性的完整指南
XML Schema(XSD)是用于定义XML文档结构的规范,它描述了元素、属性及其顺序、数据类型和约束。与DTD相比,XML Schema支持更多数据类型,如字符串、日期等,并且是基于XML的,允许扩展和重用。学习XML Schema有助于确保数据通信时双方对内容的理解一致,通过验证防止错误。示例展示了如何定义一个`note`元素,包含`to`, `from`, `heading`和`body`子元素,都是字符串类型。XML文档可以通过引用XML Schema进行验证,确保内容符合预设模式。
142 0