SAPUI5基础知识25 - 聚合绑定(Aggregation Binding)

1. 背景

Aggregation Binding 是 SAPUI5 中的一种数据绑定方式,用于将数据模型中的集合(如数组)绑定到 UI 控件的聚合(如列表项、表格行等)

常见的场景包括将一个数组绑定到 sap.m.Listitems 聚合,或者将一个数组绑定到 sap.ui.table.Tablerows 聚合。

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文件中加载发票数据,并实例出化一个名字为invoiceJSONModel

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/414914.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

人脸静态活体检测(高精度版) API 对接说明

人脸静态活体检测&#xff08;高精度版&#xff09; API 对接说明 本文将介绍人脸静态活体检测&#xff08;高精度版&#xff09;API 对接说明&#xff0c;它可用于对用户上传的静态图片进行防翻拍活体检测&#xff0c;以判断是否是翻拍图片。 接下来介绍下 人脸静态活体检测…

yolo8 目标检测、鉴黄

省流 看前必读 别浪费时间 &#xff1a;本文只是一个记录&#xff0c;防止自己下次被改需求时浪费时间&#xff0c;在这里就随意的写了一下文章记录整个步骤&#xff0c;但是文章想必肯定没有对应的教程讲的详细&#xff0c;该文章只适合想要快速按照步骤完成一个简单的 demo 的…

【Next.js 入门指南】5分钟创建你的第一个 Next.js 应用

你是否曾经梦想过构建一个快速、高效且 SEO 友好的 React 应用&#xff1f;今天&#xff0c;我们将一起探索 Next.js —— 一个革命性的 React 框架&#xff0c;它将帮助你轻松实现这个梦想。在接下来的 5 分钟里&#xff0c;你将创建并运行你的第一个 Next.js 应用&#xff0c…

23:【stm32】ADC模数转换器

ADC模数转换器 1、ADC的简介2、逐次逼近型ADC3、采样时间和转换时间4、STM32中ADC模块5、编程案列5.1、AD单通道5.2、AD多通道 1、ADC的简介 ADC就是一个模数转换器&#xff0c;将引脚上连续变化的模拟电压转换为内存中存储的数字变量&#xff0c;建立模拟电路到数字电路的桥梁…

春秋云镜(ZZCMS 2023)·CVE-2023-50104

漏洞参考说明&#xff1a;GitHub - zzq66/cve4 漏洞复现&#xff1a; 1、访问 URL/3/E_bak5.1/upload/index.php 2、使用默认账户密码admin/admin登录 3、上传恶意语句 修改tablename字段为eval($_POST[1]) POST /3/E_bak5.1/upload/phomebak.php HTTP/1.1 Host: eci-2zehp12…

华为云征文 | 华为云Flexus云服务器X实例之Docker环境下部署JmalCloud个人网盘

华为云征文 | 华为云Flexus云服务器X实例之Docker环境下部署JmalCloud个人网盘 前言一、Flexus云服务器X实例介绍1.1 Flexus云服务器X实例简介1.2 Flexus云服务器X实例特点1.3 Flexus云服务器X实例使用场景 二、JmalCloud介绍2.1 JmalCloud简介2.2 JmalCloud优点2.3 JmalCloud使…

阿里云身份证二要素详细使用

初步&#xff1a; 先登录阿里云&#xff08;找官网链接&#xff09; 2、云市场搜索身份证二要素 看个人需求选择 3、我选择的是下边这个 4、接下来看文档具体调用&#xff08;在请求示例中有选择语言的代码 我选择的就是java&#xff09; 5、在控制台看appcode码 放入代码中…

揭秘难以复现Bug的解决之道:堆栈分析实战

目录 引言 友情提示难以复现的Bug之痛 寄存器(SP、LR)详解 SP寄存器&#xff1a;堆栈的指路明灯LR寄存器&#xff1a;函数调用与异常处理的桥梁 问题分析与解决流程揭秘 保存现场分析堆栈数据 堆栈结构入栈顺序 案例 J-Link工具 常用命令保存RAM数据到本地 分析栈基本信息 分…

全国大学生数据建模比赛——深度学习

全国大学生数学建模比赛中&#xff0c;深度学习可以成为解决复杂问题的有力手段。 一、深度学习的优势在比赛中的体现 强大的模式识别能力&#xff1a;深度学习模型&#xff0c;如卷积神经网络&#xff08;CNN&#xff09;和循环神经网络&#xff08;RNN&#xff09;&#xff0…

