广州免费建站推荐,郑州吧,免费成品网站那里好,传媒公司网站设计1. 背景
Aggregation Binding 是 SAPUI5 中的一种数据绑定方式#xff0c;用于将数据模型中的集合#xff08;如数组#xff09;绑定到 UI 控件的聚合#xff08;如列表项、表格行等#xff09;。
常见的场景包括将一个数组绑定到 sap.m.List 的 items 聚合#xff0c;…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:Viewxmlnssap.mxmlns:mvcsap.ui.core.mvcListheaderText{i18ninvoiceListTitle}classsapUiResponsiveMarginwidthautoitems{invoice/Invoices} itemsObjectListItemtitle{invoiceQuantity} x {invoiceProductName}//items/List
/mvc:ViewInvoiceList.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:ViewcontrollerNamezsapui5.test.controller.Appxmlnssap.mxmlns:mvcsap.ui.core.mvcdisplayBlocktrue
!--在视图中想要使用的库的命名空间列表--ShellApp classmyAppDemoWTpagesPage title{i18nhomePageTitle}contentmvc:XMLView viewNamezsapui5.test.view.HelloPanel /mvc:XMLView viewNamezsapui5.test.view.InvoiceList //content/Page/pages/App/Shell
/mvc:View
2.5 维护i18n
最后在i18n文件中为新增的文本添加键值对。
改动后的i18n文件内容如下
# App Descriptor
appTitleHello World
appDescriptionA simple app that explains the most important concepts of SAPUI5# Hello Panel
showHelloButtonTextSay Hello
helloMsgHello {0}homePageTitlehomePageTitle
helloPanelTitlePanelTitle
openDialogButtonTextSay Hello With Dialog
dialogCloseButtonTextOk# Invoice List
invoiceListTitleInvoices
2.6 运行程序
运行应用程序我们可以看到新增加的控件 sap.m.List 并可以看到显示出来的发票信息。 通过ctrl shift alt s打开诊断辅助工具我们可以看到新增加的列表控件并可以看到每一行对应生成的item控件。
3. 小结
本文总结了SAPUI5中聚合绑定的概念并通过一个具体的示例展示了其用法。
