SAPUI5基础知识15 - 理解控件的本质

1. 背景

经过一系列的练习，通过不同的SAPUI5控件，我们完成了对应用程序界面的初步设计，在本篇博客中，让我们一起总结下SAPUI5控件的相关知识点，更深入地理解SAPUI5控件的本质。

通常而言，一个典型UI5应用程序的页面结构如下：
在这里插入图片描述

  • 应用程序的最外层是sap.m.App控件的根容器，用来管理和导航不同的页面sap.m.Page；
  • 在一个应用程序中，可以包含若干个页面sap.m.Page，用于承载不同的内容；
  • 在一个页面内，根据内容的分类，我们可以有多个面板控件sap.m.Panel，用于信息的分组；
  • 在一个面板控件内，又可以有多个不同类型的控件来构成页面的内容，例如sap.m.Button，sap.m.Input等。

这些元素的本质是相同的，它们都是SAPUI5控件。

2. 控件的本质

SAPUI5控件的本质是一个 JavaScript 对象，它封装了 UI 元素的行为和外观。其具体的继承关系如下：
在这里插入图片描述

  • sap.ui.base.Object:它是所有SAPUI5对象的基类
  • sap.ui.base.EventProvider: 它继承Object类，并提供触发和绑定事件的能力，当事件被触发时通知事件响应程序
  • sap.ui.base.ManagedObject:提供绑定功能，使类可以被管理(可以通过getter/setter访问属性、关联和聚合)
  • sap.ui.core.Element:支持元素绑定，为管理对象添加自定义数据，包含与UI相关的属性，如布局能力、DOM访问
  • sap.ui.core.Control: 所有SAPUI5控件的基类，它提供控件生命周期的功能
  • sap.m.Label: 特定的控件的实现，在本例中为标签控件, 它是对Control对象功能的扩展

每个控件都有自己的属性和所继承的属性，控件可以访问父对象的属性(通过原型链)。

通过上面的关系图可见，SAPUI5中每个具体的控件都继承自sap.ui.core.Control 类，控件将会包含对应的构造函数、属性、聚合、关联、事件和方法。

2.1 控件的构造函数（Constructor）

构造函数用于创建控件实例。通常在创建控件时，可以传递一个 JSON 对象来初始化控件的属性、聚合等。

var oButton = new sap.m.Button({text: "Click Me",press: function() {alert("Button Pressed");}
});

2.2 控件的属性（Properties）

属性是控件的基本数据单元，用于定义控件的状态。属性通常是简单的数据类型，如字符串、数字或布尔值。

通过JS代码设置控件属性：

var oText = new sap.m.Text({text: "Hello, World!"
});

在XML文件中设置控件属性：

<mvc:Viewxmlns="sap.m"
><Text text="Hello World" />
</mvc:View>

2.3 控件的聚合（Aggregations）

聚合是控件的子控件集合，用于构建复杂的 UI 结构。一个控件可以包含多个子控件。

聚合定义了控件之间的父子关系，用于构建控件层次结构，父控件与子控件共享其生命周期。

通过JS代码设置聚合：

var oPage = new sap.m.Page("myPage", {title: "My Page",content: [new sap.m.Button("myButton", {text: "Click Me",press: function() {alert("Button pressed");}}),new sap.m.List("myList", {items: [new sap.m.StandardListItem("item1", { title: "Item 1" }),new sap.m.StandardListItem("item2", { title: "Item 2" }),new sap.m.StandardListItem("item3", { title: "Item 3" })]})]
});

在这个示例中，sap.m.Page控件有一个名为content的Aggregation，它包含了一个sap.m.Button控件和一个sap.m.List控件。sap.m.List控件又有一个名为items的Aggregation，它包含了三个sap.m.StandardListItem控件。

在JavaScript代码中创建聚合时，

  • 对于每个多重聚合，都提供了一个add函数:add<aggregationName>()
  • 对于简单聚合(0:1基数)，提供了一个setter函数:set<aggregationName>()
  • 这些函数接受一个实例化的控制对象，该对象将被添加到聚合<aggregationName>
  • 聚合可以使用聚合的getter函数获取
var oHorizontalLayout = new sap.ui.layout.HorizontalLayout();
oHorizontalLayout.addContent(new sap.m.Text({text: "Hello World" }));
oHorizontalLayout.getContent();  //[sap.m.Text]

