解释用户界面

学习目标

• 解释 SAP Fiori 中使用的 UI 技术

• 解释 SAPUI5 开发。

• 使用 SAP Business Application Studio 进行 SAPUI5 开发。

• 使用 Visual Studio Code 进行 SAPUI5 开发。

UI 技术

观看视频，了解 SAP UI 中的工具和技术。

视频：本节含 SAP 官方视频（视频 ID 1_jd0xx373），需在 learning.sap.com 在线观看。

大多数 SAP Fiori 应用是使用 SAPUI5 作为 UI 技术构建的 Web 应用。SAPUI5 基于 HTML5，可在任何使用浏览器的设备上使用。SAPUI5 的推荐开发环境是 SAP Business Application Studio。

SAP Fiori 也支持原生应用。这些应用使用设备上所用的原生编程语言开发，因而能实现更好的集成。Apple 与 SAP 合作，使用 Apple Xcode 作为开发环境为 iOS 开发原生应用。最初由 Apple 创建的开源语言 Swift 用作编程语言（参见 https://swift.org）。你还可以在 Android Studio 中使用 Java 作为编程语言为 Android 开发原生应用。与同 Apple 的合作不同，这些应用并非由 Google 或 SAP 提供。

跨平台 SAP Fiori 应用使用诸如元数据或脚本之类的"低级"代码开发。"低级"代码被动态解释，以渲染原生移动 UI。SAP Mobile Services 提供 SAP Mobile Development Kit (MDK)，用于创建和解释"低级"代码。MDK 已集成到 SAP Business Application Studio 中。

HTML5

以 SAPUI5 作为 Web 应用的基础，浏览器需要达到某个最低版本，才能处理 HTML5 和 JavaScript 中使用的所有代码元素。Google Chrome 和 Microsoft Edge 从一开始就支持 HTML5。Mozilla Firefox 和 Apple Safari 则是通过更新来支持它。

警告

尽管 Microsoft Internet Explorer 自版本 8 起已正式支持 HTML5，但仍建议切换到 Microsoft Edge。Microsoft 和 SAP 已宣布终止对 Internet Explorer 的支持。

有关此主题的更多信息，请阅读 SAP 注释 1672817 – Browser: Microsoft Legacy Edge and Internet Explorer Support Policy Note。

超文本标记语言 5（HTML5）是一种用于构建网页结构的标记语言。结合用于布局的层叠样式表 3（CSS3），这些网页可以通过浏览器呈现。网页中的动态交互则使用编程语言 JavaScript。JavaScript 代码组织在库中，可从库中复用到其他网页。jQuery 是 HTML5 领域中一个知名的库，它提供了最佳实践。

SAPUI5

SAPUI5 最初构建在 jQuery 之上，并添加了额外的 HTML5 浏览器渲染库。对 jQuery 的所有扩展都旨在使网页在可视化和处理方面符合 SAP 产品标准。如今，大多数最初的 jQuery 库已被 SAP 自己的库取代。

SAPUI5 最初的主题使用 CSS3 创建，名为 Gold Reflection。如今，SAPUI5 与 SAP Fiori 设计紧密耦合，以 CSS3 实现所有受支持的主题。

SAPUI5 的可扩展性选项支持广泛的适配：

• 在基于 SAPUI5 的页面中包含自定义 JavaScript、HTML 和 CSS

• 包含自定义 JavaScript 库

• 基于现有 SAPUI5 控件创建复合控件

• 创建新的库和控件

异步 JavaScript 和 XML（AJAX）最初是在 SAP 的 Web Dynpro 中实现的，它也被用于 SAPUI5，以呈现类似原生的 Web 应用处理方式。使用 SAPUI5 开发的应用提供一致的用户体验，并且在浏览器和设备（包括智能手机、平板电脑和台式机）之间具有响应性。用户界面（UI）控件会自动适应每台设备的能力。

SAPUI5 是面向 HTML5 的 SAP 用户界面开发工具包。让我们试着更好地理解 SAPUI5。

除 SAPUI5 之外，SAP 还提供 OpenUI5 作为 UI 开发工具包的交付形式。包含所有核心功能以及最常用控件库的内核在两种交付形式中是相同的。尽管关系非常紧密，它们仍有差异：

