当前位置： 首页 > news >正文

SAPUI5基础知识3 - 引导过程（Bootstrap）

news 2026/2/1 19:31:50

1. 背景

在上一篇博客中，我们已经建立出了第一个SAPUI5项目，接下来，我们将为这个项目添加引导过程。

在动手练习之前，让我们先解释一下什么引导过程。

1.1 什么是引导过程？

在计算机科学中，引导过程也称之为“自举”（Bootstrapping），通常指的是启动操作系统的过程，也就是我们通常所说的"引导"或"启动"。

当你开启计算机时，引导程序（Bootstrap program）是第一个运行的程序。它负责初始化所有的硬件，然后加载操作系统内核并将控制权交给它。自举程序通常存储在只读存储器（ROM）或者电气可擦除可编程只读存储器（EEPROM）中，这样它就可以在电源开启时立即运行。

Bootstrapping这个词源于短语 “pull oneself up by one’s bootstraps”，意思是通过自我努力改善自己的状况。

1.2 SAPUI5的引导过程

在SAPUI5框架中，引导过程是指SAPUI5框架的初始化过程，它加载并初始化SAPUI5框架，创建应用程序实例，并运行应用程序。这个过程通常在HTML文件中的部分进行。

引导过程包括以下步骤：

  • 加载SAPUI5库：通过<script>标签加载SAPUI5库的核心文件（如sap-ui-core.js）
  • 初始化SAPUI5：在<script>标签中设置data-sap-ui-libs属性，指定需要加载的SAPUI5库
  • 初始化应用程序：在<script>标签中设置data-sap-ui-oninit属性，指定应用程序初始化时需要执行的函数
  • 运行应用程序：在HTML文件的<body>部分创建应用程序的视图和控制器。

2. 练习 - 手动添加引导过程

2.1 增强SAPUI5项目

打开上一篇博客中SAPUI5项目的terminal，并执行ui5 use OpenUI5 命令，这个命令会通过通过添加UI5发行版的名称，来初始化ui5.yaml的框架段(framework segment)。当在浏览器中运行应用程序时，将使用该参数。
在这里插入图片描述
可以看到，执行完ui5 use OpenUI5 命令后，会更新ui5.yaml文件，添加添加UI5发行版的名称，也即指定了SAPUI5框架的版本。SAPUI5应用程序运行时，会使用此版本的SAPUI5框架。

framework:name: OpenUI5version: "1.124.0"

接下来，执行ui5 add sap.ui.core sap.m themelib_sap_horizon命令，这个命令会通过通过添加依赖列表来增强ui5.yaml的框架段。
在这里插入图片描述

可以看到，执行完此命令后，会为ui5.yaml文件中添加SAPUI5框架的依赖库。目前，我们添加了3个库：sap.m , sap.ui.core 以及 themelib_sap_horizon。

framework:name: OpenUI5version: "1.124.0"libraries:- name: sap.m- name: sap.ui.core- name: themelib_sap_horizon

2.2 向index.html文件中添加引导过程

在这个步骤中，我们的目的是从UI5 Tooling提供的web服务器加载SAPUI5框架，并通过以下的配置选项初始化SAPUI5的核心模块：

  • <script>标签的id属性必须精确地为sap-ui-bootstrap，以确保SAPUI5运行时的正确启动。
  • <script>标签的src属性告诉浏览器在哪里找到SAPUI5核心库, 它初始化SAPUI5运行时并加载额外的资源，如在data-sap-ui-libs属性中指定的库。
  • SAPUI5控件支持不同的主题。我们选择sap_horizon作为我们的默认主题。
  • 我们指定了所需的UI库sap.m，它包含了我们在练习中需要的UI控件。
  • 为了利用SAPUI5的最新功能，我们将兼容性版本定义为edge。
  • 配置引导过程为异步运行data-sap-ui-async="true"，这意味着，SAPUI5资源可以在后台同时加载。
  • 通过data-sap-ui-onInit属性以声明方式定义了最初要加载的模块。通过这种方式，我们避免了在HTML文件中直接执行JavaScript代码，这使应用更安全。
  • 通过data-sap-ui-resourceroots属性告诉SAPUI5核心，zsapui5.test命名空间中的资源位于与index.html相同的文件夹中。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>My SAPUI5 Test</title><scriptid="sap-ui-bootstrap"src="https://sdk.openui5.org/resources/sap-ui-core.js"data-sap-ui-theme="sap_horizon"data-sap-ui-libs="sap.m"data-sap-ui-compatVersion="edge"data-sap-ui-async="true"data-sap-ui-onInit="module:zsapui5/test/index"data-sap-ui-resourceroots='{"zsapui5.test": "./"}'></script>
</head>
<body><div>Hello World!</div>
</body>
</html>

注意：在data-sap-ui-onInit属性中声明的module，不能以 . 分割，要以 / 分割。当前项目引用的命名空间为zsapui5.test, 在此要写成zsapui5/test， /index是指定的文件名。

2.3 创建index.js文件

创建一个新的index.js脚本文件，该脚本包含应用程序的逻辑。这样做是出于安全的考虑，避免在HTML文件中直接执行代码。

这个脚本将从index.html中调用。在上个步骤中，我们在index.html中以声明方式将此文件定义了作为一个模块 data-sap-ui-onInit="module:zsapui5/test/index"。

在这里插入图片描述

这段js代码将会在“引导过程”完成后调用，显示一个alert（警报）消息。

2.4 运行应用程序

至此，我们可以通过npm start命令，或通过点击NPM Script视图中的Run按钮来启动我们的应用程序。

方式1： 通过npm start命令运行应用程序
在这里插入图片描述
方式2：通过NPM Script菜单运行应用程序

在这里插入图片描述
在这里插入图片描述
应用程序启动后，会打开一个新的窗口，可以看到我们的hello world！应用。

相较于上一个练习，我们的应用程序中，有了一个弹出窗口。
在这里插入图片描述

启动应用程序后，服务器将一直运行，直到手动停止它或在BAS中关闭dev space。通过快捷键ctrl + c可以关停web server网络服务器。

若不小心关闭的应用程序的网页，可以通过运行ports: preview命令，然后点击端口号来再次打开本地网络服务器，然后选择index.html来进行查看。

在这里插入图片描述
在这里插入图片描述
点击index.html再次打开应用程序对应的网页。
在这里插入图片描述

3. 小结

本文介绍了SAPUI5引导过程的概念，并通过示例程序，展示了为SAPUI5应用程序添加引导过程的步骤。希望本文对你有帮助！

相关文章：

SAPUI5基础知识3 - 引导过程（Bootstrap）

1. 背景 在上一篇博客中&#xff0c;我们已经建立出了第一个SAPUI5项目&#xff0c;接下来&#xff0c;我们将为这个项目添加引导过程。 在动手练习之前&#xff0c;让我们先解释一下什么引导过程。 1.1 什么是引导过程&#xff1f; 在计算机科学中&#xff0c;引导过程也称…...

编程日记 2024/6/1 2:57:48

ABAP 借助公司封装的钉钉URL，封装的RFC给钉钉发送消息

FUNCTION ZRFC_BC_SMSSEND_DINGTALK. *"---------------------------------------------------------------------- *"*"本地接口&#xff1a; *" IMPORTING *" VALUE(DESTUSRID) TYPE CHAR255 *" VALUE(CONTENT) TYPE CHAR255 *&quo…...

编程日记 2024/6/1 2:55:45

登录校验及全局异常处理器

登录校验 会话技术 会话:用户打开浏览器,访问web服务器的资源,会话建立,直到有一方断开连接,会话结束.在一次会话中可以包含多次请求和响应会话跟踪:一种维护浏览器状态的方法,服务器需要识别多次请求是否来自于同一浏览器,以便在同一次会话请求间共享数据会话跟踪方案 客户端…...

编程日记 2024/6/1 2:54:44

计算机视觉与模式识别实验1-2 图像的形态学操作

文章目录 &#x1f9e1;&#x1f9e1;实验流程&#x1f9e1;&#x1f9e1;1.图像膨胀2.图像腐蚀3.膨胀与腐蚀的综合使用4.对下面二值图像的目标提取骨架&#xff0c;并分析骨架结构。 &#x1f9e1;&#x1f9e1;全部代码&#x1f9e1;&#x1f9e1; &#x1f9e1;&#x1f9e1…...

编程日记 2024/6/1 2:52:42

【前端每日基础】day31——uni-app

uni-app 开发详细介绍 基本概念 uni-app&#xff1a;uni-app 是一个使用 Vue.js 开发多端应用的框架&#xff0c;可以编译到微信小程序、支付宝小程序、百度小程序、字节跳动小程序、H5、App等多个平台。 跨平台&#xff1a;一次开发&#xff0c;多端部署。通过条件编译实现多…...

编程日记 2024/6/1 2:51:41

云动态摘要 2024-05-31

给您带来云厂商的最新动态&#xff0c;最新产品资讯和最新优惠更新。 最新优惠与活动 [1.5折起]年中盛惠--AI分会场 腾讯云 2024-05-30 人脸核身、语音识别、文字识别、数智人、腾讯混元等热门AI产品特惠&#xff0c;1.5折起 云服务器ECS试用产品续用 阿里云 2024-04-14 云…...

编程日记 2024/6/1 2:49:39

Oracle数据块如何存储真实数据

上周休假了几天，颓废了，没有输出。今天写一点内容。 先抛出一个问题。表中的数据在Oracle数据块中是如何存储的呢？今天简单说一下这个问题。通常数据库中的表会存储字符，数字，日期 这3种常见的数据类型。下面的例子就用这3种数据类型作说明 首先，Oracle数据块底层存储这…...

编程日记 2024/6/1 2:48:38

【WEB前端2024】开源智体世界：乔布斯3D纪念馆-第30课-门的移动动画

【WEB前端2024】开源智体世界&#xff1a;乔布斯3D纪念馆-第30课-门的移动动画 使用dtns.network德塔世界&#xff08;开源的智体世界引擎&#xff09;&#xff0c;策划和设计《乔布斯超大型的开源3D纪念馆》的系列教程。dtns.network是一款主要由JavaScript编写的智体世界引擎…...

编程日记 2024/6/1 2:45:35

智能化改造给企业带来的实际效果

1. 提高生产效率&#xff1a;通过自动化和智能化的生产线&#xff0c;减少人工操作&#xff0c;显著提升单位时间内的生产量。 2. 提升产品质量&#xff1a;智能化改造通过精确控制生产过程&#xff0c;减少人为错误&#xff0c;提高产品的一致性和可靠性。 3. 降低生产成本&am…...

编程日记 2024/6/1 2:44:34

深度学习-语言模型

深度学习-语言模型 统计语言模型神经网络语言模型语言模型的应用序列模型&#xff08;Sequence Model&#xff09;语言模型&#xff08;Language Model&#xff09;序列模型和语言模型的区别 语言模型&#xff08;Language Model&#xff09;是自然语言处理&#xff08;NLP&…...

编程日记 2024/6/1 2:43:33

微型导轨在自动化制造中有哪些优势？

微型导轨在自动化制造中发挥重要作用&#xff0c;能够满足自动化设备制造中对精度要求较高的工艺环节。适用于自动装配线、自动检测设备和机器人操作等环节&#xff0c;推动了行业的进步与发展。那么&#xff0c;微型导轨在使用中有哪些优势呢&#xff1f; 1、精度高和稳定性强…...

编程日记 2024/6/1 2:42:32

探索气象数据的多维度三维可视化：PM2.5、风速与高度分析

探索气象数据的多维度可视化&#xff1a;PM2.5、风速与高度分析 摘要 在现代气象学中&#xff0c;数据可视化是理解复杂气象模式和趋势的关键工具。本文将介绍一种先进的数据可视化技术&#xff0c;它能够将PM2.5浓度、风速和高度等多维度数据以直观和动态的方式展现出来。 …...

编程日记 2024/6/1 2:41:31

【传知代码】双深度学习模型实现结直肠癌检测（论文复现）

