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中聚合绑定的概念,并通过一个具体的示例展示了其用法。