OpenUI5

OpenUI5 是开源的、可免费使用，基于 Apache 2.0 许可证发布。OpenUI5 提供构建功能丰富的 Web 应用所需的所有重要特性。源代码可在 https://github.com/SAP/openui5/ 获取。

如果你发现缺陷或对新特性有想法，可以提交 GitHub issue 或变更。请先阅读指南：https://github.com/SAP/openui5/blob/master/CONTRIBUTING.md。

更多信息请访问 https://openui5.org/。

SAPUI5

SAPUI5 不是一个需要单独许可证的独立 SAP 产品。它集成在许多 SAP 产品中。第一个是 AS ABAP 7.4，它在 UI 技术组件 SAP_UI 中包含了 SAPUI5。

SAPUI5 中的附加库在 OpenUI5 之上包含更多控件，例如图表和智能控件。SAPUI5 的确切功能范围还取决于平台。

更多信息请访问 https://ui5.sap.com/。

从技术上讲，你可以在 OpenUI5 和 SAPUI5 之间切换（前提是你拥有包含 SAPUI5 的产品）。请先确认需要哪个 SAPUI5 版本。OpenUI5 和 SAPUI5 的版本号可能在补丁级别（最后一位数字）上有所不同。

库将一组控件及相关类型打包在一起，以便 Web 应用使用它们。存在预定义库和标准库，其中包含许多常用控件：

• 响应式控件（ sap.m ）

• 智能控件（ sap.ui.comp ）

• 核心控件（ sap.ui.core ）

• 布局控件（ sap.ui.layout ）

• 面向台式机的表格控件（ sap.ui.table ）

核心库（从技术上讲，即 sap.ui.core 库）定义了一组核心类型，可供其他库使用。开发人员可以创建自己的自定义 UI 库，从而轻松地将自己的控件与预定义控件一起使用。

TypeScript 是 JavaScript 的扩展，为该语言添加了类型信息。它通过类型检查以及在支持的代码编辑器中提供代码辅助（例如代码补全和内联文档）来帮助开发人员及早发现错误。它提升了开发效率。

TypeScript 与 JavaScript 差别不大。事实上，它是 JavaScript 的超集，在此基础上添加了一些语言特性。举个简单的例子，如果一个变量被指定为 number，那么就不能给它赋值 string（而在 JavaScript 中这是可以的）。对于更复杂的结构和类也是如此。代码编辑器会利用这些类型信息来帮助你编写代码：

• 编写代码时的错误消息

• 代码补全

• 内联文档

• 更轻松的重构和维护

Web 浏览器无法执行 TypeScript。因此需要一个转译步骤。它基本上通过剥离所有类型信息并最小化代码，将代码转换为 JavaScript。这也意味着类型安全以及 TypeScript 提供的一切都纯粹聚焦于开发时，而非代码运行时。尽管如此，原始源代码仍可通过 "source maps" 提供给浏览器。在调试期间，你可以看到自己编写的原始 TypeScript 代码。

SAPUI5 本身是用 JavaScript 编写的，不含任何类型信息。但 SAPUI5 API 的所有类型都在单独的类型定义文件中声明。在 SAP 提供的开发环境中，这些类型定义已作为依赖项添加，转译步骤也已设置好。

模型视图控制器（MVC）

模型视图控制器（MVC）概念将应用中的任务分离为三个程序化元素：

模型

保存应用的数据和/或与数据源的连接，以 OData、JSON、XML 或资源包的形式组织。

视图

保存用户界面，由组织在库中的 UI5 控件构成。

控制器

保存应用的逻辑，以 TypeScript 或 JavaScript 实现，对来自模型和视图的消息作出反应并更新它们。

在 SAP Fiori 中，视图使用 XML 定义。唯一使用 HTML 的 SAP Fiori 应用是 SAP Fiori launchpad，它为基于 XML 的视图提供框架。控制器使用 JavaScript 开发，既可以绑定到某个视图，也可以独立存在以供多个视图使用。视图上可以使用数据绑定来连接到模型中的数据。

SAPUI5 版本

SAPUI5 通过维护版本和创新版本定期提供更新。

观看视频，了解 SAPUI5 版本的概览。

