上一章讲了Icons（图标），Icon Explorer。
SAP学习笔记 - 开发21 - 前端Fiori开发 Icons（图标），Icon Explorer（图标浏览器）-CSDN博客
本章继续讲SAP Fiori开发的知识。
目录
以下是详细内容。
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
<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>这个视图说的是把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
<mvc:View
controllerName="ui5.walkthrough.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="ui5.walkthrough.view.HelloPanel"/>
<mvc:XMLView viewName="ui5.walkthrough.view.InvoiceList"/>
</content>
</Page>
</pages>
</App>
</Shell>
</mvc:View>- <mvc:XMLView viewName="ui5.walkthrough.view.InvoiceList"/>
这个是嵌套视图，这样就把 InvoiceList.view.xml 视图给加进来了，还是很方便的哈
SAP学习笔记 - 开发20 - 前端Fiori开发 Nest View（嵌套视图） ，Fragment（片段）-CSDN博客
5），i18n.properties
# App Descriptor
appTitle=Hello World
appDescription=A simple walkthrough app that explains the most important concepts of OpenUI5
# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}
homePageTitle=Walkthrough
helloPanelTitle=Hello World
openDialogButtonText=Say Hello With Dialog
dialogCloseButtonText=Ok
# Invoice List
invoiceListTitle=Invoices暂时还没有Controller，就是个数据暂时，跑一下看看
6），运行看效果
2，Data Types （数据类型）
数据类型，比较典型的是金额的话，需要对应的Currency，不然也不知道是多少钱是吧。
下面来看具体的例子。
1），InvoiceList.view.xml
<mvc:View
controllerName="ui5.walkthrough.controller.InvoiceList"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<List
headerText="{i18n>invoiceListTitle}"
class="sapUiResponsiveMargin"
width="auto"
items="{invoice>/Invoices}">
<items>
<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}"/>
</items>
</List>
</mvc:View>- 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取。
3），运行看效果
把 showCurrency: true
显示的就是这样的了，EUR 单位是不是有两个，下面那个小的就是 numberUnit显示的
就是说如果你不想显示小文字的货币单位，那你完全可以去掉 numberUnit
去掉 numberUnit，就显示成这样
4），总结
本节所说的Data Types的意思是说，Fiori 页面的格式化表示，你不需要自己写多少代码，
这些Data Types（数据类型）本身就自带格式，只要设上了，就会自带格式化。
- currency: "JPY"
这个Currency 的意义还有一个，这个需要说一下
就是每个币种，对保留小数位数的要求是不一样的，比如日元，没有小数；欧元，需要两位小数
它这个地方好像还没有太完善哈，如果原始数据有小数的话，JPY还是保留了 2位小数
而如果第二位小数为 0，则会被删掉
不管怎么说吧，好像跟SAP里面不太一样，不知道这个可不可以设置小数位数
那要是硬搞，能让JPY不显示小数吗？网上说也是可以的
通过属性设置：formatOptions > decimals: 0
TODO：惨，不好用
我估摸着，现在只能是 Jason数据过来的时候，就给整好，不要啥啥都靠Fiori 前端
- 属性的查找方法
下面咱们以 ObjectListItem 为例，来研究一下查找方法。
1），如何查找官方文档
方法1：直接访问SAPUI5 API参考
在顶部搜索栏输入"ObjectListItem"
在搜索结果中选择"ObjectListItem (API)"或"ObjectListItem (Samples)"
点 Control Sample 旁边那个链接，还能有例子提供
方法2：通过开发环境查找
在SAP Web IDE或Business Application Studio中
将光标放在控件名称上按F1
或右键点击控件选择"API Reference"
方法3：使用SAPUI5文档结构导航
进入API Reference部分
导航至
sap.m > List Items > ObjectListItem
2），ObjectListItem常用属性
ObjectListItem是SAPUI5中用于显示复杂列表项的控件，常用属性包括：
a），核心属性
title - 主标题文本
number - 右侧显示的数字（常用于金额、数量等）
numberUnit - 数字的单位（如货币符号）
intro - 副标题/简介文本
icon - 左侧显示的图标
activeIcon - 激活状态下的图标
type - 列表项类型（如Active, Inactive, Detail等）
b），状态相关属性
highlight - 高亮状态（如Success, Error, Warning等）
press - 点击事件处理函数
selected - 是否被选中
c），数字格式化
numberState - 数字的状态（如Success, Error等）
number和numberUnit常结合使用显示格式化的金额
d），其他属性
attributes - 附加属性集合（显示在标题下方）
firstStatus - 第一个状态指示器
secondStatus - 第二个状态指示器
markers - 标记集合
以上就是本篇的全部内容。
更多SAP顾问业务知识请点击下面目录链接或东京老树根的博客主页