创建控件库和组件库

学习目标

  • 识别自定义库的结构。

实现自定义库

创建可复用的构建块对于提高开发速度并在整个企业中提供同样直观一致的体验是必要的。

自定义库无需复制粘贴即可提供复用功能和 UI 控件。

以下列表列举了控件库的基本优势：

  • 在不同应用程序中复用控件/功能

  • 为主题化（theming）提供自动支持

  • 为从右到左语言提供自动支持

  • 可以安装在 ABAP 平台上

  • 可以安装在 SAP Business Technology Platform 中

现在让我们看一下自定义库的结构，以及有关 library.js 和 manifest.json 的附加信息。

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

将控件封装在自定义库中

自定义库中控件的特征如下：

  • 可以向一个库添加多个控件

  • 完全限定类名必须与 library.js 中定义的一致

  • 可以使用标准 JavaScript

  • 定义为具有名称、依赖项和工厂函数的 JavaScript 模块 sap.ui.define([...], function() {...});

最后，你必须实现将要封装在 UI 库中的控件。

不适用

开发完成后，你必须将 UI 库项目部署到你的本地（on-premise）或云系统。

部署后，UI 库会显示在事务 SICF 中。

不适用

实现可复用的 UI 库

业务示例

在本练习中，你将构建一个可复用的 UI 库，并在 fullscreen 应用程序中使用该库。

注意

SAP Business Technology Platform 及其工具是云服务。由于云软件的特性，步骤流程以及字段和按钮的命名可能与练习解答有所不同。

前提条件

你应已完成上一个关于自定义控件的练习。

注意

你可以使用 3-customcontrol.tar 文件导入解答。

任务 1：创建 Yarn 工作区

为了在无需将该库和项目部署到后端服务器的情况下测试库的使用，我们可以使用 yarn 工作区。

步骤

  1. 登录到你的 SAP Business Application Studio。

  2. 按照之前练习中的做法执行此步骤。

  3. 将以下 npm 包（全局）安装到你的开发环境：yarn、yoman 和 generator-ui5-library。

  4. 打开一个新的终端窗口。

提示

你可以使用 Terminal→New Terminal 菜单选项。

  1. 通过执行以下代码全局安装 yarn 包：

npm install -location=global yarn

  1. 通过执行以下代码全局安装 yoman 包：

npm install -location=global yo

  1. 通过执行以下代码全局安装 generator-ui5-library 包：

npm install -location=global generator-ui5-library

  1. 在你的 projects 文件夹中创建一个新的 library_test 文件夹，并添加一个 packages 子文件夹以及一个包含以下代码的 *package.json* 文件：

{
"name": "library_test",
"version": "1.0.0",
"description": "",
"keywords": [],
"author": "",
"license": "ISC",
"private": true,
"workspaces": [
"packages/*"
]
}

  1. 确保你位于 projects 文件夹中。

提示

为了绝对确定，你可以使用 View→Command Palette 菜单选项并搜索 File: Open Folder...

命令。然后选择你的 projects 文件夹并选择 Go。

  1. 单击 EXPLORER 中的空白区域，以确保你没有选中现有项目，然后通过选择 New Folder... 图标创建一个新文件夹。

  2. 输入 library_test 作为文件夹名称，然后按 Enter 键（在你的键盘上）。

  3. 确保你的新文件夹已被选中，然后再次单击 New Folder... 图标。

  4. 输入 packages 作为文件夹名称，然后按 Enter 键（在你的键盘上）。

  5. 选择 library_test 文件夹（它应带有下划线），然后选择 New File... 图标。

  6. 输入 package.json 作为文件名称，然后按 Enter 键（在你的键盘上）。你现在应看到以下结构： 包含 test-workspace 文件夹的项目结构屏幕截图。

  7. 在 *package.json* 文件中输入给定的代码。

任务 2：创建可复用的 UI 库

步骤

  1. 使用 yoman ui5-library 命令以及以下信息，在 packages 文件夹内生成一个新库：

库创建向导

问题

回答

How do you want to name this library?

