第2步:引导

最新推荐文章于 2023-12-07 09:16:38 发布

真的是我太天真

最新推荐文章于 2023-12-07 09:16:38 发布

阅读量273

点赞数

分类专栏： SAPUI5

原文链接：https://sapui5.hana.ondemand.com/sdk#/topic/fe12df2e338e43598977d09f3d191b7b

版权

SAPUI5 专栏收录该内容

40 篇文章 5 订阅

订阅专栏

说明

在我们对SAPUI5进行操作之前，我们需要加载并初始化它。这个加载和初始化SAPUI5的过程称为引导。一旦这个引导完成，我们就会显示一个警告。。

预览

在这里插入图片描述

浏览器弹出"UI5 is ready"的警告

代码

你可以在演练-第2步查看和下载所有文件。

注意
SAPUI5是一个JavaScript库，可以从应用所在的同一个Web服务器加载，也可以从不同的服务器加载。如果SAPUI5被部署在服务器的其他地方，或者你想使用一个不同的服务器，那么你需要根据自己的需求在本教程的引导程序中调整相应的路径(演示里的是:src="/resources/sap-ui-core.js")。

您可以在教程或测试中使用对SAPUI5最新稳定版本的引用，但是永远不要将其用于生产用途。在实际的应用程序中，必须显示指定SAPUI5版本。

有关CDN的更多信息，请参见Variant for Bootstrapping from Content Delivery Network

webapp/index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SAPUI5 Walkthrough</title>
	<script
		id="sap-ui-bootstrap"
		src="https://openui5.hana.ondemand.com/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框架，并使用以下配置选项初始化核心模块:

<script>标签的src属性告诉浏览器在哪里可以找到SAPUI5核心库——它初始化SAPUI5运行时并加载额外的资源，比如data-sap-ui-libs属性中指定的库。
SAPUI5控件支持不同的主题，我们选择sap_belize作为默认主题。
我们指定所需的UI库sap.m，其中包含本教程所需的UI控件。
为了利用SAPUI5的最新功能，我们将兼容版本定义为edge。
我们将“引导”过程配置为异步运行。

这意味着出于性能原因，SAPUI5资源可以在后台同时加载。
我们以声明的方式定义最初要加载的模块。这样，我们就避免了在HTML文件中直接执行JavaScript代码。这使你的应用程序更安全。我们将创建该脚本，并在此步骤中进一步引用该脚本。
我们告诉SAPUI5核心，sap.ui.demo.walkthrough名称空间中的资源位于与index.html相同的文件夹中。例如，这对于在SAP Fiori launchpad上运行的应用程序是必要的。

webapp/index.js (New)

sap.ui.define([

], function () {
	"use strict";


	alert("UI5 is ready");
});

现在，我们创建一个新的index.js脚本，它将包含本教程步骤的应用程序逻辑。出于安全原因，我们这样做是为了避免在HTML文件中直接使用可执行代码。这个脚本将被index.html调用。我们在那里以声明的方式将其定义为一个模块。

章节

真的是我太天真

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录