SAP OPEN UI5 Step2 Bootstrap

引入sap ui5的js库文件

webapp/index.html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>SAPUI5 Walkthrogh</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>
    <dir>Hello Word</dir>
</body>

</html>

src:库js放在哪里,此例子是做练习,所以是从sap的server上取。实际在生产环境里,js文件要放在自己的server上,写法是src="/resources/sap-ui-core.js",意思是sap-ui-core.js放在自己server的resources目录下了。

data-sap-ui-them:主题样式

data-sap-ui-libs:使用的库

data-sap-ui-async:异步

data-sap-ui-onInit:初始化js文件的名字,例子里的index,就是index.js
sap/ui/demo/walkthrough/和sap.ui.demo.walkthrough是对应的,就是把斜线还成了点。
意思是,index.js的位置是sap.ui.demo.walkthrough对应的目录下。
那么sap.ui.demo.walkthrough对应的具体目录,是在哪里定义的呢?
是在下面的data-sap-ui-resourceroots里定义的,

data-sap-ui-resourceroots:定义sap.ui.demo.walkthrough对应的目录。例子里的【./】的意思是,和index.html在同一个目录。
如果是【./jss/】则sap.ui.demo.walkthrough对应的目录是,和index.html的同级目录下的jss目录。

webapp/index.js (New)

sap.ui.define([

], function () {
	"use strict";

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

这样写js的话,就不能直接调用此js,但能被index.html调用

执行效果,会弹出一个警告框,显示UI5 is ready

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值