加载和初始化SAPUI5的过程称为Bootstrap:启动,引导。启动成功之后,可以在浏览器中显示弹窗或者其他UI。在启动之前需要完成Step1中的安装ui5
cd 根目录,执行:
- ui5 use OpenUI5
- ui5 add sap.ui.core sap.m themelib_sap_horizon
- (以上步骤执行成功后,webapp/ui5.yaml文件在framework里添加相应的库)
- (以下步骤完成后在根目录下执行:npm start)
IDEA打开webapp/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>UI5 Walkthrough</title>
<script
id="sap-ui-bootstrap"
//在此步骤中,我们从本地 Web 服务器加载 SAPUI5 框架,并使用以下配置选项初始化核心模块:
src="resources/sap-ui-core.js"
//标签的 src 属性script告诉浏览器在哪里可以找到 SAPUI5 核心库 – 它初始化 SAPUI5 运
//行时并加载其他资源,例如在 data-sap-ui-libs 属性中指定的库
data-sap-ui-theme="sap_horizon"
//SAPUI5 控件支持不同的主题,选择 sap_belize 作为默认主题。
data-sap-ui-libs="sap.m"
//指定所需的 UI 库 sap.m,其中包含本教程所需的 UI 控件
data-sap-ui-compatVersion="edge"
//为了利用 SAPUI5 的最新功能,将兼容性版本定义为 edge
data-sap-ui-async="true"
//将“引导”过程配置为异步运行,这意味着出于性能原因,可以在后台同时加载 SAPUI5 资源
data-sap-ui-onInit="module:ui5/walkthrough/index"
//以声明性方式定义最初要加载的module(模块)。这样,避免了在HTML文件中直接执行
//JavaScript代码。这使应用程序变得不那么重要
data-sap-ui-resourceroots='{
"ui5.walkthrough": "./"
}'>
//SAPUI5 是一个 JavaScript 库,可以从应用程序所在的同一 Web 服务器加载,也可以从不
//同的服务器加载。如果 SAPUI5 部署在服务器上的其他位置,或者你想使用不同的服务器,
//那么你需要根据自己的需求调整本教程中引导程序中的相应路径
</script>
</head>
<body>
<div>Hello World</div>
</body>
</html>
IDEA新建index.js
sap.ui.define([], () => {
"use strict";
alert("UI5 is ready");
});
最终cmd命令行界面: