完整教程：SAP学习笔记 - 开发22 - 前端Fiori开发数据绑定（Jason），Data Types（数据类型）

news/2025/10/6 15:56:57/文章来源:https://www.cnblogs.com/yxysuanfa/p/19127684

上一章讲了Icons（图标），Icon Explorer。

SAP学习笔记 - 开发21 - 前端Fiori开发 Icons（图标），Icon Explorer（图标浏览器）-CSDN博客

本章继续讲SAP Fiori开发的知识。

1，Aggregation Binding（聚合绑定）

1），Invoices.json

2），manifest.json

3），InvoiceList.view.xml

4），App.view.xml

5），i18n.properties

6），运行看效果

2，Data Types （数据类型）

1），InvoiceList.view.xml

2），InvoiceList.controller.js

3），运行看效果

4），总结

- currency: "JPY"

- 属性的查找方法

1），如何查找官方文档

方法1：直接访问SAPUI5 API参考

方法2：通过开发环境查找

方法3：使用SAPUI5文档结构导航

2），ObjectListItem常用属性

a），核心属性

b），状态相关属性

c），数字格式化

d），其他属性

以下是详细内容。

1，Aggregation Binding（聚合绑定）

Aggregation Binding是SAP Fiori和SAPUI5框架中数据绑定的一个重要概念，它允许开发者在UI控件与其数据模型之间建立关联，是SAP Fiori开发中实现动态、数据驱动UI的核心技术，它大大简化了列表、表格等集合型控件的开发工作。

Aggregation Binding指的是将控件中的聚合(aggregation)属性与数据模型中的集合数据进行绑定。在SAPUI5中，聚合是指可以包含多个子元素的容器属性，例如：

Table控件的items聚合
List控件的items聚合
Form控件的formContainers聚合

Aggregation Binding通过以下方式工作：

将UI控件的聚合属性连接到数据模型中的集合
为集合中的每个数据项创建相应的子控件
自动保持UI与数据的同步

上面这一段是Deepseek里面的解释，还挺高大上的哈，我好像也没太看懂?‍

下面来看看实例安慰一下心情。

1），Invoices.json

这个就是咱们这个小例子里面的数据源啦。

其实数据源基本都应该是DB，从DB取数据生成jason，然后再绑定到Fiori前端，咱一步步来。

{    "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文件里数据名，可以简单理解为DB的表名，那下面就是数据行和字段

2），manifest.json

{  "_version": "1.65.0",  "sap.app": {	"id": "ui5.walkthrough",	"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": "ui5.walkthrough.i18n.i18n",		  "supportedLocales": [""],		  "fallbackLocale": ""		}	  },      "invoice": {        "type": "sap.ui.model.json.JSONModel",        "uri": "Invoices.json"      }	},	"rootView": {		"viewName": "ui5.walkthrough.view.App",		"type": "XML",		"id": "app"	},	"resources": {	  "css": [		{		  "uri": "css/style.css"		}	  ]	}  }}

- "invoice": { =》这是view里面使用的model 名称

- "type": "sap.ui.model.json.JSONModel", =》这个说的是数据源的类型

- "uri": "Invoices.json" =》这个和Type配套，指向的jason文件的路径（当前文件同路径）和名称

"invoice": {
"type": "sap.ui.model.json.JSONModel",
"uri": "Invoices.json"
}

将来等连接DB的时候，这里会改成SAP提供的API(Odata）

3），InvoiceList.view.xml

   invoiceListTitle}"      class="sapUiResponsiveMargin"      width="auto"      items="{invoice>/Invoices}" >               Quantity} x {invoice>ProductName}"/>

这个视图说的是把Invoices.json里的内容给通过List展示出来

- items="{invoice>/Invoices}" >

invoice 如前述，是manifest.json 里面说的是model 名

> 可以理解为下级访问符

/Invoices =》/ 是绝对路径，Invoices 是 Invoices.json文件里面的名叫 Invoices(表名)的数据

- title="{invoice>Quantity} x {invoice>ProductName}"/>

这个是个简写，完整写法是 invoice>/Invoices>Quantity，为了简略化，把>/Invoices 给省去了

<List
headerText="{i18n>invoiceListTitle}"
class="sapUiResponsiveMargin"
width="auto"
items="{invoice>/Invoices}" >
<items>
<ObjectListItem
title="{invoice>Quantity} x {invoice>ProductName}"/>
</items>
</List>

4），App.view.xml

										homePageTitle}">