当在XML视图中创建聚合时：

  • 聚合控件可以放在父元素的开始和结束标记之间
  • 如果聚合被标记为默认(在API文档中)，则不必为聚合本身创建节点
  • 否则，您将聚合控件包含在<aggregationName></aggregationName>标签中
  • 对于HorizontalLayout, content是默认聚合，因此可以跳过它
<layout:HorizontalLayout><content><Text text="Hello World" /></content>
</layout:HorizontalLayout>

聚合的名称可以省略：

<layout:HorizontalLayout><Text text="Hello World" />
</layout:HorizontalLayout>

2.4 控件的关联（Associations）

关联用于定义控件之间的关系，但与聚合不同，关联并不直接包含子控件，而是引用其他控件。

关联允许一个控件引用另一个控件，但不会创建父子关系（关联控件的生命周期独立于它们的父控件）。

例如，sap.m.Checkbox控件有一个名为ariaLabelledBy的关联，根据API文档，它接受一个sap.ui.core.Control对象或sap.ui.core.ID对象的数组

在Javascript代码中创建关联时：

  • 对于每个多重关联，都提供一个add函数:add<associationName>()
  • 对于简单关联(0:1基数)，提供了一个setter函数:set<associationName>()
  • 这些函数接受一个实例化的控件对象或控件的ID对象，该对象将被添加到关联<associationName>
  • 可以使用关联的getter函数获取关联
var oCheckbox = new sap.m.Checkbox({ text: "Ok" });
var oLabel = new sap.m.Label({ text: "Select option" });
oCheckbox.addAriaLabelledBy(oLabel);

在XML视图中创建关联时：

  • 类似于聚合的创建
  • 通过指定关联控件的ID将其设置为一个简单属性
<CheckBox text= "Hello World"ariaLabelledBy= "idOfLabel" />

以下是一个简单的示例，展示了如何在SAPUI5中使用Control Association：

var oInput = new sap.m.Input("myInput");var oLabel = new sap.m.Label("myLabel", {text: "Enter your name:",labelFor: oInput
});

在这个示例中，sap.m.Label控件有一个名为labelFor的Association，它引用了一个sap.m.Input控件。当用户点击该标签时，关联的输入字段将获得焦点。

2.5 控件的事件（Events）

事件是控件与用户交互的方式。控件可以触发事件，应用程序可以监听这些事件并作出响应。

在Javascript代码中处理事件处理程序时：

  • 每个事件都有一个attach<eventName>()函数，它接受处理程序函数
  • 这个处理程序的第一个参数应该是一个oEvent对象，它保存了特定于事件的信息
  • 每个事件都有一个detach<eventName>()函数，用于删除处理程序

在XML视图中处理事件处理程序时：

  • 事件处理程序在XML属性中定义为标准属性
  • 只需指定处理事件的函数名(从控制器中)
  • 这个处理程序的第一个参数应该是一个oEvent对象，它保存了特定于事件的信息

注意：不要在指定事件处理程序函数时使用圆括号！

在SAPUI5中，Control Event是控件可以触发的一种行为。这些事件通常是由用户交互（如点击按钮、选择列表项等）或程序逻辑（如数据加载完成）触发的。开发者可以为这些事件编写处理函数，以便在事件发生时执行特定的操作。

以下是一个简单的示例，展示了如何在SAPUI5中使用Control Event：

var oButton = new sap.m.Button("myButton", {text: "Click Me",press: function() {alert("Button pressed");}
});

在这个示例中，sap.m.Button控件有一个名为press的事件，它的处理函数是一个匿名函数，当用户点击按钮时，这个函数就会被执行，显示一个警告框。

2.6 控件的方法（Methods）

方法是控件的行为函数，用于执行特定的操作。方法可以是控件自带的，也可以是自定义的。

var oButton = new sap.m.Button({text: "Click Me"
});// 调用方法设置按钮文本
oButton.setText("New Text");

3. 参考资料

有关SAPUI5控件的使用文档，可查看https://sapui5.hana.ondemand.com/#/api ，在官方文档中，详细描述了每个控件的具体用法。

在这里插入图片描述

4. 小结

本文对于SAPUI5中控件的概念进行了总结，并给出了相关的示例。

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

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

vscode通过ssh链接远程服务器上的docker

vscode通过ssh链接远程服务器上的docker

目录 1 编译docker image1.1 编译镜像1.2 启动镜像 2 在docker container中启动ssh服务2.1 确认是否安装ssh server2.2 修改配置文件2.3 启动ssh服务 3 生成ssh key4 添加ssh公钥到docker container中5 vscode安装插件Remote - SSH6 在vscode中配置 1 编译docker image 一般来…
阅读更多...
【flink】之如何快速搭建一个flink项目