前言&#xff1a;在医学领域&#xff0c;科技的进步一直是改变人类生活的关键驱动力之一。随着深度学习技术的不断发展&#xff0c;其在医学影像诊断领域的应用正日益受到关注。结直肠癌是一种常见但危害极大的恶性肿瘤&#xff0c;在早期发现和及时治疗方面具有重要意义。然而…...

编程日记 2024/6/1 2:40:30

平衡二叉树的应用举例

AVL 是一种自平衡二叉搜索树&#xff0c;其中任何节点的左右子树的高度之差不能超过 1。 AVL树的特点&#xff1a; 1、它遵循二叉搜索树的一般属性。 2、树的每个子树都是平衡的&#xff0c;即左右子树的高度之差最多为1。 3、当插入新节点时&#xff0c;树会自我平衡。因此…...

编程日记 2024/6/1 2:39:29

一键安装 HaloDB 之 Ansible for Halo

↑ 关注“少安事务所”公众号&#xff0c;欢迎⭐收藏&#xff0c;不错过精彩内容~ 前倾回顾 前面介绍了“光环”数据库的基本情况和安装办法。 哈喽&#xff0c;国产数据库&#xff01;Halo DB! 三步走&#xff0c;Halo DB 安装指引 以及 HaloDB 的 Oracle 和 MySQL 兼容模式: …...

编程日记 2024/6/1 2:38:28

el-table的上下筛选功能

el-table的sort-change事件可以监听到筛选的事件&#xff1b; 会返回prop属性和order排序的顺序&#xff1b; html&#xff1a; <el-table :data"tableData" border style"width: 100%" :cell-style"{ textAlign: center }"header-cell-c…...

编程日记 2024/6/1 2:32:22

【手撕面试题】Vue（高频知识点一）

每天10道题&#xff0c;100天后&#xff0c;搞定所有前端面试的高频知识点&#xff0c;加油&#xff01;&#xff01;&#xff01;&#xff0c;在看文章的同时&#xff0c;希望不要直接看答案&#xff0c;先思考一下自己会不会&#xff0c;如果会&#xff0c;自己的答案是什么&…...

编程日记 2024/6/1 2:29:19

LabVIEW车轮动平衡检测系统

LabVIEW车轮动平衡检测系统 随着汽车行业的快速发展&#xff0c;车轮动平衡问题对乘坐舒适性、操控稳定性及安全性的影响日益凸显&#xff0c;成为了提高汽车性能的一个关键环节。传统的检测系统因精度低、成本高、操作复杂等问题&#xff0c;难以满足现代汽车行业的需求。开发…...

编程日记 2024/6/1 2:28:18

【Python爬虫--scrapy+selenium框架】超详细的Python爬虫scrapy+selenium框架学习笔记（保姆级别的，非常详细）

六&#xff0c;selenium 想要下载PDF或者md格式的笔记请点击以下链接获取 python爬虫学习笔记点击我获取 Scrapyselenium详细学习笔记点我获取 Python超详细的学习笔记共21万字点我获取 1&#xff0c;下载配置 ## 安装&#xff1a; pip install selenium## 它与其他库不同…...

编程日记 2024/6/1 2:26:16

【Linux】Linux环境基础开发工具_3

文章目录 四、Linux环境基础开发工具2. vim3. gcc和g动静态库的理解 未完待续 四、Linux环境基础开发工具 2. vim vim 怎么批量化注释呢&#xff1f;最简单的方法就是在注释开头和结尾输入 /* 或 */ 。当然也可以使用快捷键&#xff1a; Ctrl v 按 hjkl 光标移动进行区域选择…...

编程日记 2024/6/1 2:24:14

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2026/2/1 6:20:27

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2026/1/9 19:36:58

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2025/8/9 0:31:20

成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

编程新知 2026/2/1 7:18:47

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2026/1/13 9:13:28

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

编程新知 2026/1/25 7:20:01

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

编程新知 2026/1/23 10:28:48

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

编程新知 2025/10/3 0:42:17

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

编程新知 2026/1/31 9:29:45

Git 3天2K星标：Datawhale 的 Happy-LLM 项目介绍（附教程）

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

编程新知 2026/1/29 11:06:33