【IDEA-SAPUI5-Walkthrough学习】Step2:Bootstrap

斑布yaa

已于 2024-01-19 11:42:32 修改

阅读量359

点赞数 10

分类专栏：【IDEA-SAPUI5-Walkthrough学习】文章标签：学习

于 2024-01-18 16:52:13 首次发布

本文链接：https://blog.csdn.net/Bamboo_sqz/article/details/135677655

版权

【IDEA-SAPUI5-Walkthrough学习】专栏收录该内容

9 篇文章 0 订阅

订阅专栏

加载和初始化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命令行界面：

斑布yaa

关注

10
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
【IDEA-SAPUI5-Walkthrough学习】Step2:Bootstrap

加载和初始化SAPUI5的过程称为Bootstrap：启动，引导。启动成功之后，可以在浏览器中显示弹窗或者其他UI。在启动之前需要完成Step1中的安装ui5。IDEA打开webapp/index.html。IDEA新建index.js。
复制链接

扫一扫