视频：本节含 SAP 官方视频（视频 ID 1_y63ga11f），需在 learning.sap.com 在线观看。

在本地部署场景中，SAPUI5 库存储在 Application Server (AS) ABAP 的 SAP_UI 软件组件中。客户负责使其保持最新。

在云场景中，SAPUI5 库从 SAP 的内容分发网络（CDN）加载。SAPUI5 和 OpenUI5 版本在其维护期结束后一年从 CDN 中移除。此外，处于维护期且已超过一年的版本补丁也会被移除。

警告

版本一旦被移除，使用该版本的应用就会中断。为避免潜在的安全风险，请将应用更新到更新的版本：

SAP 注释 3001696 - Removed outdated SAPUI5 versions from SAPUI5 CDN - Fiori applications might stop functioning.

包含维护期结束日期在内的所有 SAPUI5 版本完整列表可在 https://ui5.sap.com/versionoverview.html 找到。

AS ABAP 上可用的 SAPUI5 版本通过 https://<host>:<port>/sap/public/bc/ui5_ui5/index.html 提供。

正在运行的应用所使用的版本，可在技术信息对话框中查看，该对话框在 Microsoft Windows 上通过 CTRL+ALT+SHIFT+P 打开，在 Apple Mac 上通过 CTRL+ALT+OPTION+P 打开。

注意

有关此主题的更多信息，请参见：

• Developing UIs with SAPUI5（课堂培训）https://training.sap.com/course/ux400- Developing SAPUI5 Applications（学习路径）https://learning.sap.com/learning-journeys/develop-sapui5-applications- Patching SAP Fiori (SAPUI5)（学习视频）https://learning.sap.com/videos/patching-sap-fiori-sapui5-

SAPUI5 开发工具

现在来看看 SAPUI5 开发工具。这些工具包括 SAP Business Application Studio 和 Visual Studio Code。

让我们比较一下这两个工具。

自 2020 年起，SAP 提供 SAP Business Application Studio (BAS)，当时基于 Eclipse 的开源项目 Theia。自 2022 年起，它基于 Microsoft 的开源项目 Code OSS。它在 SAP BTP 中作为服务订阅提供，并自带运行时。它提供预配置的环境，即所谓的开发空间（dev space），其中预装了针对关键场景量身定制的运行时和工具。这些环境基于扩展，例如 SAP Fiori tools 扩展。

另一个可以包含 SAP Fiori tools 扩展的工具是 Visual Studio (VS) Code。它由 Microsoft 基于开源 IDE Code OSS 开发。虽然并非基于 Theia，但完全兼容。SAP 在 VS Code 的扩展市场中免费提供 SAP Fiori tools 等扩展。VS Code 可在 https://code.visualstudio.com/ 下载。

注意

在 2014 年至 2019 年期间，SAP 提供基于 Orion 的 SAP Web Integrated Development Environment (IDE)，Orion 是 Eclipse 的开源项目。如今，建议改用 SAP BAS。

开发 SAP Fiori Web 应用意味着在 SAP BAS 或 VS Code 中使用 SAP Fiori tools 扩展开发 SAPUI5。开发环境中的项目可以建立连接，因此代表一个在 Application Server (AS) ABAP 中作为 Business Server Page (BSP) 交付和管理的 SAP Fiori 应用。BSP 充当 SAPUI5 应用的容器，尽管 BSP 最初是基于 HTML4 开发的。ABAP Workbench（SE80）中的工具并未针对 BSP 的这一新角色进行更新。SAPUI5 的复杂性在纯基于 Web 的环境中能得到更好的处理。

Cloud Connector 是一款独立软件，可免费获取，用于连接 SAP BTP 中的服务与客户网络中的本地系统。一旦安装在客户网络中，它就会建立到 SAP BTP 的安全 SSL 虚拟专用网络（VPN）连接。因此，VS Code 不需要它。Cloud Connector 可在 https://tools.hana.ondemand.com/ 下载。

在 ABAP Workbench（SE80）中，可以通过打开所属的 BSP 应用来显示 SAPUI5 工件。这允许执行一些管理功能，例如将 BSP 分配到传输请求或另一个包。也可以查看文件中未格式化的源代码，但不适合编辑任何工件。