uicontrols

Which namespace do you want to use?

student.com.sap.training.advancedsapui5

Which framework do you want to use?

SAPUI5

Which framework version do you want to use?

1.126.0

Who is the author of the library?

保留默认值

Would you like to create a new directory for the library?

Y（是）

注意

如果系统要求你迁移库项目，请继续并启动迁移。

  1. 选择新的 packages 文件夹，并在上下文菜单中选择 Open in Integrated Terminal 选项。

  2. 输入以下命令：yo ui5-library。

  3. 为库名称输入 uicontrols。

  4. 为命名空间输入 student.com.sap.training.advancedsapui5。

  5. 为框架选择 SAPUI5。

  6. 输入 1.126.0 作为框架版本。

  7. 保留作者和创建新目录的默认值。

  8. 如果你希望显示整个文件夹树结构，可以更改 Explorer 的设置，取消选中 compact folder 选项。 BAS 中 Explorer 设置的屏幕截图。

  9. 转到 File→Preferences→Settings 菜单选项。

  10. 在左侧窗格中选择 Features/Explorer。

  11. 取消选中 Compact Folders 选项。

  12. 关闭 Settings 选项卡。

  13. 将 *HoverButton.js*、*PlaneInfo.js* 和 *PlaneInfoRenderer.js* 文件从 fullscreen（或 customcontrol）项目复制到 uicontrols 文件夹。将 *HoverButton.js*、*PlaneInfo.js* 和 *PlaneInfoRenderer.js* 文件的命名空间从 student.com.sap.training.advancedsapui5.fullscreen.control 更改为 student.com.sap.training.advancedsapui5.uicontrols。请务必更新所有命名空间引用。

  14. 打开 fullscreen（或 customcontrol）项目的 control 文件夹，然后选择 *HoverButton.js*、*PlaneInfo.js* 和 *PlaneInfoRenderer.js* 文件。

  15. 按 Ctrl + C（在你的键盘上）复制所选文件。

  16. 选择新库的 uicontrols 文件夹，然后按键盘上的 Ctrl + V。

注意

你将在 library_test>packages>student.com.sap.training.advancedsapui5.uicontrols>src>student>com>sap>training>advancedsapui5 文件夹中找到该文件夹。

  1. 打开 *HoverButton.js* 文件，并像以下代码那样更改命名空间：