【flink】之如何快速搭建一个flink项目

1.通过命令快速生成一个flink项目 curl https://flink.apache.org/q/quickstart.sh | bash -s 1.19.1 生成文件目录&#xff1a; 其中pom文件包好我们所需要的基础flink相关依赖 2.测试 public class DataStreamJob {public static void main(String[] args) throws Except…
阅读更多...
激活pytorch遇到报错usage: conda-script.py [-h] [--no-plugins] [-V] COMMAND ...

激活pytorch遇到报错usage: conda-script.py [-h] [--no-plugins] [-V] COMMAND ...

问题 今天初次尝试在pycharm上创建与激活虚拟环境&#xff0c;创建结束后&#xff0c;使用命令conda activate pytorch激活虚拟环境时出现以下报错&#xff1a; usage: conda-script.py [-h] [–no-plugins] [-V] COMMAND … conda-script.py: error: argument COMMAND: inval…
阅读更多...
docker 安装并测试（Ubuntu下）

docker 安装并测试（Ubuntu下）

1. 确认安装环境&#xff08;操作系统版本和 CPU 架构&#xff09; 2. 如果有旧版本的 docker 需要进行卸载 使用 docker 命令检查是否已经安装了 docker 如果 docker 已经安装&#xff0c;使用以下命令卸载&#xff1a; apt-get purge docker-ce docker-ce-cli containerd…
阅读更多...
JavaWeb笔记_Response对象

JavaWeb笔记_Response对象

一.Response对象 1.1 Response对象概述 a.专门负责给浏览器响应信息&#xff08;响应行&#xff0c;响应头&#xff0c;响应体&#xff09;的对象 b.我们主要使用的是跟HTTP协议相关的Response对象&#xff1a;HTTPServletResponse&#xff0c;继承了ServletResponse&#x…
阅读更多...
均值滤波算法及实现

均值滤波算法及实现

均值滤波器的使用场景&#xff1a; 均值滤波器使用于处理一些如上述蓝色线的高斯噪声场景 红色曲线是经过均值滤波处理后的数据。主要因为均值滤波设置数据缓冲区&#xff08;也即延时周期&#xff09;&#xff0c;使得测量值经过缓冲不会出现特别大的变化。 黄色曲线为高斯噪声…
阅读更多...
趣谈linux操作系统 9 网络系统-读书笔记

趣谈linux操作系统 9 网络系统-读书笔记

文章目录 网络协议栈基础知识回顾网络分层网络分层的目的各层作用简介延伸-ip地址,有类,无类,cidr socket实现分析tcp/udp回顾socket编程回顾TCP编程回顾UDP编程回顾差异 socket相关接口实现浅析sokcet实现解析创建socket的三个参数socket函数定义及其参数创建socket结构体关联…
阅读更多...
Redis高级篇—分布式缓存

Redis高级篇—分布式缓存

目录 Redis持久化 RDB持久化 AOF持久化 RDB与AOF对比 Redis主从 全量同步 增量同步 Redis哨兵 RedisTemplate集成哨兵实现 Redis分片集群 散列插槽 集群伸缩 故障转移 自动故障转移 手动故障转移 RedisTemplate访问分片集群 Redis持久化 RDB持久化 RDB全称Re…
阅读更多...
《基于 CDC、Spark Streaming、Kafka 实现患者指标采集》

《基于 CDC、Spark Streaming、Kafka 实现患者指标采集》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…
阅读更多...
第三篇 Vue项目目录结构介绍

第三篇 Vue项目目录结构介绍

1、最外层目录结构 passagerFrontPage ├── .vscode //vscode配置&#xff0c;不用理会 ├── node_modules //项目依赖&#xff0c;npm install命令执行后自动生成 ├── public //公共资源存放 ├── src //源码 ├── tests //选装&#xff1a;测试模块 ├── .git…
阅读更多...
负载均衡 lvs

负载均衡 lvs

1. 4层转发(L4) 与 7层转发(L7) 区别 4层转发(L4) 与 7层转发(L7) 区别 转发基于的信息 状态 常用的服务 L4 基于网络层和传输层信息&#xff1a; L4转发主要依赖于网络层IP头部(源地址&#xff0c;目标地址&#xff0c;源端口&#xff0c;目标端口)和传输层头部&#xff…
阅读更多...
【python】OpenCV—Scanner

