SAPUI5 开发入门

学习目标

  • 设置 SAP Business Application Studio

使用 SAP Business Application Studio

开发空间

以下单元和课程讨论 SAPUI5 开发的基本概念。为了加深对各项学习内容的理解，各主题的末尾总是配有包含实际编程任务的练习。在这些练习中，一个复杂的场景会被逐步构建起来。课程开始时创建的简单 Hello World 应用将在整个课程中扩展为一个综合应用，其中包含所讨论的所有概念，例如模型、数据绑定、国际化和导航。

选择 Create a Dev Space。

这些练习将在 SAP Business Application Studio 中实现。为此，首先需要创建一个开发空间（请参见图 Creating a Dev Space）。

开发空间是一个开发环境，包含你在 SAP Business Application Studio 中开发应用程序所需的工具、能力和资源。

可用的开发空间类型有多种。对于练习场景，需要 SAP Fiori 类型的开发空间。它旨在基于各种环境（包括 Cloud Foundry、ABAP Cloud 和 SAP S/4HANA）开发 SAP Fiori 应用。SAP Fiori 类型的开发空间包含 SAP Fiori Tools 扩展等，其中包括创建 SAP Fiori 应用所需的模板、CLI 和代码补全。

Git 源代码管理

在 SAP Business Application Studio 中，你可以使用项目向导从零开始创建项目，也可以从文件系统导入现有项目。

此外，SAP Business Application Studio 使你能够连接到 Git 源代码管理系统并与 Git 远程仓库交互。

注意

建议始终将项目连接到 Git 仓库，以实现长期持久化。

有关使用 Git 的详细信息，请参阅 SAP Business Application Studio 文档。

所有 Git 任务都可以使用 SAP Business Application Studio 中的终端执行。要打开终端，请从左上角的汉堡菜单中选择路径 Terminal → New Terminal。

选择 Clone from Git。

除终端外，SAP Business Application Studio 还提供 Git 源代码管理视图，以通过图形用户界面执行 Git 命令（请参见图 Cloning Repositories）。

对于要在培训课程中实现的练习场景，你不会使用 SAP Business Application Studio 中可用的某个项目模板从零开始创建新项目。相反，为简单起见，练习的起点将通过一个 Git 远程仓库提供，你将在开始时克隆该仓库。

例如，你可以通过 Git 源代码管理视图或 Get Started 页面上的 Clone from Git 磁贴克隆源项目（请参见图 Cloning Repositories）。

要克隆的远程仓库的主分支包含练习场景的起点。对于每个练习，该远程仓库还包含一个带有该练习示例解决方案的附加分支。分支名称可以在每个练习的开头找到。

如果你在完成练习场景的过程中想跳过某个练习，可以使用关联的示例解决方案分支作为后续练习的基础。

预览应用程序

编码完成后，SAP Business Application Studio 中提供了多种预览应用程序的选项。

你可以通过在终端中运行 npm 脚本，或使用 Run and Debug 窗格中的 Run Control 功能来启动预览。

除了 Run and Debug 窗格中的预定义启动配置之外，你还可以在那里创建额外的启动配置，以定义项目的执行方式。

右键单击该子文件夹并选择 Preview Application

也可以从上下文菜单启动预览。右键单击项目中的任意子文件夹，然后从出现的上下文菜单中选择 Preview Application（请参见图 Starting a Preview from Context Menu）。随后你将看到以下选项等：

  • start-noflp 这将通过 HTML 页面 *index.html* 启动应用。该应用未嵌入 SAP Fiori launchpad 沙盒中。

  • start-mock 这将通过使用 mock 服务器来模拟 OData 端点以启动应用。这样，你无需连接到实时 OData 服务即可测试应用。

在培训课程中，练习最初使用 start-noflp 选项进行测试。之后，场景中会集成一个 OData 模型，用于调用在 ABAP 后端中实现的 OData 服务。由于无法为该课程提供此 ABAP 后端，因此使用 start-mock 选项来测试 OData 模型。start-mock 选项模拟对后端数据的访问。

在准备好的 SAPUI5 项目中通过 HTML 页面输出 'Hello World'

业务场景