AS ABAP 的所有 HTTP 服务都组织在 HTTP Service Hierarchy Maintenance（SICF）中。用于运行 SAPUI5 应用的 HTTP 服务可在 Internet Communication Framework (ICF) 中的 /sap/bc/ui5_ui5 下找到。没有自己命名空间的应用组织在子文件夹 sap 中。服务的名称与 BSP 应用的名称相同。

用于运行 BSP 应用的 HTTP 服务可在 /sap/bc/bsp 下找到。这也意味着对于承载 SAPUI5 应用的 BSP，情况同样如此。但这些服务不可运行，因为没有连接实际的 BSP 应用。这些服务可以忽略，因此可将其停用。

SAP Business Application Studio

启动 SAP Business Application Studio (BAS) 时，会显示 Get Started 页面。它提供按钮，可通过创建、克隆、导入或直接打开项目来开始开发。左侧可以打开侧面板，跳转到开发的不同部分。上方的侧面板源自 Code OSS，下方的侧面板由 SAP 加入，例如面向 SAP Fiori 的那个。

SAP BAS 作为服务订阅托管在 SAP Business Technology Platform (BTP) 的子账户中。订阅是独立的，无需运行时环境或任何其他服务即可运行。权益，即配置和使用资源的权利，必须在子账户中可用。

在子账户的 SAP BTP Cockpit 中的 Service Marketplace 里，可以通过选择服务计划来创建服务。创建 SAP BAS 不需要任何附加数据，并会在 Instances and Subscriptions 中生成一个服务订阅。

操作 SAP BAS 需要特定的授权。它们组织在以下角色集合中：

Business_Application_Studio_Administrator

允许管理员管理（导出和删除）用户数据。

Business_Application_Studio_Developer

允许开发人员加载和开发应用。

Business_Application_Studio_Extension_Deployer

允许扩展开发人员部署简单扩展。

分配角色集合可以在 SAP BTP cockpit 中的 Security→Users 下完成。选择该用户，然后在右侧选择 Assign Role Collection。接着选择要分配的角色集合。

要使这些角色集合可用，服务必须已成功订阅。

观看视频，了解如何在 SAP Business Application Studio 中创建开发空间。

视频：本节含 SAP 官方视频（视频 ID 1_qfk852rn），需在 learning.sap.com 在线观看。

尽管 SAP BAS 提供了若干按钮和菜单项来启动 SAP Fiori tools 的工具，但最全面的工具列表可在命令面板中访问。在菜单中选择 Help→Show All Commands，或使用 Control+Shift+P 来显示并运行命令。在命令面板中输入 fiori 会提供一份包含所有 SAP Fiori tools 的列表，可从中启动生成器和模板等。

操作 SAP Business Application Studio

业务示例

你想探索 SAP Business Application Studio (BAS) 的功能。

注意

本练习需要 SAP Business Technology Platform 上的账户。登录信息由 SAP Learning 系统的系统设置指南提供。

任务 1：为操作准备好 SAP Business Application Studio

Exercise：Start Exercise（SAP 官方交互式练习）

步骤

1. 使用你的 SAP BTP 账户登录 SAP Business Technology Platform (BTP)。

2. 在 Windows 开始菜单中，选择一个 Web 浏览器。

3. 在 Web 浏览器收藏夹中，选择 SAP Business Technology Platform 文件夹中合适的 SAP BTP Cockpit，或输入 https://emea.cockpit.btp.cloud.sap/。

4. 使用你的 SAP BTP 账户登录。

5. 在子账户的 SAP BTP Cockpit 中，使用服务计划 standard-edition 为 SAP Business Application Studio (BAS) 创建服务订阅。

6. 在 SAP BTP Cockpit 中，选择你的子账户。

7. 在左侧，选择 Services→Service Marketplace。

8. 在 Search 字段中，输入 studio。

9. 选择 SAP Business Application Studio。

10. 选择右上角的 Create。

11. 在 New Instance and Subscription 弹出窗口中，选择计划 standard-edition 并选择 Create。

12. 在 Creation Progress 弹出窗口中，选择 View Subscription。

13. 等待 Status 变为 Subscribed。

