SAP UI5 walkthrough step2 Bootstrap

我的理解,这就是一个引导指令

1.我们右键打开命令行--执行  ui5 use OpenUI5

2.执行命令:ui5 add sap.ui.core sap.m themelib_sap_horizon

执行完之后,会更新 yaml 文件

3.修改index.html 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>UI5 Walkthrough</title>
	<script
		id="sap-ui-bootstrap"
		src="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:ui5/walkthrough/index"
		data-sap-ui-resourceroots='{
			"ui5.walkthrough": "./"
		}'>

	</script>
</head>
<body>
<div>Hello World</div>
</body>
</html>

In this step, we load the SAPUI5 framework from the webserver provided by UI5 Tooling and initialize the core modules with the following configuration options:

  • The id attribute of the <script> tag has to be exactly "sap-ui-bootstrap" to ensure proper booting of the SAPUI5 runtime.
  • The src attribute of the <script> tag tells the browser where to find the SAPUI5 core library – it initializes the SAPUI5 runtime and loads additional resources, such as the libraries specified in the data-sap-ui-libs attribute.

  • The SAPUI5 controls support different themes. We choose sap_horizon as our default theme.

  • We specify the required UI library sap.m, which contains the UI controls we need for this tutorial.

  • To make use of the most recent functionality of SAPUI5 we define the compatibility version as edge.

  • We configure the bootstrapping process to run asynchronously. This means that the SAPUI5 resources can be loaded simultaneously in the background for performance reasons.

  • We define the module to be loaded initially in a declarative way. With this, we avoid directly executable JavaScript code in the HTML file. This makes your app more secure. We'll create the script that this refers to further down in this step.
  • We tell SAPUI5 core that resources in the ui5.walkthrough namespace are located in the same folder as index.html.

注意 这里src 的输入值是resources/sap-ui-core.js

我们需要先将resources文件先建立,并从从”https://openui5.hana.ondemand.com/resources/sap-ui-core.js“中将此文件保存进去

或者直接将src 的输入值改为 https://openui5.hana.ondemand.com/resources/sap-ui-core.js

这样之后才能正常加载

4.在webapp文件下创建一个index.js的文件

sap.ui.define([], () => {
	"use strict";
	alert("UI5 is ready");
});

5.输入npm start  结果如下

  • 19
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在HTML5页面中引用SAP UI5组件,可以使用以下方法: 1. 使用SAP CDN(内容分发网络)引用UI5库: ```html <!-- 在页面的head标签中引用UI5库 --> <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_fiori_3" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async" data-sap-ui-resourceroots='{ "my.app": "./" }'> </script> ``` 2. 将UI5库下载到本地,然后在HTML页面中引用本地库: ```html <!-- 在页面的head标签中引用本地UI5库 --> <script src="./ui5/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_fiori_3" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async" data-sap-ui-resourceroots='{ "my.app": "./" }'> </script> ``` 在引用UI5库之后,就可以在HTML页面中使用SAP UI5组件了。例如,使用SAP UI5的Button组件: ```html <!-- 在body标签中使用SAP UI5的Button组件 --> <body> <div data-sap-ui-component data-name="sap.m.Button" data-id="myButton" data-text="Click me"></div> </body> ``` 希望这些信息能帮助到你。 ### 回答2: H5引用SAP UI5的组件是一种将SAP UI5技术与HTML5相结合的方法,通过引入SAP UI5库,我们可以在HTML页面中使用SAP UI5的丰富组件来构建优秀的Web应用。 首先,我们需要在HTML页面的<head>标签内引入SAP UI5库的脚本,可以使用以下代码: ```html <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script> ``` 在这个例子中,我们通过`src`属性指定SAP UI5库脚本的URL地址,`id`属性为SAP UI5的引导程序提供一个唯一的标识符。通过`data-sap-ui-theme`属性我们可以设置SAP UI5应用的主题,这里我们使用了'sap_bluecrystal'主题。通过`data-sap-ui-libs`属性我们可以指定要使用的SAP UI5库,这里我们使用了'sap.m'库。 接下来,在HTML页面的<body>标签内创建一个空的容器作为SAP UI5组件的承载区域,可以使用以下代码: ```html <div id="myContainer"></div> ``` 然后,我们可以在JavaScript代码中使用SAP UI5的API来创建和配置组件,在这个例子中我们创建一个简单的Button组件,并将其添加到上述容器中,可以使用以下代码: ```javascript sap.ui.require([ "sap/m/Button", "sap/m/MessageToast" ], function(Button, MessageToast) { var oButton = new Button({ text: "Click me", press: function() { MessageToast.show("Hello World!"); } }); oButton.placeAt("myContainer"); }); ``` 在这个例子中,我们使用`sap.ui.require`函数来异步加载并初始化所需的SAP UI5模块。通过`new Button()`语句我们创建了一个Button组件的实例,并配置了它的文本和press事件处理函数。`placeAt()`方法将Button组件添加到之前创建的容器中。 最后,在浏览器中访问HTML页面,就可以看到我们引用的SAP UI5组件在页面上显示出来了。点击Button组件,会弹出一个包含"Hello World!"文本的消息提示框。 通过上述步骤,我们成功地在H5中引用了SAP UI5的组件,实现了高性能、易扩展的界面设计与交互体验。 ### 回答3: H5是一个用于构建网页和移动应用的前端技术,而SAP UI5SAP公司提供的一套专门用于构建企业级应用的UI控件库。在H5中引用SAP UI5的组件,可以通过以下步骤实现: 1. 引入SAP UI5库:在HTML文件的`<head>`标签中,添加引入SAP UI5的链接。例如: ```html <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m"> </script> ``` 2. 创建UI容器:在HTML文件中,创建用于承载SAP UI5组件的区域。例如: ```html <div id="myContainer"></div> ``` 3. 初始化SAP UI5应用:在JavaScript文件中,编写初始化SAP UI5应用的代码。例如: ```javascript sap.ui.getCore().attachInit(function() { // 创建一个控件 var oButton = new sap.m.Button({ text: "Hello UI5" }); // 将控件添加到容器中 oButton.placeAt("myContainer"); }); ``` 4. 运行应用:在浏览器中打开HTML文件,即可看到引用的SAP UI5组件在页面中显示出来。在上述示例中,将显示一个带有文本"Hello UI5"的按钮。 通过上述方法,我们可以在H5中轻松引用SAP UI5的组件,并根据需要进行进一步的定制和开发。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值