剖析 SAPUI5 开发的黄金法则

学习目标

  • 应用 SAPUI5 开发的黄金法则来开发 SAP Fiori 应用

在本课中,您将了解开发人员在构建 SAP Fiori 应用时如何从应用 SAPUI5 开发的黄金法则中获益。

在向您介绍这些黄金法则之前,我们已将它们分组,以便在开发 SAP Fiori 应用时更易于理解和应用。

如何设计和构建 SAP Fiori 应用?

SAP Fiori 应用必须具有经过批准的 UX 设计SAP Fiori UI 使用 SAPUI5 构建

如何在 SAP Fiori 中使用 OData 服务?

SAP Fiori 应用基于 OData 服务SAP Fiori UI 和 OData 服务必须定义在不同的软件组件中一个 SAP Fiori 应用 - 一个 OData 服务

为什么对 SAP Fiori 应用使用声明式设计?

每个 SAP Fiori 应用都由一组元数据定义

为什么要使用 UI 主题设计器来应用企业设计?

SAP Fiori 应用不允许使用自定义 CSS

如何让 SAP Fiori 应用与平台无关?

每个 SAP Fiori 应用都必须作为 Web 应用运行,并且必须在 SAP Fiori Launchpad 中运行每个 SAP Fiori 应用都必须以原生应用范式在移动设备上运行

下面我们来详细了解每一条黄金法则。

如何设计和构建 SAP Fiori 应用?

我们将从帮助开发人员设计和构建 SAP Fiori 应用的黄金法则开始。

SAP Fiori 应用必须具有经过批准的 UX 设计

使用设计主导的开发(Design-led Development)流程,因为它适用于所有 UI 场景。确保在开始之前,对要解决的最终用户任务以及要构建的应用有共同且整体的理解。确保设计符合 Fiori 设计指南(或您自己的指南)。确保设计仅使用现有的控件和模式。

SAP Fiori UI 使用 SAPUI5 构建

使用 SAPUI5 UI 技术构建新的 SAP Fiori 应用。使用智能模板(元数据驱动的 UI),并尽可能对标准 SAP S/4HANA 应用使用 SAP Fiori Elements 和 SAP ABAP RESTful 应用程序编程模型。对于不遵循模式化方法的完美像素(pixel perfect)应用,使用 UI5 freestyle。对于遵循模式化方法的应用,使用智能控件(Smart Controls)。为提供智能行为,智能控件会解释 OData 元数据。对于与智能模板应用仅有细微偏差的完美像素应用,使用 UI5 freestyle 与智能控件的组合。对于并非从零开始构建的现有应用,使用 SAP Web Dynpro ABAP、SAP Floorplan Manager 和 SAP Web GUI 等技术。

如何在 SAP Fiori 中使用 OData 服务?

接下来,我们将介绍与 OData 服务相关的一组黄金法则。

SAP Fiori 应用基于 OData 服务

每个应用都需要一个 OData 服务。构建 SAP Fiori 应用的其他考虑因素包括:一个应用必须能够使用多个 OData 服务。一个应用必须能够间接查看可复用的应用部件。一个应用必须能够在运行时基于元数据派生进行直接数据绑定。SAP Fiori 应用还依赖中央 UI2 服务。SAP Fiori 应用使用一个中央复用服务来提供消息长文本。SAP Fiori 应用可以使用单独的服务来实现值帮助。

SAP Fiori UI 和 OData 服务必须定义在不同的软件组件中

SAP Fiori 应用的系统架构支持两种不同的部署选项:嵌入式部署和枢纽部署。在嵌入式部署中,UI、网关和业务后端部署在业务后端系统上。在枢纽部署中,UI 和网关部署在与业务后端系统不同的系统上。强制要求将所有与 UI 相关的构件打包到单独的软件组件中,以支持枢纽部署,这是强制性的。OData 服务的开发包应被视为附加组件。

一个 SAP Fiori 应用 - 一个 OData 服务

OData 服务与应用之间存在一对一关系。单独的实体关系模型针对 SAP Fiori 应用的数据需求进行定制。应用所需的全部数据(且仅限于这些数据)由一个 OData 服务提供。SAP Fiori 应用与 OData 服务之间的 1:1 关系简化了 SAP Fiori 应用及其数据访问的生命周期。

为什么对 SAP Fiori 应用使用声明式设计?

我们继续介绍下一条法则。

每个 SAP Fiori 应用都由一组元数据定义

SAP Fiori 应用在应用描述符(manifest.json)文件中定义其元数据集。应用描述符使编排和自动化开发交付变得容易。应用描述符对 SAP Fiori 应用是强制性的。

为什么要使用 UI 主题设计器来应用企业设计?

接下来,我们将介绍为什么 UI 主题设计器对 SAP Fiori 应用开发至关重要。

SAP Fiori 应用不允许使用自定义 CSS

请注意,由 UI5 生成的 HTML/CSS 不属于公共 API 的一部分,并且可能会在补丁版本和次版本中发生变化。不要在 SAP 应用中使用 CSS 覆盖 UI5,因为这会带来在更新 UI5 时破坏应用的风险。使用 SAPUI5 的标准 CSS 类,例如用于各种设备上的外边距、内边距或可见性。使用 UI 主题设计器。

如何让 SAP Fiori 应用与平台无关?

现在来谈谈与 SAP Fiori 应用中的平台无关性相关的法则。

要使您的 SAP Fiori 应用与平台无关,需要考虑以下法则。

每个 SAP Fiori 应用都必须作为 Web 应用运行,并且必须在 SAP Fiori Launchpad 中运行

SAP Fiori 应用必须实现为自包含的 UI5 组件。避免:使用在前端或后端生成的绝对 URL。使用私有的 UI5 属性或函数。直接调用 UI2 服务而不是使用 API。在未进行可用性检查的情况下使用平台特定的功能。使用私有的 UI5 属性或函数。使用生成的 ID 访问 UI 控件。SAP Fiori 应用必须构建为平台无关。SAP Fiori 应用必须开箱即用,无需针对平台进行特定调整。当应用在特定平台上无法运行时,通常是应用中的缺陷。SAP Fiori 应用必须实现为自包含的 UI5 组件。noShellIndex.html:本地、隔离的测试,不使用 shell 服务FioriSandbox.html:本地、集成的测试,使用模拟 shell 服务FioriLaunchpad.html:生产使用

每个 SAP Fiori 应用都必须以原生应用范式在移动设备上运行

SAP Fiori 应用可以在移动设备上的浏览器中、SAP Mobile Start 中运行,也可以作为自包含的原生打包应用运行。如果 SAP Fiori 应用希望受益于原生功能,则必须在 SAP Mobile Start 内运行或部署为打包应用。应用在移动设备上运行并仍能访问原生功能的最通用方式是在 SAP Mobile Start 内运行应用。SAP Fiori 应用可以预先打包为自包含的原生应用。所有静态 Web 资源都打包到 Cordova 容器中。