SAP UI5 XML Preprocessor 的工作原理和 instructions 指令详解

简介: SAP UI5 XML Preprocessor 的工作原理和 instructions 指令详解

XML 预处理器以深度优先、先父后子的方式遍历视图的 XML DOM,并执行以下操作:


  1. 表示可用绑定(即仅基于预处理器可用的模型的绑定)的所有 XML 属性,都将替换为该绑定的实际结果。SAP UI5 传统的 formatters 等可以与任何 SAPUI5 绑定一起使用。
  2. XML fragment 的处理是内联的; 也就是说,引用会实时地被 fragment 的 XML DOM 替换,并且预处理也在该 DOM 上进行。
  3. 处理预处理指令 <template:with>、<template:if> 和 <template:repeat>.

Preprocessing intructions are processed by the XML preprocessor when it traverses the view’s XML DOM.


当 XML Preprocessor 遍历 XML view 的 dom 结构时,它也会执行 preprocessing 指令。


A model name can be seen as a variable with a value that consists of two parts: a model instance and a binding context path.


模型名称可以看做一个变量,变量的值由两部分组成:模型实例和模型绑定上下文。


You can base conditions on the available variables. XML attributes that represent an available binding are replaced automatically.


我们可以基于变量来定义条件。XML 视图里被绑定的属性,被自动替换成实际值。


SAP UI5 XML Templating Preprocessor(SUTP)指令作为XML视图中的指令,用于在运行时动态生成UI5控件和数据绑定。这些指令允许开发人员增强SAP UI5项目中的UI开发的灵活性和效率。有效地理解和利用这些指令可以显著简化开发工作流程,并提高应用程序的性能。


<template:if> 指令:

<template:if> 指令允许根据指定条件进行条件渲染UI元素。它评估表达式,并在表达式评估为true时显示关联的UI控件。否则,它会将控件排除在渲染的输出之外。

示例:

`<template:if>` test="{$model>/isAdmin}">
    `<Button>` text="Admin Actions" press="onAdminActionPress" />
`</template:if>`

在此示例中,“Admin Actions”按钮仅在模型中的isAdmin属性评估为true时呈现。


<template:repeat> 指令:

<template:repeat> 指令允许对模型中的数组或集合进行迭代,动态生成多个UI控件。它允许开发人员为单个UI控件定义一个模板,然后针对集合中的每个项目重复使用。

示例:

`<template:repeat>` list="{$model>/employees}" var="employee">
    `<Text>` text="{employee/name}" />
`</template:repeat>`

在这个例子中,<Text>控件针对模型中employees数组中的每个员工重复显示员工的姓名。


<template:with> 指令:

<template:with> 指令允许开发人员在特定上下文中为变量定义作用域。它允许将复杂表达式或属性别名化,以简化在定义范围内的后续数据绑定。

示例:

`<template:with>` path="{$model>/selectedEmployee}" var="emp">
    `<Text>` text="{emp/name}" />
    `<Text>` text="{emp/age}" />
`</template:with>`

在这个例子中,从模型中选定的selectedEmployee对象被别名为emp,简化了后续数据绑定,如姓名和年龄。


<template:alias> 指令:

<template:alias> 指令提供了一个创建命名空间别名的机制,从而使XML视图更简洁易读。它允许开发人员为视图中使用的命名空间定义自定义前缀。

示例:

`<template:alias>` xmlns:c="sap.ui.core" xmlns:m="sap.m" />

在这里,c前缀被别名为sap.ui.core命名空间,m前缀被别名为sap.m命名空间,允许更短的命名空间声明。


<template:macro> 指令:

<template:macro> 指令允许开发人员定义带参数的可重用UI控件块,类似于编程语言中的函数。通过封装常见的UI模式或结构,它增强了代码的可重用性和可维护性。


示例:

`<template:macro>` name="employeeInfo" parameters="name, age">
    `<VBox>`
        `<Text>` text="{name}" />
        `<Text>` text="{age}" />
    `</VBox>`
`</template:macro>`

在这个例子中,employeeInfo宏定义了一个可重用的UI块,在VBox容器中显示员工的姓名和年龄。


通过利用这些SUTP指令,开发人员可以在SAP生态系统中创建更动态、可维护和高效的UI5应用程序。这些指令使开发人员能够有效处理复杂的UI场景、数据绑定和控制结构,从而提高生产力和用户体验。

相关文章
|
1月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
27 0
|
1月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
15 0
|
1月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
15 0
|
1月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
33 0
|
1月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
31 0
|
1月前
|
搜索推荐
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
18 0
|
1月前
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
20 0
|
1月前
|
XML 前端开发 JavaScript
深入介绍 UI5 框架里 Smart Field 控件的工作原理
深入介绍 UI5 框架里 Smart Field 控件的工作原理
18 0
|
2月前
|
Web App开发 前端开发 JavaScript
乱花渐欲迷人眼 - 让 SAP UI5 应用的日志输出不再素面朝天
乱花渐欲迷人眼 - 让 SAP UI5 应用的日志输出不再素面朝天
48 0
|
2月前
|
Web App开发 JSON JavaScript
SAP UI5 应用程序小技巧 - 一键将 JSON 对象导出成本地 json 文件
SAP UI5 应用程序小技巧 - 一键将 JSON 对象导出成本地 json 文件
25 0

相关课程

更多