SAPUI5学习第九天-----（13）Aggregation Binding聚合绑定和Data Types数据类型和Expression Binding绑定表达式

最新推荐文章于 2022-05-17 16:10:43 发布

尤其是十月的风

最新推荐文章于 2022-05-17 16:10:43 发布

阅读量335

点赞数 1

分类专栏： SAPUI5 文章标签： SAP UI5

本文链接：https://blog.csdn.net/qq_34060435/article/details/118700904

版权

SAPUI5 专栏收录该内容

19 篇文章 16 订阅

订阅专栏

Aggregation Binding聚合绑定

官网代码

现在我们已经为应用建立了一个良好的结构，是时候添加更多功能了。通过添加JSON格式的发票数据，我们开始探索数据绑定的更多特性，这些数据显示在面板下方的列表中。

Coding

webapp/Invoices.json (新建)

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

发票文件仅包含5个JSON格式的发票，我们可以用它在应用中绑定控件。JSON是一种非常轻量级的数据存储格式，可以直接作为SAPUI5应用的数据源使用。

webapp/manifest.json

{
…
  "sap.ui5": {
	"rootView": "sap.ui.demo.walkthrough.view.App",
[…]
	"models": {
	  "i18n": {
		"type": "sap.ui.model.resource.ResourceModel",
		"settings": {
		  "bundleName": "sap.ui.demo.walkthrough.i18n.i18n",
		  "supportedLocales": [""],
		  "fallbackLocale": ""
		}
	  },
	  "invoice": {
		"type": "sap.ui.model.json.JSONModel",
		"uri": "Invoices.json"
	  }
	}
  }
}

我们将一个新的模型 invoice 添加到描述符的sap.ui5部分。这一次我们想要一个JSONModel，因此我们将类型设置为sap.ui.model.json.JSONModel。uri关键字是相对于组件的测试数据的路径。通过这个小配置，我们的组件将自动实例化一个新的JSONModel，它将从Invoices.json文件加载invoice数据。最后，实例化的JSONModel作为一个命名的模型invoice放到组件上。命名模型在整个应用中可见。

自动模型实例化仅在SAPUI5版本1.30中可用。如果你使用的是旧版本，你可以在Component.js文件的init方法中手动实例化资源包和应用程序的其他模型，就像我们在步骤:Component Configuration中对资源包所做的那样。

webapp/view/App.view.xml

<mvc:View
	controllerName="sap.ui.demo.walkthrough.controller.App"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true">
	<Shell>
		<App class="myAppDemoWT">
			<pages>
				<Page title="{i18n>homePageTitle}">
					<headerContent>
						<Button
							icon="sap-icon://hello-world"
							press=".onOpenDialog"/>
					</headerContent>
					<content>
						<mvc:XMLView viewName="sap.ui.demo.walkthrough.view.HelloPanel"/>
						<mvc:XMLView viewName="sap.ui.demo.walkthrough.view.InvoiceList"/>
					</content>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>

在应用程序视图中，我们添加了第二个视图来显示面板下面的发票invoices 。

webapp/view/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>

新视图显示一个带有自定义标题文本的列表控件。列表的项聚合被绑定到JSON数据的根路径invoice上。因为我们定义了一个命名模型，所以我们必须在每个绑定定义的前面加上标识符invoice>。

在项目聚合中，我们为列表定义了模板，该列表将为我们的测试数据的每个发票自动重复。更准确地说，我们使用ObjectListItem 为项聚合的每个聚合子项创建控件。列表项的title属性绑定到单个发票的属性。这是通过定义一个相对路径来实现的(在开始的时候没有/)。这是因为我们已经通过items={invoice>/ invoice}将商品聚合绑定到发票。

webapp/i18n/i18n.properties

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

# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}
homePageTitle=Walkthrough
helloPanelTitle=Hello World
openDialogButtonText=Say Hello With Dialog
dialogCloseButtonText=Ok

# Invoice List
invoiceListTitle=Invoices

在文本包中添加了列表的标题。
在这里插入图片描述
一个发票清单显示在面板下面

Data Types 数据类型

官网代码

发票清单看起来已经很不错了，但是什么是没有指定价格的发票呢?价格通常以技术格式存储，并带有 ‘.’ 分隔符。例如，我们的菠萝发票是计算价格87.2，没有货币。我们将使用SAPUI5数据类型正确格式化价格，使用一个依赖于区域设置的十进制分隔符和分隔符后的两位数字。

Coding