14. 在子账户的 SAP BTP Cockpit 中，将 Business_Application_Studio_Administrator 和 Business_Application_Studio_Developer 角色集合分配给你的用户。

15. 在子账户的 SAP BTP Cockpit 中，在左侧选择 Security→Users。

16. 选择你的用户。

17. 选择 Collapse the first column（分隔符中的箭头）。

18. 选择 Assign Role Collection。

19. 在 Assign Role Collection 弹出窗口的 Search 字段中，输入 studio。

20. 选择 Business_Application_Studio_Administrator 和 Business_Application_Studio_Developer。

21. 选择 Assign Role Collection。

任务 2：查看 SAP Business Application Studio 中的指南和模板

Exercise：Start Exercise（SAP 官方交互式练习）

步骤

1. 启动你子账户的 BAS，并创建开发空间 FioriDev。

注意

如果显示网页不可用的错误，请注销并关闭浏览器会话。然后重新登录并重复此步骤。

1. 在子账户的 SAP BTP Cockpit 中，在左侧选择 Services→Instances and Subscriptions。

2. 选择 SAP Business Application Studio。

注意

如果出现网页不可用的错误，请注销并关闭浏览器会话。然后重新登录并重复该步骤。

3. 选择 Create Dev Space。

4. 在 Dev Space name 字段中，输入 FioriDev。

5. 在左侧选择 SAP Fiori。

6. 选择 Create Dev Space。

7. 等待状态变为 RUNNING。

8. 在 BAS 中，查看 SAP Fiori 可用的模板和指南。

9. 在 BAS 中，选择 FioriDev 开发空间。

10. 在 Get Started 页面上，选择 New project from Template。

注意

如果 Get Started 页面没有自动出现，请选择 Help→Get Started。

3. 查看可用的模板。

4. 选择 Ctrl+Shift+P。

5. 在顶部的 Command Palette 中，输入 fiori。

6. 从列表中选择 Fiori: Open Guided Development。

7. 查看可用的指南。

注意

每个指南后面的警告符号只是表示目前还没有可应用更改的项目。

Visual Studio Code 中的 SAP 扩展

启动 Visual Studio Code (VS Code) 时，会显示 Welcome 页面。它提供按钮，可通过创建、克隆、导入或直接打开项目来开始开发。左侧可以打开侧面板，跳转到开发的不同部分。上方的侧面板源自 Code OSS。下方的侧面板基于已安装的扩展，例如面向 SAP Fiori 的那个。

Extensions 侧面板提供对 VS Code 扩展市场的访问。假设有可用的互联网连接，就可以搜索所有现有扩展。你可以阅读文档、安装或卸载、启用或禁用、更改设置以及检查更新。搜索字段还支持标记。在搜索字段中输入 @ 会显示可能的搜索条件列表，例如类别。

提示

如果你在 UI 中选择某个扩展的供应商，例如 SAP SE，则会在搜索字段中填入 publisher:"SAP"，并显示该供应商的所有扩展。

SAP Fiori tools 是一个由七个扩展组成的扩展包。建议安装整个扩展包，并让其中包含的所有扩展保持同一版本。其他扩展也可能对支持 SAP Fiori 开发有价值，例如 UI5 Language Assistant。

Visual Studio Code 中的 SAP Fiori Tools

VS Code 只提供少量按钮和菜单项来直接启动 SAP Fiori tools 的工具。最全面的工具列表可在命令面板中访问。在菜单中选择 Help→Show All Commands，或使用 Control+Shift+P 来显示并运行命令。在命令面板中输入 fiori 会提供一份包含所有 SAP Fiori tools 的列表，可从中启动生成器和模板等。

SAP Business Application Studio toolkit 扩展允许你在 VS Code 中连接并访问 SAP Business Application Studio (BAS) 的开发空间。它可以在扩展市场中找到并安装。

该扩展会将 SAP BAS Desktop Client 添加为侧面板。连接时需要访问 SAP BAS 的 URL。登录会使用一个 Web 浏览器窗口，要求你提供凭据，并在新的 VS Code 窗口中建立 SSH 连接。你可以通过选择窗口底部的蓝色 SSH URL 来访问和更改连接详细信息。

