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://www.mzph.cn/pingmian/47486.shtml

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

相关文章

RocketMQ单结点安装/Dashboard安装

RocketMQ单结点安装/Dashboard安装

目录 1.安装NameServer 2.安装Broker 3.使用自带工具测试数据发送 4.使用DashBoard进行查看 5.关闭相关设备 前置条件&#xff1a;两台虚拟机CentOS Linux release 7.5.1804(ps:当然也可以都部署在一台机器上) RocketMq属于天生集群。需要同时启动nameServer和Broker进行…
阅读更多...
go练习：图像

go练习：图像

自定义 Image 类型&#xff0c;实现必要的方法并调用 pic.ShowImage。 Bounds 应当返回一个 image.Rectangle &#xff0c;例如 image.Rect(0, 0, w, h)。 ColorModel 应当返回 color.RGBAModel。 At 应当返回一个颜色。上一个图片生成器的值 v 对应于此次的 color.RGBA{v, …
阅读更多...
CMMI认证是什么？做CMMI认证的必要条件？CMMI认证的重要性

CMMI认证是什么？做CMMI认证的必要条件？CMMI认证的重要性

CMMI&#xff08;Capability Maturity Model Integration&#xff09;认证&#xff0c;作为企业追求卓越软件工程实践的标志&#xff0c;其实现过程既严谨又复杂。首先&#xff0c;我们需要深入理解CMMI的核心理念&#xff0c;即持续的过程改进和成熟度提升。 为了实现CMMI认证…
阅读更多...
redistemplate介绍与演示

redistemplate介绍与演示

redistemplate是一个用于在Redis中存储和检索数据的模板库。它提供了一组简单易用的函数和接口&#xff0c;使开发者能够更方便地使用Redis进行数据操作。 使用redistemplate&#xff0c;你可以实现以下功能&#xff1a; 存储和检索数据&#xff1a;redistemplate提供了存储和…
阅读更多...
Lucene 索引文件详解：结构与工作原理

Lucene 索引文件详解：结构与工作原理

Lucene 索引文件详解&#xff1a;结构与工作原理 Apache Lucene 是一个强大的搜索引擎库&#xff0c;用于为大规模文本数据创建搜索和索引功能。Lucene 使用特定的文件格式来存储索引&#xff0c;以便高效地进行搜索。理解这些索引文件格式对于调优性能和解决潜在问题非常重要…
阅读更多...
C++ 几何计算库

C++ 几何计算库

代码 #include <iostream> #include <list> #include <CGAL/Simple_cartesian.h> #include <CGAL/AABB_tree.h> #include <CGAL/AABB_traits.h> #include <CGAL/AABB_segment_primitive.h> #include <CGAL/Polygon_2.h>typedef CGAL…
阅读更多...
每天一个数据分析题（四百三十二）- 假设检验

每天一个数据分析题（四百三十二）- 假设检验

在假设检验问题中&#xff0c;原假设为H0 &#xff0c;给定显著水平为α&#xff0c;则关于假设检验的原理说法正确的是 A. 中心极限定理 B. 小概率事件 C. 置信区间 D. 正态分布的性质 数据分析认证考试介绍&#xff1a;点击进入 题目来源于CDA模拟题库 点击此处获取答…
阅读更多...
线性代数|机器学习-P24加速梯度下降(动量法)

线性代数|机器学习-P24加速梯度下降(动量法)

文章目录 1. 概述2. 引入3. 动量法梯度下降 1. 概述 我们之前学的最速梯度下降[线搜索方法] 公式如下&#xff1a; x k 1 x k − s k ∇ f ( x k ) \begin{equation} x_{k1}x_k-s_k\nabla f(x_k) \end{equation} xk1​xk​−sk​∇f(xk​)​​ 但对于这种方法来说&#xff…
阅读更多...
助力数据记录：Connext的Historian功能启动指南

助力数据记录：Connext的Historian功能启动指南

​ 在工业自动化领域&#xff0c;Connext以其全新的OPCUA数据采集解决方案为核心&#xff0c;不仅拥有超越传统的扩展功能&#xff0c;而且在多个行业中都得到了广泛的认证。Connext能够快速找出解决方案并迅速部署&#xff0c;整个过程不会影响到原有的生产。它的强大之处在于…
阅读更多...
Android12 禁用adb

Android12 禁用adb

这种做法没有删除任何adb相关的东西&#xff0c;只是设置persist.sys.usb.config中的adb相关属性时添加宏控制。 userdebug版本一样可以禁用 添加宏开关 device/mediatek/mt6761/BoardConfig.mk # for adb ADB_ENABLE:false添加ro.adb.enabled属性 build/make/core/main.mk…
阅读更多...
元素的显示与隐藏