sap.ui.define([
"sap/m/Button"
],
function (Button) {
"use strict";
return Button.extend("student.com.sap.training.advancedsapui5.uicontrols.HoverButton", {

  1. 打开 *PlaneInfo.js* 文件，并调整命名空间以及 PlaneInfoRenderer 所引用的命名空间。使用以下代码：

sap.ui.define([
"sap/ui/core/Control",
"student/com/sap/training/advancedsapui5/uicontrols/PlaneInfoRenderer"
],
function (Control, PlaneInfoRenderer) {
"use strict";
return Control.extend("student.com.sap.training.advancedsapui5.uicontrols.PlaneInfo", {

  1. 打开 *PlaneInfoRenderer.js* 文件并更新命名空间。

sap.ui.define([
"sap/ui/core/Renderer"
],
function (Renderer) {
"use strict";
var PlaneInfoRenderer = Renderer.extend("student.com.sap.training.advancedsapui5.uicontrols.PlaneInfoRenderer");

  1. 扩展 *library.js* 文件。将以下条目添加到控件列表：

library.js 文件中 initLibrary 函数的新控件

参数

值

controls

"student.com.sap.training.advancedsapui5.uicontrols.PlaneInfo", "student.com.sap.training.advancedsapui5.uicontrols.HoverButton", "student.com.sap.training.advancedsapui5.uicontrols.PlaneInfoRenderer"

  1. 打开 *library.js* 文件。

  2. 将这三个控件添加到控件列表。你的代码应类似于以下内容： 生成的 library.js 代码的屏幕截图

自定义库的使用

依赖项在使用该 UI 库的应用程序的 manifest.json 文件中定义。该依赖项会触发从所依赖的 UI 库获取 library.js 文件的响应。

已将库添加到依赖项中的示例 manifest.json 文件。

使用自定义库

在本练习中，你将学习如何使用在上一个练习中创建的控件库。

前提条件

你需要已完成之前关于创建库的练习。如果没有，你可以导入解答。

任务 1：复制并调整 fullscreen 应用程序

在下一步中，你必须复制并更改 fullscreen 应用程序，以使用所创建的库。

步骤

  1. 将整个 fullscreen（或 customcontrol）项目文件夹复制到 packages 文件夹中。

注意

复制可能需要一些时间。

  1. 选择 fullscreen（或 customcontrol）项目文件夹，然后按 Ctrl + C（在你的键盘上）复制所选文件。

  2. 选择 library_test 下的 packages 文件夹，然后按键盘上的 Ctrl + V。

  3. 打开 fullscreen 项目的 *manifest.json* 文件，并添加对 student.com.sap.training.advancedsapui5.uicontrols 库的依赖项。然后保存你的更改。

  4. 打开你复制的 fullscreen 项目的 *manifest.json* 文件。

  5. 导航到 sap.ui5 配置。

  6. 像以下代码那样，在 dependencies 配置部分中添加对 student.com.sap.training.advancedsapui5.uicontrols 库的依赖项：

"sap.ui5": {
"flexEnabled": false,
"dependencies": {
"minUI5Version": "1.102.1",
"libs": {
...
"student.com.sap.training.advancedsapui5.uicontrols" : {}
}
},

  1. 保存你的更改。

  2. 将 *Flights.view.xml* 文件中 cust XML 别名的命名空间更改为新的 student.com.sap.training.advancedsapui5.uicontrols 命名空间。

  3. 使用 Code Editor 打开位于 view 文件夹中的 *Flights.view.xml* 文件，并将 cust xml 别名的命名空间更改为 student.com.sap.training.advancedsapui5.uicontrols。你的代码应类似于以下内容：

<mvc:View controllerName="student.com.sap.training.advancedsapui5.fullscreen.controller.Flights"
xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
xmlns="sap.m" xmlns:l="sap.ui.layout"
xmlns:cust="student.com.sap.training.advancedsapui5.uicontrols">

  1. 保存你的更改。

  2. 将 uicontrols 库引用添加到 *package.json* 文件。

  3. 打开 fullscreen 复制项目的 *package.json* 文件。

  4. 像以下代码那样，将 "uicontrols":"1.0.0" 添加到 "dependencies":{} 部分：

"main": "webapp/index.html",
"dependencies": {
"uicontrols":"1.0.0"
},

  1. 删除所复制 fullscreen 项目的 control 文件夹。

  2. 选择 *library_test/packages/fullscreen/webapp/control* 文件夹

  3. 按 Delete。

  4. 在 library_test 工作区中执行 yarn 命令以解析本地依赖项。

  5. 选择 library_test 文件夹，并从上下文菜单中选择 Open in Integrated Terminal。

  6. 输入 yarn 命令，然后按 Enter 键（在你的键盘上）。

  7. 在 Google Chrome 中测试你的应用程序。同时使用 Chrome DevTools 进行检查，以确保使用了新库。

注意

请注意，由于我们不是在真实的 SAP Fiori 环境中测试应用程序，如果你使用 Dev Tools 调试应用程序，控制台中会出现错误。请忽略任何有关资源预加载的消息。

  1. 像之前的练习那样，预览你的 fullscreen 应用程序。

  2. 在显示的应用程序中，从可用承运商列表中选择一个承运商。 生成的应用程序及承运商列表的屏幕截图。

  3. 承运商详细信息和可用航班会如以下图所示显示。 生成的应用程序屏幕，其中包含所选承运商详细信息和航班列表。

  4. 按 F12（在你的键盘上）以访问 Chrome DevTools。在 Chrome DevTools 中选择 Sources 选项卡。你将看到应用程序使用了新库。 Chrome DevTools 的 Sources 文件夹的屏幕截图。