SAP UI5 数据绑定中的工厂函数
工厂函数是一种更强大的从模型数据创建控件的方法。 为控件聚合的每个条目调用工厂函数,开发人员可以决定每个条目是否应由具有不同属性的相同控件表示,甚至每个条目由完全不同的控件表示。
工厂函数带有参数sId,它应该用作新控件的ID,以及oContext,它用于访问条目的模型数据。 返回的对象必须是 sap.ui.core.Element 类型。 下面是如何在 XML 视图和控制器中使用来自 List Binding(Aggregation Binding)的 JSON 模型数据来实现此场景:
<mvc:View
controllerName="sap.ui.sample.App"
xmlns="sap.m"
xmlns:l="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc">
<l:VerticalLayout
content="{ path: '/companies', factory: '.createContent'}"
class="sapUiContentPadding"
width="100%"/>
</mvc:View>
工厂函数 .createContent
实现在控制器里:
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/ui/model/type/String",
"sap/ui/model/type/Float",
"sap/m/Input",
"sap/m/Text",
"sap/m/CheckBox"
], function (Controller, JSONModel, StringType, Float, Input, Text, CheckBox ) {
"use strict";
return Controller.extend("sap.ui.sample.App", {
onInit : function () {
…
},
createContent: function (sId, oContext) {
var oRevenue = oContext.getProperty("revenue");
switch(typeof oRevenue) {
case "string":
return new Text(sId, {
text: {
path: "revenue",
type: new StringType()
}
});
case "number":
return new Input(sId, {
value: {
path: "revenue",
type: new Float()
}
});
case "boolean":
return new CheckBox(sId, {
checked: {
path: "revenue"
}
});
}
},
});
});
在控制器里的工厂函数实现里,根据 revenue 的数据类型来动态创建 SAP UI5 控件。
在 App 控制器中,我们创建了一个名为 productListFactory 的新函数。工厂函数返回关联绑定上下文的控件,类似于我们在前面步骤中定义的 XML 模板。此工厂函数返回的控件类型必须适合 sap.m.List 对象的项目聚合。在这种情况下,我们根据存储在要创建的项目的上下文中的数据返回 StandardListItem 或 ObjectListItem。
我们通过检查当前库存水平以及产品是否已停产来决定返回哪种类型的控制。对于这两个选项,我们准备并加载一个 XML 片段,以便我们可以以声明方式定义视图逻辑并分配当前控制器。如果库存水平为零并且产品也已停产,那么我们使用 ProductSimple XML 片段,否则使用 ProductExtended XML 片段。
XML 片段在每种情况下只需要加载一次,因此我们通过在控制器上存储一个辅助变量并且只加载一次来创建一个 Singleton。对于列表中的每一项,我们克隆存储在控制器上的相应控件。此方法创建一个新的控件副本,我们可以将其绑定到列表项的上下文。请注意:在工厂函数中,我们对创建的控件的生命周期负责。
如果产品没有停产但库存水平为零,我们暂时缺货。在这种情况下,我们添加了一个 ObjectAttribute,它使用 JavaScript 将 Out of Stock 消息添加到控件中。与 XML 视图或片段中的声明性定义类似,我们可以使用数据绑定语法来绑定属性。在这种情况下,我们将文本绑定到资源包中的一个属性。由于 Attribute 是列表项的子项,因此它可以访问所有分配的模型和当前绑定上下文。
最后,我们返回显示在列表中的控件。
相关文章
- SAP UI5 Form 控件的 ColumnLayout 布局特性
- 将 SAP Spartacus 作为 feature module 进行 Lazy Load 延迟加载时遇到的注入错误分析
- 关于使用命令行 cf login 登录 SAP BTP CloudFoundry 环境的问题
- 使用 BOL API 创建 SAP CRM IBASE 数据
- SAP UI5 应用中的 sap.ui.require.toUrl 使用场景
- 29. 如何通过 ABAP 代码给 SAP OData 元数据增添注解
- 什么是 SAP ABAP 的 include structure
- 160. 如何根据 SAP Fiori UI 界面上的错误消息,找到后台 ABAP 对应的消息 ID
- SAP MM 自动化处理之公司间退货STO交货单自动创建
- SAP UI5 sap.m.Table 实现响应式布局的两种配置模式
- SAP UI5 响应式表格 sap.m.Table 根据不同宽度的屏幕动态决定显示或隐藏 Column 的实现源代码讲解试读版
- SAP-Dialog详解编程语言
- SAP数据更新的触发详解编程语言
- Sap SE16n 修改表数据详解编程语言
- SAP连接电脑串口读数(电子称,磅等数据读取)详解编程语言
- sap 中怎样把非限制库存转为销售订单库存详解编程语言
- SAP- MM 委外加工(Subconctracting)流程详解编程语言
- SAP 移动类型详解编程语言
- SAP MM批次管理(6)批次确定–大海详解编程语言
- 的数据迁移实现SAP HANA数据迁移到Oracle数据库(hana到oracle)
- Oracle与SAP权衡利弊比较之路(oracle与sap比较)
- 跨界合作新模式 Oracle与SAP实现合并(oracle与sap合并)
- 使用Oracle与SAP进行数据接口开发(oracle sap接口)