引导 SAPUI5

学习目标

  • 加载并初始化 SAPUI5 库以使用 SAPUI5 功能

引导

标准引导文件

要使用 SAPUI5，你必须加载并初始化 SAPUI5 库。

示例引导代码。

图 Bootstrapping SAPUI5 展示了一个用于加载 *sap-ui-core.js* 文件的典型引导脚本标签。当此脚本标签包含在页面中时，脚本一旦被浏览器加载并执行，SAPUI5 运行时就会自动初始化。

注意

如果你以独立方式运行应用程序，则引导脚本会被添加到你的 HTML 页面中。在 SAP Fiori launchpad 环境中，launchpad 会执行引导，无需额外的 HTML 页面来显示应用程序。

SAPUI5 为不同的使用场景提供了多个引导文件。*sap-ui-core.js* 是标准引导文件，建议在典型使用场景中使用。它已包含 jQuery、jquery-ui-position 以及核心库（sap.ui.core）中最低限度必需的部分。

加载选项

SAPUI5 既可以通过相对路径从 SAP Web 服务器本地加载（参见图 Bootstrapping SAPUI5），也可以从内容分发网络（CDN）外部加载。

你可以在 CDN 中指向特定版本，这使你能够为引导选择固定版本。为此，请将如下带版本的 URL 分配给引导脚本中的 src 属性：

https://ui5.sap.com/1.96.16/resources/sap-ui-core.js

主机名之后的 URL 片段用于指定所需版本。

或者，你可以使用 SAPUI5 库的默认版本，其通用 URL 如下：

https://ui5.sap.com/resources/sap-ui-core.js

警告

默认版本会不断升级，这可能会影响应用程序的稳定性。请仅将此版本用于测试目的。

配置选项

SAPUI5 运行时可以使用所谓的配置选项进行配置。SAPUI5 中可用配置选项的完整列表可在 Demo Kit 的 API Reference 中的 sap.ui.core.Configuration 下找到。

SAPUI5 支持为可用配置选项提供值的多种方式。除其他方式外，配置选项可以通过引导脚本标签设置。为此，需要向脚本标签添加属性，其名称由相应配置选项的名称和前缀 data-sap-ui- 组成。

在图 Bootstrapping SAPUI5 的脚本标签中，使用了以下配置选项：

  • theme 配置选项 theme 定义应使用的主题。

  • libs 配置选项 libs 定义应初始加载的库列表。

注意

一个 SAPUI5 库捆绑了一组控件及相关类型。存在预定义的标准库，例如 sap.m 和 sap.ui.layout。

  • compatVersion 应用程序必须将此配置选项设置为 edge。其他版本定义已弃用。这确保使用最新的 SAPUI5 功能。

应用程序脚本

引导脚本之后可以跟一个应用程序脚本，用于实现 SAPUI5 应用程序。在应用程序脚本中，可以创建按钮或输入 UI 元素等控件。

观看视频以了解如何通过应用程序脚本向 HTML 页面添加 Text UI 元素。

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

引导 SAPUI5

业务场景

在上一个练习中，你通过 HTML 页面上的一个 <div> 标签输出了 Hello World，当时尚未使用 SAPUI5。在本练习中，你现在将 SAPUI5 加载到浏览器中并初始化它。然后，你将使用 SAPUI5 UI 元素 sap.m.Text 在 HTML 页面上显示 Hello World。*模板：*Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：*sol/1_hello_world模型解决方案：*Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：sol/2_bootstrapping

任务 1：添加引导脚本

步骤

  1. 确保 index.html 文件已在编辑器中打开。

  2. 要在编辑器中打开 index.html 文件，请按如下操作：在 SAP Business Application Studio 的 Explorer 视图中，双击 sapui5-development-learning-journey 项目结构中的 webapp → index.html。

  3. 将以下 <script> 标签作为子元素添加到 <head> 标签，以加载并初始化 SAPUI5：

<script
id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
> </script>

注意

<script> 标签的 src 属性告诉浏览器在哪里找到 SAPUI5 核心库——它会初始化 SAPUI5 运行时并加载其他资源，例如 data-sap-ui-libs 属性中指定、且包含应用程序所需 UI 控件的 sap.m 库。

此外，将 sap_fiori_3 设置为默认主题，并将兼容版本定义为 edge，以利用 SAPUI5 的最新功能。

  1. 确保 index.html 页面现在如下所示： HTML 代码的截图，突出显示了 script 标签。

任务 2：添加 Text UI 元素

步骤

  1. 从 HTML 页面的 <body> 中删除你在上一个练习中创建的 Hello World

    标签。

  2. HTML 页面的 <body> 现在应再次为空：

<body>
</body>

  1. 将 class="sapUiBody" 和 id="content" 属性添加到 <body> 标签。

注意

类 sapUiBody 为显示 SAPUI5 应用添加额外的依赖于主题的样式。

  1. <body> 标签现在应如下所示：

<body >
</body>

  1. 现在创建一个文本为 Hello Word 的 sap.m.Text UI 元素，并使用 <body> 的 id 将其放置到 HTML 页面的 中。为此，请创建以下 <script> 标签，作为 <head> 标签的另一个子元素，紧跟在上面创建的引导脚本之后：

<script>
var oText = new sap.m.Text({text: "Hello World"});
oText.placeAt("content");
</script>

  1. HTML 页面的 <head> 和 <body> 现在应如下所示： HTML 代码的截图，突出显示了 script 标签。

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

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

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

结果

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

提示

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

  1. 在打开的应用程序中，检查 sap.m.Text UI 元素的 Hello World 文本是否显示在 HTML 页面上。