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:Viewxmlns="sap.m"xmlns:mvc="sap.ui.core.mvc"><ListheaderText="{i18n>invoiceListTitle}"class="sapUiResponsiveMargin"width="auto"items="{invoice>/Invoices}" ><items><ObjectListItemtitle="{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:ViewcontrollerName="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中聚合绑定的概念，并通过一个具体的示例展示了其用法。