扩展标准控件

学习目标

使用 SAPUI5 框架中标准控件的功能。

标准控件的扩展

有时，客户的需求会超出既有 SAPUI5 控件的能力。在这种情况下，开发人员可以扩展现有控件和元素以满足客户需求。

在我们开始详细了解如何扩展现有 SAPUI5 控件之前，先来理解是什么让控件成为控件。

什么是控件？

从概念上讲：

控件是一个 UI 组件（通常是可见的），它可以响应用户的活动，并通过 JS API 向应用程序（及其他控件）公开属性、方法和事件。

从技术上讲，UI5 控件在设计时由以下部分组成：

Control API 定义，它定义属性、事件、方法，有时还定义关联和聚合。

Control Renderer，负责创建定义控件结构的 HTML 字符串。

Control Behavior，即负责控件交互性的 JavaScript 代码，处理用户事件、触发控件事件、处理方法调用和属性更改。

Control Style，定义控件的视觉效果（通常一个控件有多种视觉设计，打包为"Themes"）。

控件 API

控件 API 由关键字 metadata 表示。

控件元数据由属性、事件、聚合和关联组成。现在我们逐一详细查看。

控件元数据 - 属性

控件属性由名称和类型组成，还可选地包含默认值。有效类型包括：string（默认）、boolean、用于数值属性的 int 或 float、int[ ]（例如 int 数组），以及用于保存大小值（例如 px 或 rem 值）的属性的 sap.ui.core.CSSSize。

控件扩展的示例代码，显示定义新属性的 metadata 部分。

控件元数据 - 事件

控件事件仅通过其名称定义。

用于注册、取消注册和触发事件的方法由框架创建。例如，attachHover、detachHover 和 fireHover。

控件扩展的示例代码。metadata 部分定义了一个 allowhover 属性和一个 hover 事件。

控件元数据 - 聚合和关联

SAPUI5 也支持复合 UI 控件。要实现复合 UI 控件，控件开发人员必须定义指向其他控件的聚合或关联。

聚合

聚合通过其名称和一个配置对象定义。它是两个控件之间的关系，表示父子关系。例如，表格行（父）和单元格（子）。聚合的名称必须是复数形式的字符串值。下图展示了如何定义聚合。

控件扩展的示例代码。metadata 聚合部分定义了三个组件：acceptButton、content 和 worksetItems。

Type type 属性包含控件的子类。如果你只想设置 type，可以用字符串形式代替配置对象。
Multiple 该属性定义基数，可以包含值 0..1 或 0..n。默认值为 0..n。
singularName 此属性包含聚合的单数名称。框架将提供诸如 addWorksetItem 之类的方法。

关联

关联是两个控件之间的关系。它不是父子关系，而表示一种松耦合。例如，标签与文本字段相关联。

控件行为

添加元数据之后，你为控件添加方法实现。

控件方法命名规则

不要使用超类中提供的方法名称。这会导致覆盖超类的方法。
私有方法通过以下划线开头的名称来标识，例如 _checkForZero。所有其他方法都被视为公共方法。
不要使用以 get…、set…、insert…、add…、remove… 或 indexOf… 开头的名称，因为它们可能与属性或聚合自动生成的方法冲突。
具有特殊含义的方法名称如下：
on…：用于事件处理程序。
init：用于在控件实例化之后初始化控件。这是一个仅由 SAPUI5 核心调用的私有方法。
renderer：用于创建控件 HTML 的函数。

事件处理程序方法会被自动调用。例如，如果你将鼠标悬停在某个控件上方，系统会自动触发 onmouseover 事件。

你可以在 API reference 中找到自动管理的事件。sap/ui/events/ControlEvents

在事件处理程序方法内部，我们可以访问属性的 getter 和 setter。这些由框架自动提供。

我们示例中扩展的按钮控件有一个 allowHover 属性。因此，你应当明白框架会创建如下代码中所示的 getAllowHover( ) 方法。

控件扩展的示例代码，显示触发 hover 事件的 onmouseover 方法定义。

要在运行时处理该事件，你应当知道框架会创建一个在事件名称前加 "on" 的方法。

我们扩展的控件有一个名为 "hover" 的事件，因此我们必须使用 onHover 方法。

示例 View.xml 文件，在命名空间和页面内容中添加了新控件。hover 事件使用值 onHover 定义。在视图 controller.js 文件中，定义了 onHover 方法以显示消息。

控件渲染

Control Renderer

渲染器负责为控件创建 HTML 结构。
渲染器被分配给控件的 render 方法。
它是静态的，因此不能使用 "this"。Control 实例和 RenderManager 实例会传递给该方法。
渲染器方法可以访问控件的属性 getter 和 setter，以及控件定义的任何聚合和关联。

