SAPUI5基础知识25 - 聚合绑定（Aggregation Binding）

1. 背景

Aggregation Binding 是 SAPUI5 中的一种数据绑定方式，用于将数据模型中的集合（如数组）绑定到 UI 控件的聚合（如列表项、表格行等）。

常见的场景包括将一个数组绑定到 sap.m.List 的 items 聚合，或者将一个数组绑定到 sap.ui.table.Table 的 rows 聚合。

2. 练习

2.1 创建本地的JSON文件

在前序练习的基础上，让我们在webapp文件夹下，建立一个新的Invoices.json文件，用于存储数组数据。

改动后的项目文件结构如下：

JSON文件的内容如下：

{
    "Invoices": [
        {
            "ProductName": "Pineapple",
            "Quantity": 21,
            "ExtendedPrice": 87.2,
            "ShipperName": "Fun Inc.",
            "ShippedDate": "2015-04-01T00:00:00",
            "Status": "A"
        },
        {
            "ProductName": "Milk",
            "Quantity": 4,
            "ExtendedPrice": 10,
            "ShipperName": "ACME",
            "ShippedDate": "2015-02-18T00:00:00",
            "Status": "B"
        },
        {
            "ProductName": "Canned Beans",
            "Quantity": 3,
            "ExtendedPrice": 6.85,
            "ShipperName": "ACME",
            "ShippedDate": "2015-03-02T00:00:00",
            "Status": "B"
        },
        {
            "ProductName": "Salad",
            "Quantity": 2,
            "ExtendedPrice": 8.8,
            "ShipperName": "ACME",
            "ShippedDate": "2015-04-12T00:00:00",
            "Status": "C"
        },
        {
            "ProductName": "Bread",
            "Quantity": 1,
            "ExtendedPrice": 2.71,
            "ShipperName": "Fun Inc.",
            "ShippedDate": "2015-01-27T00:00:00",
            "Status": "A"
        }
    ]
}

Invoices.json文件中包含了5张json格式的发票，我们将使用此JSON文件中的数据数据，绑定控件sap.m.List。

JSON是一种非常轻量级的存储数据的格式，可以直接用作SAPUI5应用程序的数据源。

2.2 创建JSON模型

接下来，让我们在manifest.json中的sap.ui5部分添加此发票模型。

因为我们想要一个 JSONModel，所以我们将type设置为 sap.ui.model.json.JSONModel。
uri是相对于组件的数据路径 (相对路径)。

通过这些配置，SAPUI5组件会自动从Invoices.json文件中加载发票数据，并实例出化一个名字为invoice的 JSONModel。

实例化的 JSONModel会被绑定在组件上，因而这个模型在应用程序中是全局可见的。

改动后的manifest.json文件内容如下：

{
    "_version": "1.58.0",
    "sap.app": {
        "id": "zsapui5.test",
        "i18n": "i18n/i18n.properties",
        "title": "{{appTitle}}",
        "description": "{{appDescription}}",
        "type": "application",
        "applicationVersion": {
            "version": "1.0.0"
        }
    },
    "sap.ui": {
        "technology": "UI5",
        "deviceTypes": {
            "desktop": true,
            "tablet": true,
            "phone": true
        }
    },
    "sap.ui5": {
        "dependencies": {
            "minUI5Version": "1.108.0",
            "libs": {
                "sap.ui.core": {},
                "sap.m": {}
            }
        },
        "models": {
            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "settings": {
                    "bundleName": "zsapui5.test.i18n.i18n",
                    "supportedLocales": [
                        ""
                    ],
                    "fallbackLocale": ""
                }
            },
            "invoice": {
                "type": "sap.ui.model.json.JSONModel",
                "uri": "Invoices.json"
            }
        },
        "rootView": {
            "viewName": "zsapui5.test.view.App",
            "type": "XML",
            "id": "app"
        },
        "resources": {
            "css": [
                {
                    "uri": "css/style.css"
                }
            ]
        }
    }
}

2.3 创建新的视图文件

接下来，在视图文件夹下，创建一个新的视图文件InvoiceList.view.xml来显示发票信息。

变动后的项目结构如下：

InvoiceList.view.xml视图文件的内容如下：

<mvc:View
   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}"/>
      </items>
   </List>
</mvc:View>

InvoiceList.view.xml视图中，将显示一个带有自定义标题的列表控件sap.m.List。

sap.m.List控件的items聚合绑定到JSON数据的根路径Invoices，即items="{invoice>/Invoices}"。

因为我们定义的是一个命名模型（named model），我们必须在每个绑定定义前加上标识符invoice，用于指定此命名模型。

在<items>聚合中，我们为列表定义了模板，该模板将对测试数据中的每个发票自动重复。更准确地说，我们其实是使用了sap.m.ObjectListItem为<items>聚合的每个聚合子项创建控件。

列表项的title属性绑定到单个发票的属性。这是通过定义一个相对路径(开头没有/)来实现的。这是可行的，因为我们通过items={invoice>/Invoices}将<items>聚合绑定到发票上。

2.4 显示新的视图文件

然后，让我们在应用视图中，添加刚刚创建的InvoiceList.view.xml视图，这样，就可以将发票信息显示在HelloPanel下方的位置。

改动后的App.view.xml文件内容如下：

<mvc:View
    controllerName="zsapui5.test.controller.App"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true"
>
    <!--在视图中想要使用的库的命名空间列表-->
    <Shell>
        <App class="myAppDemoWT">
            <pages>
                <Page title="{i18n>homePageTitle}">
                    <content>
                        <mvc:XMLView viewName="zsapui5.test.view.HelloPanel" />
                        <mvc:XMLView viewName="zsapui5.test.view.InvoiceList" />
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

2.5 维护i18n

最后，在i18n文件中，为新增的文本添加键值对。

改动后的i18n文件内容如下：

# App Descriptor
appTitle=Hello World
appDescription=A simple app that explains the most important concepts of SAPUI5

# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}

homePageTitle=homePageTitle
helloPanelTitle=PanelTitle
openDialogButtonText=Say Hello With Dialog
dialogCloseButtonText=Ok

# Invoice List
invoiceListTitle=Invoices

2.6 运行程序

运行应用程序，我们可以看到新增加的控件 sap.m.List ，并可以看到显示出来的发票信息。

通过ctrl + shift + alt + s打开诊断辅助工具，我们可以看到新增加的列表控件，并可以看到每一行对应生成的item控件。

3. 小结

本文总结了SAPUI5中聚合绑定的概念，并通过一个具体的示例展示了其用法。