使用 SAPUI5 智能控件

学习目标

  • 使用智能控件（Smart Controls）。

智能控件简介

智能控件简介

有时，实现 SAPUI5 应用程序会变成一项重复性的工作。有些应用程序可能具有不同的用例和 OData 服务，但 UI 却完全相同。此外，后端 OData 服务会附带大量元数据，例如国际化或字段长度，如果这些元数据能够被 SAPUI5 控件使用，就能节省大量开发时间。

智能控件确实会使用这些元数据来提供强大的功能。它们是 SAPUI5 控件的一个特定类别，除标准的 SAPUI5 特性之外还具备一些特殊特性，因而在某些场景中使用这些控件会更加容易。智能控件属于 sap.ui.comp 库，并且高度聚焦于 SAP Fiori elements。

命名空间 sap.ui.comp 包含以下控件类型：

  • SmartField

  • SmartTable 和 SmartList

  • SmartFilterBar

  • SmartChart 和 SmartMicrochart

  • SmartVariants

  • SmartGroup

SAP 未来将继续维护该库及其所有控件。不过，除非 SAP Fiori elements 特别要求，否则不会开发新特性。

实现 OData 服务

OData 服务可以使用 SAP Gateway Builder 或 ABAP CDS 来实现（例如，借助 SAP RESTful Application Programming Model）。

显示 Flight 实体类型属性的 SEGW 事务截图。

该图显示了名为 Flight 的实体的属性。可以看到，实体的每个属性都有多种特性。如图所示，对于某些特性，Sortable 和 Filterable 特性已被勾选。属性 Currency 绑定到 currency-code 语义。这些信息可以在运行时在应用程序中使用，以提供某些功能——例如在 Currency 字段上提供值帮助。

检查 OData 服务实现

请跟随以下模拟进行操作，了解如何检查 OData 服务实现。

练习：开始练习（SAP 官方交互式练习）

使用智能控件

使用 SmartForm 控件

现在，我们将更仔细地了解智能控件，先从 SmartForms 开始。

SmartForm 控件用于显示表单内容，可以与 SmartField 控件和 OData 元数据注解结合使用，并辅以额外的配置。该控件让您能够以最小的投入创建表单。根据用户的授权情况，该表单使用户能够执行以下操作：

  • 从显示模式切换到编辑模式

  • 添加并分组字段

  • 重命名字段标签

  • 实现用户输入检查

SmartForms 只定义布局，也就是表单。为了能够显示数据，我们必须使用 sap.ui.comp.smartfield.SmartField 控件。

SmartForm 控件由以下部分组成

  • 组（sap.ui.comp.smartform.Group）

  • 组元素（sap.ui.comp.smartform.GroupElement）

SmartForm 控件聚合组，组聚合组元素。组元素本身则聚合类型为 sap.ui.core.Control 的元素

组元素是

与标签一同显示的控件集合。

通常，一个组元素恰好由一个控件和相应的标签组成。

示例 view.xml 文件。代码显示了一个包含 smartForm 控件的页面，其中包含不同的组和若干 smartField 控件。

该图展示了使用 SmartControls 实现的一个 SAPUI5 视图。可以看到，在 sap.ui.core.mvc.View 实现内部，我们为 sap.ui.comp.smartfield 和 sap.ui.comp.smartform 这两个 SAPUI5 命名空间设置了 XML 别名。SmartField 控件绑定到底层 OData 服务的字段。

在运行时，上述视图如下所示。请注意牢记上述实现，尤其是 Price 和Paymentsum 字段。

生成的包含三组字段的视图。

从该图可以看到，Airfare 和 Total 字段并不只是显示价格，它们还会显示货币。之所以会显示这些值，是因为使用了 OData 服务的语义信息。UI 中可以看到切换到编辑模式的按钮。这是因为在视图实现中将 editTogglable 设置为 true。

当您选择该按钮时，UI 将提供更改数据的可能。

处于编辑模式的同一视图。

在上述显示中，并非表单中的所有字段都可编辑。关于哪些字段可以更改的信息同样取自 OData 服务。

使用 SmartField 控件

SmartField 控件

  • 提供一种高效的方式来添加可输入字段。

  • 自动适配底层 OData 服务的元数据，例如通过执行以下操作：

  • 承载用于编辑和显示 OData 属性值的控件。

  • 自动提供值帮助。

  • 执行输入检查。

  • 实现字段控制并支持消息处理。

SmartField 控件可用于不同的场景：

  • 作为独立控件使用，例如在 XML 视图中。

  • 与 SmartForm 控件结合使用。

  • 与 SmartTable 控件结合使用。

它们尤其被用作编辑场景中的单元格编辑器。

请跟随以下模拟进行操作，了解如何使用 smartfield 控件。

练习：开始练习（SAP 官方交互式练习）

SmartTable 控件

SmartTable 控件

  • 是围绕任意 SAPUI5 表格的封装控件。

  • 分析 OData 服务的 $metadata 文档，并为特定的 entitySet 呈现表格。

  • 允许使用方应用程序以高效且一致的方式构建列表模式，因而使用户能够轻松创建表格，无需太多投入。

SmartTable 控件还为您提供了额外的内置功能，例如行计数以及导出到电子表格应用程序的能力。

请跟随以下模拟进行操作，了解如何实现智能表格

练习：开始练习（SAP 官方交互式练习）