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

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

JavaScript

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:

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

通过上面的关系图可见SAPUI5中每个具体的控件都继承自sap.ui.core.Control

2.1

属性是控件的基本数据单元用于定义控件的状态。

属性通常是简单的数据类型如字符串、数字或布尔值。

var

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

var

});在这个示例中sap.m.Page控件有一个名为content的Aggregation它包含了一个sap.m.Button控件和一个sap.m.List控件。

sap.m.List控件又有一个名为items的Aggregation它包含了三个sap.m.StandardListItem控件。

在JavaScript代码中创建聚合时

对于每个多重聚合都提供了一个add函数:addaggregationName()对于简单聚合(0:1基数)提供了一个setter函数:setaggregationName()这些函数接受一个实例化的控制对象该对象将被添加到聚合aggregationName聚合可以使用聚合的getter函数获取

var

sap.ui.layout.HorizontalLayout();

oHorizontalLayout.addContent(new

sap.m.Text({text:

oHorizontalLayout.getContent();

聚合控件可以放在父元素的开始和结束标记之间如果聚合被标记为默认(在API文档中)则不必为聚合本身创建节点否则您将聚合控件包含在aggregationName/aggregationName标签中对于HorizontalLayout,

layout:HorizontalLayoutcontentText

textHello

/layout:HorizontalLayout聚合的名称可以省略

textHello

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

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

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

在Javascript代码中创建关联时

对于每个多重关联都提供一个add函数:addassociationName()对于简单关联(0:1基数)提供了一个setter函数:setassociationName()这些函数接受一个实例化的控件对象或控件的ID对象该对象将被添加到关联associationName可以使用关联的getter函数获取关联

var

oCheckbox.addAriaLabelledBy(oLabel);在XML视图中创建关联时

CheckBox

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

Association

});在这个示例中sap.m.Label控件有一个名为labelFor的Association它引用了一个sap.m.Input控件。

当用户点击该标签时关联的输入字段将获得焦点。

2.5

事件是控件与用户交互的方式。

控件可以触发事件应用程序可以监听这些事件并作出响应。

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

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

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

在SAPUI5中Control

Event是控件可以触发的一种行为。

这些事件通常是由用户交互如点击按钮、选择列表项等或程序逻辑如数据加载完成触发的。

开发者可以为这些事件编写处理函数以便在事件发生时执行特定的操作。

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

Event

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

2.6

方法是控件的行为函数用于执行特定的操作。

方法可以是控件自带的也可以是自定义的。

var

有关SAPUI5控件的使用文档可查看https://sapui5.hana.ondemand.com/#/api

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