RenderManager

RenderManager 收集并拼接字符串片段，并通过使用如下方法将它们放置到 DOM 中的适当位置：

openStart - 打开 HTML 元素的起始标签，
openEnd - 结束以 openStart 开始的打开标签，
style - 将样式名称-值对添加到最后一个打开的 HTML 元素的样式集合中。仅当在 openStart/voidStart 与 openEnd/voidEnd 之间调用时才有效。

引用控件渲染器

UI 控件定义会引用渲染器类。

带控件渲染器的控件扩展示例代码。

示例：控件渲染器

下图（在一个示例实现中）向你展示渲染器实现的剖析。

控件渲染器的示例代码。

自 SAPUI5 1.67 起，RenderManager 提供了一组新的 API，用于描述可供控件渲染器使用的 DOM 结构。要使用新 API，请为你的 Renderer 实现分配值为 2 的属性 apiVersion。

渲染函数实现

下图展示了 render 方法的示例实现。该方法可以访问 RenderManager 实例以及应被渲染的控件。

控件渲染器 render 函数的示例代码。

扩展现有控件

业务示例

在本练习中，你将扩展一个标准 SAPUI5 控件以添加功能。将扩展 Button 控件，并将新控件添加到 Flights 表格中。该控件将被修改以添加 hover 事件，并显示通过控件上的自定义属性控制的文本。为节省一些时间，你将调整 fullscreen 应用程序。

注意

SAP Business Technology Platform 及其工具是云服务。由于云软件的特性，步骤流程以及字段和按钮的命名可能与练习解决方案有所不同。

先决条件

你需要已完成之前的练习，以实现 fullscreen 应用程序。

注意

如果需要，你可以从解决方案中导入 1-Fullscreen complete.tar 文件。

任务 1：扩展 Button 控件

在此步骤中，你将创建包含新 HoverButton 控件的 JavaScript 文件，它是对 sap.m.Button 控件的扩展。

步骤

打开 SAP Business Application Studio。
打开之前练习中的 fullscreen 项目。
按之前练习中所示执行此步骤。
在项目 fullscreen 的 webapp 文件夹中创建一个名为 control 的新文件夹，并将名为 HoverButton.js 的文件添加到新建的文件夹中。
选择项目的 webapp 文件夹，然后从上下文菜单中选择 New Folder。
在输入字段中，输入名称 control 作为文件夹名称，然后按键盘上的 Enter 键。
选择新建的文件夹，然后从上下文菜单中选择 New File。
在新的输入字段中，输入 HoverButton.js 作为文件名，然后按键盘上的 Enter 键。
在 *HoverButton.js* 文件中，扩展 sap.m 库中的标准 Button控件，并在 student.com.sap.training.advancedsapui5.fullscreen.control 命名空间中将该扩展命名为 HoverButton。
在 *HoverButton.js* 文件中输入以下代码：

sap.ui.define([
"sap/m/Button"
],
function (Button) {
"use strict";
return Button.extend("student.com.sap.training.advancedsapui5.fullscreen.control.HoverButton", {
});
}
);

定义 metadata，并向 metadata 添加具有以下属性和值赋值的属性 allowHover 和 hoverText：

allowHover 的属性-值对

属性	值
type	`boolean`
defaultValue	`false`

hoverText 的属性-值对

属性	值
type	`string`

在 extend 函数中输入以下代码：

metadata: {
properties: {
"allowHover": {
type: "boolean",
defaultValue: false
},
"hoverText": {
type: "string"
}
}
},

添加一个名为 hover 的新自定义事件，其值为空括号 {}。
在 properties 定义之后输入以下代码：

,
events: {
"hover": {}
}

在 metadata 之后添加一个 onmouseover 函数。
在 metadata 定义之后输入以下代码：

onmouseover: function(evt) {
}

在 onmouseover 函数中，检查 allowHover 是否为 true，如果是，则触发 hover 事件。

提示

请记住，属性会有框架创建的 getter 和 setter 方法。事件会创建 fire 方法，例如对于名为 press 的事件，会创建 firePress。

在 onmouseover 函数内输入以下代码：

if (this.getAllowHover()) {
this.fireHover();
}

添加一个渲染器，其值为空括号 {}。然后保存你的更改。

注意

不应出现语法错误。如果你为 onmouseover 方法设置了事件参数，可以忽略"未使用"的错误。

在 onmouseover 定义之后输入以下代码：

,
renderer: {}

保存你的更改。你的 HoverButton 实现现在应如下所示：

任务 2：将 HoverButton 控件添加到应用程序

步骤

