在对 SAPUI5 做某事之前,我们需要加载并初始化它。加载和初始化 SAPUI5 的过程称为引导。完成此引导后,显示一个弹窗alert。
SAPUI5 是一个 JavaScript 库,可以从应用程序所在的同一 Web 服务器加载,也可以从不同的服务器加载。如果 SAPUI5 部署在服务器上的其他位置,或者你想使用不同的服务器,那么你需要根据自己的需求调整本教程中引导程序中的相应路径(这里:src=“/resources/sap-ui-core.js”)。
将webapp/index.html代码改为:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SAPUI5 Walkthrough</title>
**<script
id="sap-ui-bootstrap"
src="https://sdk.openui5.org/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:sap/ui/demo/walkthrough/index"
data-sap-ui-resourceroots='{
"sap.ui.demo.walkthrough": "./"
}'>
</script>**
</head>
<body>
<div>Hello World</div>
</body>
</html>
在此步骤中,我们从本地 Web 服务器加载 SAPUI5 框架,并使用以下配置选项初始化核心模块:
标签的 src 属性script告诉浏览器在哪里可以找到 SAPUI5 核心库 – 它初始化 SAPUI5 运行时并加载其他资源,例如在 data-sap-ui-libs 属性中指定的库。
SAPUI5 控件支持不同的主题,选择 sap_belize 作为默认主题。
指定所需的 UI 库 sap.m,其中包含本教程所需的 UI 控件。
为了利用 SAPUI5 的最新功能,将兼容性版本定义为 edge。
将“引导”过程配置为异步运行,这意味着出于性能原因,可以在后台同时加载 SAPUI5 资源。
以声明性方式定义最初要加载的模块。这样,避免了在HTML文件中直接执行JavaScript代码。这使应用程序变得不那么重要
创建webapp/index.js
sap.ui.define([
], function () {
"use strict";
alert("UI5 is ready");
});
现在,我们创建了一个新的 index.js 脚本,该脚本将包含本教程步骤的应用程序逻辑。出于安全原因,这样做是为了避免直接在 HTML 文件中使用可执行代码。此脚本将由index调用.html。我们在那里以声明性的方式将其定义为一个模块。
【我主要看官网和小石王博主文章学习,如有侵权请联系我删除】