OpenUI5_学习笔记

最新推荐文章于 2024-05-30 11:20:06 发布

滨海之君

最新推荐文章于 2024-05-30 11:20:06 发布

阅读量995

点赞数 1

本文链接：https://blog.csdn.net/qq_40084325/article/details/107325657

版权

理解
step1:在index.xml中引入UI5资源

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SAPUI5 Walkthrough</title>
	<!-- 引入UI5资源 -->
	<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 class="sapUiBody" id="content">
	 
</body>
</html>

step2:在webapp目录下创建一个index.js文件

sap.ui.define([

], function () {
	"use strict";


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

现在一个基础页面和UI5的基础准备工作做好了
静态页面和js文件分离,以后都这么写.
在静态页面中,它用script标签引入UI5资源,src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"加载OpenUI5的资源文件(在线引入方式,以后实际开放中,可能本地方式);
第三行:data-sap-ui-theme="sap_belize":定义了一个OpenUI5的主题样式;
第四行data-sap-ui-libs="sap.m":默认加载sap.m的资源包;以后sap.m包下的控件就不需要引入便可以直接使用了;
第五行:data-sap-ui-compatVersion="edge":兼容浏览器的版本;
第六行:data-sap-ui-async="true":是否异步;
第七行:data-sap-ui-onInit="module:sap/ui/demo/walkthrough/index":页面打开后要找的js文件,:其中sap/ui/demo/walkthrough/ 是一个自定义别名路径;这一行的代码的意思是页面打开后会找一个叫index.js的文件;(就是以声明的方式执行index.js)
第八行:data-sap-ui-resourceroots='{ "sap.ui.demo.walkthrough": "./" }':默认的资源根目录,后面的./是实际的路径,左面的sap.ui.demo.walkthrough是一个自定义的别名路径
— 注:第八行结合第七行理解
上述八行的效果是,打开index.html后会加载(初始化)根目录下(./)的index.js文件; 所以下面看一下index.js文件里的内容是什么…

sap.ui.define([
	"sap/m/Text"

], function (Text) {
	"use strict";

	new Text({
		text: "Hello World"
	}).placeAt("content");

});

在这里插入图片描述
通常不会再index.html里面写过多的内容,所以以后都是新建一个xml文件,比如在路径webapp/view下建一个App.view.xml文件(相当于htnl文件,以后都是建Xxx.view.xml文件)

<mvc:View
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   
</mvc:View>

在这里插入图片描述
按钮属于交互事件,需要写在js文件里,所以在webapp/controller路径下创建一个App.controller.js文件;

sap.ui.define([
   "sap/ui/core/mvc/Controller"
], function (Controller) {
   "use strict";
   return Controller.extend("", {
   });
});

在App.view.xml页面中绑定controller.js
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200713230235970.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZ

滨海之君

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
OpenUI5_学习笔记

step1:在index.xml中引入UI5资源<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>SAPUI5 Walkthrough</title>  <script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/re
复制链接

扫一扫