webapp/view/InvoiceList.view.xml

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.InvoiceList"
   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}"
		number="{
			parts: [{path: 'invoice>ExtendedPrice'}, {path: 'view>/currency'}],
			type: 'sap.ui.model.type.Currency',
			formatOptions: {
				showMeasure: false
			}
		}"
		numberUnit="{view>/currency}"/>
	</items>
   </List>
</mvc:View>

通过向ObjectListItem 控件添加number和numberUnit属性，我们将价格添加到视图中的发票列表中，然后通过将绑定语法的type属性设置为sap.ui.model.type.Currency，我们将货币数据类型应用到数字上。

正如您在上面看到的，我们对ObjectListItem 的number属性使用了特殊的绑定语法。这种绑定语法使用了所谓的“Calculated Fields(计算字段)”，它允许将来自不同模型的多个属性绑定到控件的单个属性。来自不同模型的属性被称为“parts(部件)”。在上面的例子中，控件的属性是number，从两个不同的模型中检索到的绑定属性(“parts”)是invoice>ExtendedPrice和view>/currency。

我们希望以欧元显示价格，通常这种货币是后端数据模型的一部分。在我们的例子中不是这样的，所以我们需要在应用程序中直接定义它。因此，我们为发票列表添加了一个控制器，并使用currency属性作为绑定语法的第二部分。货币类型将根据货币代码为我们处理价格的格式化。在我们的例子中，价格显示为两位小数。

此外，我们将格式化选项showMeasure设置为false。这将货币代码隐藏在属性号中，因为它作为单独的属性numberUnit传递给ObjectListItem 控件。

webapp/controller/InvoiceList.controller.js (新建)

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/json/JSONModel"
], function (Controller, JSONModel) {
	"use strict";

	return Controller.extend("sap.ui.demo.walkthrough.controller.InvoiceList", {

		onInit : function () {
			var oViewModel = new JSONModel({
				currency: "EUR"
			});
			this.getView().setModel(oViewModel, "view");
		}

	});
});

为了能够访问不属于数据模型的货币代码，我们在发票列表的控制器中定义了一个视图模型。它是一个简单的JSON模型，只有一个关键货币和值欧元。这可以绑定到number字段的格式化程序。视图模型可以保存分配给控件的任何配置选项，以绑定诸如可见性之类的属性。

约定
尽可能使用数据类型而不是自定义格式化程序。

Preview
在这里插入图片描述
有价格和编号的发票清单

Expression Binding 绑定表达式

官网代码

有时SAPUI5的预定义类型不够灵活，您需要在视图中进行简单的计算或格式化——这正是表达式真正有用的地方。我们使用它们来根据数据模型中的当前数字格式化我们的价格。

Coding

webapp/view/InvoiceList.view.xml

<mvc:View
controllerName="sap.ui.demo.walkthrough.controller.InvoiceList"
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}"
            number="{
		parts: [{path: 'invoice>ExtendedPrice'}, {path: 'view>/currency'}],
		type: 'sap.ui.model.type.Currency',
		formatOptions: {
			showMeasure: false
		}
		}"
		numberUnit="{view>/currency}"
        	numberState="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }"/>
      </items>
   </List>
</mvc:View>

我们在声明性视图中添加了属性numberState，并在括号中引入了以=开头的新绑定语法。这个符号用于初始化一个新的绑定语法，它被称为表达式，可以执行简单的计算逻辑，如这里显示的三元运算符。

操作符的条件是数据模型中的一个值。表达式绑定中的模型绑定必须用$符号转义，如您在代码中所见。如果价格高于50，我们将状态设置为’Error’(数字将以红色显示)，否则设置为’ Success '(数字将以绿色显示)。

表达式仅限于帮助格式化数据的特定操作集，如Math表达式、比较等。您可以在文档中查找可能的操作。

约定
仅在简单的计算中使用表达式绑定。

Preview
在这里插入图片描述
价格现在是根据它的号码格式化的

尤其是十月的风

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SAPUI5学习第九天-----（13）Aggregation Binding聚合绑定和Data Types数据类型和Expression Binding绑定表达式

Aggregation Binding官网代码现在我们已经为应用建立了一个良好的结构，是时候添加更多功能了。通过添加JSON格式的发票数据，我们开始探索数据绑定的更多特性，这些数据显示在面板下方的列表中。Codingwebapp/Invoices.json (新建){ "Invoices": [ { "ProductName": "Pineapple", "Quantity": 21, "ExtendedPrice": 87.2000, "ShipperName"
复制链接

扫一扫