元素的显示与隐藏

阅读更多...
信创学习笔记(三),信创之操作系统OS思维导图

信创学习笔记(三),信创之操作系统OS思维导图

创作不易 只因热爱!! 热衷分享&#xff0c;一起成长! “你的鼓励就是我努力付出的动力” 一. 回顾信创CPU芯片 1. x86应用生态最丰富, 海光(3,5,7)授权较新,无桌面授权,多用于服务器 兆芯(ZX, KX, KH)授权较早期. 2. ARMv8移动端应用生态丰富, 华为鲲鹏(9) ,制裁中&#xff0c;…
阅读更多...
基于python的三次样条插值原理及代码

基于python的三次样条插值原理及代码

1 三次样条插值 1.1 三次样条插值的基本概念 三次样条插值是通过求解三弯矩方程组&#xff08;即三次样条方程组的特殊形式&#xff09;来得出曲线函数组的过程。在实际计算中&#xff0c;还需要引入边界条件来完成计算。样条插值的名称来源于早期工程师制图时使用的细长木条&…
阅读更多...
oracle 经营范围 设计

oracle 经营范围 设计

在Oracle数据库中设计经营范围通常涉及创建相关的数据库表来记录和管理经营范围内的数据。以下是一个简单的例子&#xff0c;展示了如何设计一个经营范围表&#xff1a; CREATE TABLE business_units (bu_id NUMBER PRIMARY KEY,bu_name VARCHAR2(100),parent_bu_id NUMBER,CO…
阅读更多...
探索Node.js中的node-xlsx：将Excel文件解析为JSON

探索Node.js中的node-xlsx：将Excel文件解析为JSON

在Node.js开发中&#xff0c;处理Excel文件是一个常见需求&#xff0c;特别是在需要导入大量数据或生成报表的场景中。node-xlsx 是一个强大的库&#xff0c;它提供了Excel文件的解析和生成功能。本文将深入探讨 node-xlsx 的使用&#xff0c;并通过一个案例演示如何将Excel文件…
阅读更多...
算法——双指针（day2）

算法——双指针（day2）

目录 202.快乐数 题目解析&#xff1a; 算法解析&#xff1a; 代码&#xff1a; 11.盛最多水的容器 题目解析&#xff1a; 算法解析&#xff1a; 代码&#xff1a; 202.快乐数 力扣链接&#xff1a;202.快乐数 题目解析&#xff1a; 本文中最重要的一句话就是重复平方和…
阅读更多...
AI自动生成PPT哪个软件好？高效制作PPT优选这4个

AI自动生成PPT哪个软件好？高效制作PPT优选这4个

7.15初伏的到来&#xff0c;也宣告三伏天的酷热正式拉开序幕~在这个传统的节气里&#xff0c;人们以各种方式避暑纳凉&#xff0c;享受夏日的悠闲时光。 而除了传统的避暑活动&#xff0c;我们还可以用一种新颖的方式记录和分享这份夏日的清凉——那就是通过PPT的方式将这一传…
阅读更多...
班迪录屏Bandicam使用详解

班迪录屏Bandicam使用详解

Bandicam是一款功能强大的视频录制工具&#xff0c;录制出来的视频体积较小且内容清晰度较高&#xff0c;平时录屏、录游戏都非常合适。可以全屏幕录制&#xff0c;也可以自定义录制区域&#xff0c;还可以在录制时添加自定义的logo&#xff0c;并且有个绘制模式&#xff0c;适…
阅读更多...
学习008-01-02 Define the Data Model and Set the Initial Data（定义数据模型并设置初始数据 ）

学习008-01-02 Define the Data Model and Set the Initial Data（定义数据模型并设置初始数据 ）

Define the Data Model and Set the Initial Data&#xff08;定义数据模型并设置初始数据 &#xff09; This topic explains how to implement entity classes for your application. It also describes the basics of automatic user interface construction based on a da…
阅读更多...
cookies和session的区别【面试】

cookies和session的区别【面试】

一、 共同点&#xff1a; 目的&#xff1a;Cookie和Session都是用来跟踪浏览器用户身份的会话方式。 二、 工作原理&#xff1a; 1. Cookie的工作原理 浏览器端第一次发送请求到服务器端。服务器端创建Cookie&#xff0c;包含用户信息&#xff0c;然后将Cookie发送到浏览器…
阅读更多...
最新文章

Copyright @ 2022~2023