在 VS Code 中访问开发空间会将开发空间的所有扩展加载到本地 VS Code 窗口中。这包括扩展市场中不可用的扩展。此外，你还可以从扩展市场添加更多扩展。

警告

如果你在远程连接到 SAP BAS 时安装第三方扩展，该第三方可能能够访问你开发空间中的数据。

你可以启动和停止开发空间、打开开发空间管理器，以及连接到不同账户的多个开发空间。所有设置都保存在开发空间中，但在 VS Code 中本地使用。

在 Visual Studio Code 中操作 SAP Fiori Tools

业务示例

你想探索 Visual Studio Code 中 SAP Fiori tools 的功能。

注意

本练习需要 SAP Learning 系统。请查阅你的系统设置指南，了解如何初始化 Visual Studio Code。

任务 1：查看并操作 Visual Studio Code 中的 SAP Fiori Tools

Exercise：Start Exercise（SAP 官方交互式练习）

步骤

1. 启动 Visual Studio Code，并检查 SAP Fiori tools - Extension Pack 的状态和详细信息。

2. 在 Windows 开始菜单中，选择 Visual Studio Code。

3. 在左侧选择 Extensions。

4. 在 Search Extensions in Marketplace 字段中，输入 fiori tools。

5. 选择 SAP Fiori Tools - Extension Pack。

6. 查看详细信息。

7. 在 Visual Studio Code 中的 SAP Fiori tools 里，查看 SAP Fiori 可用的模板和指南。

8. 选择 Ctrl+Shift+P。

9. 在顶部的 Command Palette 中，输入 fiori。

10. 从列表中选择 Fiori: Open Application Generator。

注意

首次启动时，你可能需要等待@sap/generator-fiori 完成安装。

4. 查看可用的模板。

5. 选择 Ctrl+Shift+P。

6. 在顶部的 Command Palette 中，输入 fiori。

7. 从列表中选择 Fiori: Open Guided Development。

8. 查看可用的指南。

注意

每个指南后面的警告符号只是表示目前还没有可应用更改的项目。

在 Visual Studio Code 中访问 SAP Business Application Studio

业务示例

你想在 Visual Studio Code 中访问你的 SAP Business Application Studio。

注意

本练习需要 SAP Learning 系统和 SAP Business Technology Platform 上的账户。登录信息由系统设置指南提供，其中还包括如何初始化 Visual Studio Code 的指南。

前提条件

开发空间已在练习 Operate SAP Business Application Studio 中创建。

任务 1：查看 SAP Business Application Studio Toolkit 并在 Visual Studio Code 中访问开发空间

Exercise：Start Exercise（SAP 官方交互式练习）

步骤

1. 启动 Visual Studio Code，并检查 SAP Business Application Studio toolkit 的状态和详细信息。

2. 在 Windows 开始菜单中，选择 Visual Studio Code。

3. 在左侧选择 Extensions。

4. 在 Search Extensions in Marketplace 字段中，输入 sap business。

5. 选择 SAP Business Application Studio toolkit。

6. 查看详细信息。

7. 在 SAP Business Application Studio Desktop Client 中，连接到你的 SAP Business Application Studio 并访问你的 FioriDev 开发空间。

8. 在你的 Visual Studio Code 中，在左侧选择 SAP Business Application Studio Desktop Client。

9. 选择 Connect Landscape。

10. 在 Landscape url 字段中，输入你的 SAP Business Application Studio 的 URL 并选择 Enter。

示例

https://dev-jw6tkqi9.eu10cf.applicationstudio.cloud.sap 4. 选择你的环境，并在该行末尾选择 Log in。 5. 在 Visual Studio Code 弹出窗口中请求权限时，选择 Allow。 6. 在 Visual Studio Code 弹出窗口中请求打开外部网站时，选择 Open。 7. 在 Web 浏览器中，使用运行 SAP Business Application Studio 的 SAP BTP 账户登录。 8. 关闭 Web 浏览器。 9. 在 Visual Studio Code 中，选择 FioriDev 开发空间。 10. 如果开发空间已停止，请在该行末尾选择 Start dev space。 11. 在该行末尾选择 Open in new window。

结果

开发空间在 Visual Studio Code 的新窗口中打开。