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 是列表项的子项,因此它可以访问所有分配的模型和当前绑定上下文。


最后,我们返回显示在列表中的控件。


目录
相关文章
|
1月前
|
API
在阿里云RPA中,你可以使用"SetForegroundWindow"函数来将SAP控件置顶
【2月更文挑战第28天】 在阿里云RPA中,你可以使用"SetForegroundWindow"函数来将SAP控件置顶
23 1
|
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 的作用介绍
28 0
|
1月前
|
开发者 UED
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
14 0
|
22天前
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
16 1
什么是 SAP ABAP 里的 Subscreen
|
1月前
|
开发者 UED
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
15 0
|
1月前
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
15 0