【python】OpenCV—Scanner

文章目录 1、需求描述2、代码实现3、涉及到的库函数cv2.arcLengthcv2.approxPolyDPskimage.filters.threshold_localimutils.grab_contours 4、完整代码5、参考 1、需求描述 输入图片 扫描得到如下的结果 用OpenCV构建文档扫描仪只需三个简单步骤: 1.边缘检测 2.使用图像中…
阅读更多...
UniVue@v1.5.0版本发布：里程碑版本

UniVue@v1.5.0版本发布：里程碑版本

前言 以后使用UniVue都推荐使用1.5.0以后的版本&#xff0c;这个版本之后&#xff0c;更新的速度将会放缓。 希望这个框架能够切实的帮助大家更好的开发游戏&#xff0c;做出一款好游戏&#xff01;本开源项目采用的开源协议为MIT协议&#xff0c;完全开源化&#xff0c;以后也…
阅读更多...
IDEA的工程与模块管理

IDEA的工程与模块管理

《IDEA破解、配置、使用技巧与实战教程》系列文章目录 第一章 IDEA破解与HelloWorld的实战编写 第二章 IDEA的详细设置 第三章 IDEA的工程与模块管理 第四章 IDEA的常见代码模板的使用 第五章 IDEA中常用的快捷键 第六章 IDEA的断点调试&#xff08;Debug&#xff09; 第七章 …
阅读更多...
web安全之SQL手工注入漏洞测试

web安全之SQL手工注入漏洞测试

一、目的 1.掌握SQL注入原理&#xff1b; Sql注入详解(原理篇)_sql注入攻击的原理-CSDN博客 2.了解手工注入的方法&#xff1b; 3.了解MySQL的数据结构&#xff1b; 4.了解字符串的MD5加解密 二、过程 1.进去后出现以下界面 找注入点 发现有注入点&#xff0c;即id被代入执…
阅读更多...
怎样优化 PostgreSQL 中对复杂的日期时间格式转换和时区处理？

怎样优化 PostgreSQL 中对复杂的日期时间格式转换和时区处理？

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01;&#x1f4da;领书&#xff1a;PostgreSQL 入门到精通.pdf 文章目录 怎样优化 PostgreSQL 中对复杂的日期时间格式转换和时区处理&#xff1f; 怎样优化 PostgreSQL 中对复…
阅读更多...
Linux-开机自动挂载（文件系统、交换空间）

Linux-开机自动挂载（文件系统、交换空间）

准备磁盘 添加三块磁盘&#xff08;两块SATA&#xff0c;一块NVMe&#xff09; 查看设备&#xff1a; [rootlocalhost jian]# ll /dev/sd* [rootlocalhost jian]# ll /dev/nvme0n2 扩&#xff1a;查看当前主机上的所有块设备&#xff0c;通过如下指令实现&#xff1a; [root…
阅读更多...
【Linux】Linux环境设置环境变量操作步骤

【Linux】Linux环境设置环境变量操作步骤

Linux环境设置环境变量操作步骤 在一些开发过程中本地调试经常需要依赖环境变量的参数&#xff0c;但是怎么设置对小白来说有点困难&#xff0c;今天就介绍下具体的操作步骤&#xff0c;跟着实战去学习&#xff0c;更好的检验自己的技术水平&#xff0c;做技术还是那句话&…
阅读更多...
Elasticsearch：评估搜索相关性 - 第 1 部分

Elasticsearch：评估搜索相关性 - 第 1 部分

作者&#xff1a;来自 Elastic Thanos Papaoikonomou, Thomas Veasey 这是一系列博客文章中的第一篇&#xff0c;讨论如何在更好地理解 BEIR 基准的背景下考虑评估你自己的搜索系统。我们将介绍具体的技巧和技术&#xff0c;以便在更好地理解 BEIR 的背景下改进你的搜索评估流程…
阅读更多...
vue项目build以后整合到springboot项目里面---------gxl

vue项目build以后整合到springboot项目里面---------gxl

很多时候我们需要用到vue的组件&#xff0c;但是全栈的背景下懒得去搞前后端分离&#xff0c;很多权限校验后台都写好了&#xff0c;没必要再去做接口或者前端写一遍了&#xff0c;因此我们需要把打包后的项目整合到项目里面。 整合也很简单&#xff0c;照常vue项目开发&#…
阅读更多...
最新文章

Copyright @ 2022~2023