- <mvc:XMLView viewName="ui5.walkthrough.view.InvoiceList"/>

这个是嵌套视图，这样就把 InvoiceList.view.xml 视图给加进来了，还是很方便的哈

SAP学习笔记 - 开发20 - 前端Fiori开发 Nest View（嵌套视图），Fragment（片段）-CSDN博客

5），i18n.properties

# App DescriptorappTitle=Hello WorldappDescription=A simple walkthrough app that explains the most important concepts of OpenUI5 # Hello PanelshowHelloButtonText=Say HellohelloMsg=Hello {0}homePageTitle=WalkthroughhelloPanelTitle=Hello WorldopenDialogButtonText=Say Hello With DialogdialogCloseButtonText=Ok # Invoice ListinvoiceListTitle=Invoices

暂时还没有Controller，就是个数据暂时，跑一下看看

6），运行看效果

2，Data Types （数据类型）

数据类型，比较典型的是金额的话，需要对应的Currency，不然也不知道是多少钱是吧。

下面来看具体的例子。

1），InvoiceList.view.xml

    invoiceListTitle}"        class="sapUiResponsiveMargin"        width="auto"        items="{invoice>/Invoices}">                    Quantity} x {invoice>ProductName}"                number="{                    parts: [                        'invoice>ExtendedPrice',                        'view>/currency'                    ],                    type: 'Currency',                    formatOptions: {                        showMeasure: false                    }                }"                numberUnit="{view>/currency}"/>

- controllerName="ui5.walkthrough.controller.InvoiceList"

加了个Controller

- ObjectListItem: 列表中的每一项使用ObjectListItem控件显示

- core:require: 动态加载Currency类型用于数据格式化

- title: 显示数量和产品名称的组合

- number: 复杂绑定，包含：

- parts: 绑定多个数据源(价格和货币类型)

- type: 使用Currency类型格式化，这里的主要意义就是把小数点都保留成 2位的

- formatOptions: 格式化选项(不显示货币符号)

- numberUnit: 显示货币单位。这个其实和 number里的Currency是一个东西，只不过这个显示的小

<ObjectListItem
core:require="{
Currency: 'sap/ui/model/type/Currency'
}"
title="{invoice>Quantity} x {invoice>ProductName}"
number="{
parts: [
'invoice>ExtendedPrice',
'view>/currency'
],
type: 'Currency',
formatOptions: {
showMeasure: false
}
}"
numberUnit="{view>/currency}"/>

2），InvoiceList.controller.js

sap.ui.define([	"sap/ui/core/mvc/Controller",	"sap/ui/model/json/JSONModel"], (Controller, JSONModel) => {	"use strict"; 	return Controller.extend("ui5.walkthrough.controller.InvoiceList", {		onInit() {			const oViewModel = new JSONModel({				currency: "EUR"			});			this.getView().setModel(oViewModel, "view");		}	});});

- this.getView().setModel(oViewModel, "view");

其实就是把一个JasonModel 给set 到 View上面，名称就叫 “view"。

有关JasonModel，可以参照下面文章。

SAP学习笔记 - 开发15 - 前端Fiori开发 Boostrap，Controls，MVC(Model，View，Controller），Modules-CSDN博客

可以看到，这个Controller的作用就是弄一个Currency（这里是EUR），因为咱们json里没有嘛

真正开发当中，这个基本都是从DB取。