如何在 Raspberry Pi 5 上设置 Raspberry Pi AI Kit

本指南将帮助您在 Raspberry Pi 5 上安装 Raspberry Pi AI Kit。这将使您能够使用 Hailo AI 神经网络加速器运行 rpicam-apps 摄像头演示。 如果您在开始安装人工智能套件之前需要帮助&#xff0c;本指南提供了安装过程的分步图片。 安装人工智能套件&#xff1a;https://www.…

【初出江湖】SOA 与微服务:哪个最适合您的业务?

目录标题 面向服务的体系结构 (SOA)SOA 角色那么它们是如何通信和协同工作的呢&#xff1f; SOA 的优势 微服务架构微服务的优势 SOA 和微服务之间的区别SOA 与微服务&#xff1a;常见问题采用 SOA 和微服务面临哪些挑战&#xff1f;SOA 和微服务是否可以共存&#xff1f;每种体…

wpf prism 《1》、区域 、模块化

安装prism.DryIoc 修改app.xaml <prism:PrismApplication x:Class"WpfApp3.App"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local"clr-namespace:W…

vue2的使用

准备容器引包&#xff08;官网&#xff09; — 开发版本/生产版本创建Vue实例 new Vue()指定配置项&#xff0c;渲染数据 el:指定挂载点data提供数据 可以把线上的cdn的vue的地址下载到本地进行依赖。 Vue2下载地址 https://v2.vuejs.org/v2/guide/installation.html vue.js没…

Linux虚拟机搭建K8S环境

文章目录 一、环境准备二、系统初始化三、部署master四、添加node节点五、部署网络六、部署dashboard七、登录dashboard面板 一、环境准备 首先在vmware上新建4台相同配置的虚拟机&#xff0c;除了IP和主机名外&#xff0c;其余配置相同。由于是搭建K8S初始环境&#xff0c;没…

开学寄快递,行李轻松寄,出行无压力

“春风得意马蹄疾&#xff0c;一日看尽长安花。”新的学期&#xff0c;新的征程&#xff0c;新生们在准备迎接开学时&#xff0c;不想拖着重重的行李开学的&#xff0c;那么寄快递这件事可得提上日程啦! 一、如何选择快递 如何选择一家价格实惠的快递公司成为了大家关注的焦点…

Linux bash脚本 批量创建文件

目录 一. 需求二. 前置知识一. 无进度条版本1.1 知识点1.2 代码1.3 效果 二. 有进度条版本2.1 代码2.2 效果 一. 需求 在当前目录下生成指定年份的文件&#xff0c;要求从生成1月到12月&#xff0c;每个月份的文件。 若用户不指定年份&#xff0c;则默认生成当前年的文件提示…

【C++】手动实现String类的封装(分文件编译)

实现了String类的大部分封装&#xff0c;采用分文件编译 //mystring.h #ifndef MYSTRING_H #define MYSTRING_H#include <iostream> #include <cstring> using namespace std;class myString { private:char *str; //定义一个字符串int size; //记录字符串…

[知识分享]华为铁三角工作法

在通信技术领域&#xff0c;尤其是无线通信和物联网领域&#xff0c;“华为铁三角”是华为公司内部的一种销售、交付和服务一体化的运作模式。这种模式强调的是以客户为中心&#xff0c;通过市场、销售、交付和服务三个关键环节的紧密协作&#xff0c;快速响应客户需求&#xf…

tensorrt plugin

自定义plugin 流程 首先明确要开发的算子&#xff0c;最好是 CUDA 实现&#xff1b;继承 IPluginV2DynamicExt / IPluginV2IOExt类实现一个Plugin 类&#xff0c;在这里调用前面实现的算子&#xff1b;继承 IPluginCreator 类实现一个 PluginCreator 类&#xff0c;用于创建插…

JeecgBoot积木报表AviatorScript表达式注入漏洞复现

文章目录 漏洞信息漏洞复现环境搭建poc复现DNSLog验证 漏洞信息 影响组件&#xff1a;JimuReport积木报表 影响版本&#xff1a;v1.6.0 &#xff1c; JimuReport ≤ 1.7.8 漏洞名称&#xff1a;AviatorScript表达式注入漏洞 漏洞链接&#xff1a;积木报表软件存在AviatorSc…