在本练习中，你首先要为 SAP Business Application Studio 创建一个开发空间。然后，你从 Git 仓库将一个准备好的 SAPUI5 项目克隆到该开发空间中。最后，你调整所复制 SAPUI5 项目中的 HTML 页面，以在浏览器中输出 Hello World。*模板：*Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：*main模型解决方案：*Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：sol/1_hello_world

注意

在以下练习中，将使用 SAP Business Application Studio 作为开发环境。假定你已经有权访问此开发工具。

如果情况并非如此，你可以使用 SAP Business Technology Platform (SAP BTP) 的免费层模型免费获得 SAP Business Application Studio 的访问权限。为此，请阅读本教程 Get an Account on SAP BTP to Try Out Free Tier Service Plans，了解如何在 SAP BTP 上创建免费账户。在此基础上，视频 SAP Business Application Studio Free Tier Model Onboarding 向你展示了为 SAP Business Application Studio 设置免费层计划的必要步骤。

任务 1：创建 SAP Fiori 开发空间

步骤

  1. 如果尚未启动，请启动 SAP Business Application Studio。

  2. 创建一个名为 UX400 的 SAP Fiori 开发空间。

  3. 选择 Create Dev Space。

  4. 在 Dev Space name 中输入 UX400。

  5. 选择 SAP Fiori 作为应用类型。

  6. 选择 Create Dev Space 按钮。

  7. 打开你的 SAP Fiori 开发空间 UX400。

注意

创建后，新开发空间立即处于 STARTING 状态。你必须等到它处于 RUNNING 状态后才能打开它。这可能需要一些时间。

空闲一段时间后，开发空间会自动停止。已停止的开发空间可以通过开发空间管理器重新启动。

  1. 一旦新开发空间处于 RUNNING 状态，就单击其名称 UX400。

结果

SAP Fiori 开发空间 UX400 将打开，并显示 Get Started 页面。

任务 2：克隆准备好的 SAPUI5 项目

步骤

  1. 使用以下 URL 从 Git 克隆准备好的 SAPUI5 项目：https://github.com/SAP-samples/sapui5-development-learning-journey.git。

  2. 在 SAP Business Application Studio 中，单击 Get Started 页面上的 Clone from Git 磁贴。

注意

如果未显示 Get Started 页面，可以使用以下菜单路径将其打开：Help→Get Started。

  1. 在出现的 Provide repository URL 字段中，输入 https://github.com/SAP-samples/sapui5-development-learning-journey.git 并按 Enter。

结果

指定的 Git 仓库副本已创建，以供在 SAP Business Application Studio 中使用。 3. 要打开你刚创建的 sapui5-development-learning-journey 项目，请在弹出的窗口中选择 Open。

结果

该 sapui5-development-learning-journey 项目将在 SAP Business Application Studio 中打开。 2. 使用命令 npm install 下载所需的项目依赖项。

  1. 从 SAP Business Application Studio 菜单中选择 Terminal → New Terminal。

  2. 在出现的终端窗口中，输入 npm install 并按 Enter：

结果

所需的项目依赖项将下载到项目目录中名为 node_modules 的文件夹中。

任务 3：在准备好的 SAPUI5 项目中通过 index.html 页面输出 'Hello World'

步骤

  1. 在编辑器中打开 index.html 页面。

  2. 在 SAP Business Application Studio 的 Explorer 视图中，在 sapui5-development-learning-journey 项目的项目结构中双击 webapp → index.html。

结果

该 index.html 页面将在编辑器窗口中打开。 2. 将 <title> 标签作为 <head> 标签的子元素添加，并使用它将 HTML 页面的标题设置为 Exercise Application。 此外，将 <div> 标签作为 <body> 标签的子元素添加，并通过它在 HTML 页面上输出 Hello World。

  1. index.html 页面现在应如下所示： index.html 页面的屏幕截图，突出显示了 title 和 div 标签。

  2. 通过从 SAP Business Application Studio 启动应用来进行测试运行。

  3. 右键单击你的 sapui5-development-learning-journey 项目中的任意子文件夹，然后从出现的上下文菜单中选择 Preview Application。

  4. 在出现的对话框中选择名为 start-noflp 的 npm 脚本。

结果

应用程序现在将显示在新选项卡中。

提示

如果应用程序未出现在新选项卡中，请检查你的弹出窗口阻止程序设置。

  1. 在已打开的应用程序中，检查你对 index.html 页面所做的调整是否已显示。