打开 *Flights.view.xml* 文件。为了使用新的 HoverButton 控件，必须向视图添加一个 XML 命名空间，以便它能够正确地寻址该控件。在 *Flights.view.xml* 文件顶部定义了若干指向 SAP 提供库的命名空间。添加一个新的 XML 命名空间，其前缀为 cust，指向 HoverButton 控件所在的命名空间。
在 xmlns:l="sap.ui.layout" 之后输入以下代码：

xmlns:cust="student.com.sap.training.advancedsapui5.fullscreen.control"

作为 columns 聚合的最后一个元素，添加一个新的支持移动设备的 Column 元素，其属性和值如下：

Column 元素的属性-值对

属性	值
id	`flbooking`
minScreenWidth	`Tablet`
demandPopin	`true`
hAlign	`Center`

在 column4 声明之后输入以下代码：

<Column id="flbooking" minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
</Column>

向新的 Column 元素添加一个具有以下属性的新 sap.m.Text 元素：

Text 元素的属性-值对

属性	值
id	`flbookingtext`
text	`{i18n>bookaction}`

在 column 定义内输入以下代码：

<Text id="flbookingtext" text="{i18n>bookaction}"/>

作为 cells 聚合的最后一个元素，添加一个 HoverButton 元素，其属性和值如下。然后保存你的更改。

HoverButton 元素的属性-值对

属性	值
text	`{i18n>bookaction}`
allowHover	`true`
hoverText	`{=${Seatsmax} - ${Seatsocc}}`
hover	`onHover`
id	`hoverButton1`

注意

HoverButton 位于项目特定的命名空间中。

在 flseatsocctext 元素之后输入以下代码：

<cust:HoverButton id="hoverButton1" text="{i18n>bookaction}"
allowHover="true"
hoverText="{=${Seatsmax} - ${Seatsocc}}"
hover="onHover"
/>

保存你的更改。
将以下键-值对添加到 *i18n.properties* 文件中：

i18n.properties 文件中的键-值对

键	值
bookaction	Book flight

按之前练习中所示执行此步骤。
运行应用程序。

注意

请注意，由于我们不是在真实的 SAP Fiori 环境中测试应用程序，如果你使用 Dev Tools 调试应用程序，控制台中会出现错误。请忽略任何有关资源预加载的消息。

按之前练习中所示执行此步骤。
验证应用程序运行正常，并且 Flights 表格的每一行中都显示一个新的 Button。hover 的功能尚未实现，因此此时没有新增功能。
在 Carriers 表格中选择一个承运人。
验证应用程序运行正常，并且 Flights 表格的每一行中都显示一个新的 Button。

任务 3：实现 Hover 操作

步骤

打开 *i18n.properties* 文件，并将以下键-值对（值前带一个空格）添加到该文件中。然后保存你的更改。

i18n.properties 文件中的键-值对

键	值
msgSeatsAv	seats are available

打开 *i18n.properties* 文件并输入以下代码：

#MSG
msgSeatsAv=seats are available

保存你的更改。
添加的 HoverButton 控件将 hover 方法设置为调用名为 onHover 的方法。应用程序尚未实现此方法。打开 *Flights.controller.js* 文件，并向 sap.m.MessageToast 控件添加一个新依赖项。
打开项目 controller 文件夹中的 *Flights.controller.js* 文件。
按如下方式更新代码：

sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast"
],
function (Controller, MessageToast) {
"use strict";

将 onHover 函数添加到控制器实现中。该函数接收一个名为 evt 的参数。
在 onNavBack 函数实现之后输入以下代码：

,
onHover: function(evt) {
}

在 onHover 方法中，添加代码以显示一个 MessageToast，其中显示 HoverButton 控件的 hoverText，持续 1000 毫秒。从事件源读取 hoverText。使用 UI5 的 i18n 功能。然后保存你的更改。
在 onHover 函数内输入以下代码：

var sText = this.getOwnerComponent().getModel("i18n").getProperty("msgSeatsAv");
MessageToast.show(evt.getSource().getHoverText() + " " + sText, {duration: 1000});

启动应用程序。
按之前练习中所示执行此步骤。
选择一个承运人并导航到 Flights 表格。
按之前练习中所示执行此步骤。
将鼠标悬停在表格中的按钮上。将出现一个 MessageToast 对话框，显示可供预订的座位数。
将鼠标悬停在表格中的按钮上。
将出现一个 MessageToast 对话框，显示可供预订的座位数。
由于我们将在后续练习中进一步开发你的 fullscreen 项目，你可以通过下载来保存项目的当前状态。选择 fullscreen 项目，然后从上下文菜单中选择 Download。