SAPUI5开发01_03-First Project

SAP扫地僧

已于 2023-03-17 09:48:17 修改

阅读量378

点赞数

分类专栏： SAPUI5 文章标签： javascript eclipse 前端 SAPUI5 UI5

于 2023-03-17 09:46:57 首次发布

本文链接：https://blog.csdn.net/wtxhai/article/details/129553755

版权

SAPUI5 专栏收录该内容

4 篇文章

订阅专栏

本文档介绍了SAPUI5的关键组成部分，包括运行时和设计时工具。详细阐述了UI5的浏览器支持，体系结构，以及如何在Eclipse中创建新项目。此外，还讲解了UI5与jQuery的关系，UI5的扩展性，以及如何运行和构建简单的应用程序，如添加按钮并实现交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

UI5关键部件

运行时间

● 控制库(JavaScript、CSS和图像文件)
● Core(JavaScript文件)
● 测试套件(HTML JavaScript文件)

设计时间(可选)

● Eclipse中的应用程序开发工具
● Eclipse中的控件开发工具
● Java和ABAP资源处理程序
● 主题发生器

UI5浏览器支持

在这里插入图片描述
*InternetExplorer 8支持CSS 3功能的优雅退化，如圆角、文字阴影等

UI5体系结构概述

在这里插入图片描述

UI5控件库

在这里插入图片描述

创建项目

选择“文件”->“新建”->“项目”

在这里插入图片描述
选择创建SAPUI5项目，如下图所示：然后点击“Next”

在这里插入图片描述
输入项目名称，选择保存项目的路径，如下图所示设置：点击完成

在这里插入图片描述
将会进入如下界面：

在这里插入图片描述
代码如下：

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
		

		<script src="resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.ui.commons"
				data-sap-ui-theme="sap_bluecrystal">
		</script>
		<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

		<script>
			
		</script>

	</head>
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

运行项目，如下图所示，点击运行按钮，然后选择在服务器上运行。

在这里插入图片描述
选择服务器，点击完成

在这里插入图片描述
项目就会在默认浏览器里面运行起来。因为没有输入任何控件，所有页面是一片空白。

在这里插入图片描述
我们可以在运行的页面上增加一个点击按钮，如下图所示：

在这里插入图片描述
代码如下：

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
		

		<script src="resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.ui.commons"
				data-sap-ui-theme="sap_bluecrystal">
		</script>
		<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

		<script>
			var bttn = new sap.ui.commons.Button({
				text:"Press Me!"
			});
			bttn.placeAt("content");
		</script>

	</head>
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

下面我们实现点击按钮时，返回一个对话框的交互动作，如下图：鼠标放到按钮上时它会显示备注内容，点击后会显示需要输出的内容。

在这里插入图片描述
代码如下：

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
		

		<script src="resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.ui.commons"
				data-sap-ui-theme="sap_bluecrystal">
		</script>
		<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

		<script>
			oButton1 = new sap.ui.commons.Button({
				text:"Press Me!",
				tooltip:"This is a test tooltip",
				press:function(){alert('Alert from' +' ' + oButton1.getText());}
			});
			oButton1.placeAt("content");
		</script>

	</head>
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

UI5体系结构概述

在这里插入图片描述

UI5和jQuery

JQuery是UI5的基础

jQuery目前是Web上最流行的JavaScript库。它旨在帮助web开发人员在JavaScript中执行常见任务：
● 浏览器检测与抽象
● 读取和操作DOM
● 创建HTML的UI元素，标准不提供(例如日期选择器)
● 主题化和动画化Uls
● 处理Ajax请求，解析XML或JSON数据

UI5 扩展性

UI5允许应用程序开发人员

● 将自己的JavaScript、HTML和CSS包含到基于UI5的页面中
● 包括U15缺乏控制或功能的其他JavaSript库
● 从现有UI5控件创建复合控件
● 编写新的UI库和新控件
● 为UI5内核编写插件
这样，UI5开发组就不应该成为应用程序的瓶颈。需要某种功能的组。

UI5运行时间

UI 5主要由在浏览器中运行的JavaScript、CSS和图像文件组成。除了这个主要产品-运行时文件-UI5还有更多的可选功能。一些软件。
在这里插入图片描述

SAPUI5 Bootstrap

UI5页始终必须从bootstrap开始，才能加载UI5运行时。
在这里插入图片描述

script应用和UI区域

在引导脚本标记之后，可以使用“应用程序脚本”编写UI5应用程序
● 您可以创建布局和文本字段等控件
● 通过调用placeAt方法在名为“UI区域”的HTML元素中显示控件（可以有多个UI区域）
在这里插入图片描述
Exercise - Create a Simple Application
● Create a MatrixLayout with two Labels, two TextFields and a Button
● new sap . ui . commons. layout .MatrixLayout
● new sap. ui. commons。Label
● new sap.ui.commons. TextField
● new sap. ui . commons . Button
● Add the Labels, the TextFields and the Button to the layout with the createRow() method
● Bonus: Add a press handler to the Button that displays the values of the TextFields.
● attachPress(function() {})
● getValue()

练习-创建一个简单的应用程序

● 创建具有两个标签、两个文本字段和一个按钮的矩阵布局
● new sap.ui.commons.layout.MatrixLayout
● new sap.ui.commons.Label
● new sap.ui.commons.TextField
● new sap.ui.commons.Button
● 使用createRow（）方法将 Labels (标签) 、TextFields和Button添加到布局中
● 额外的好处：在按钮上添加一个显示文本字段值的按键处理程序。
● attachPress(function() {})
● getValue()

程序代码：

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
		

		<script src="resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.ui.commons"
				data-sap-ui-theme="sap_bluecrystal">
		</script>
		<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

		<script>
			var oLayout = new sap.ui.commons.layout.MatrixLayout({
				width:"100%",
				widths:["20%","40%","30%"]
			});
			var oLabel1 = new sap.ui.commons.Label({
				text:"First Name"
			});
			var oTextField1 = new sap.ui.commons.TextField({
				id:"fitst-name",
				width:"100%"
			})
			var oLabel2 = new sap.ui.commons.Label({
				text:"Last Name"
			});
			var oTextField2 = new sap.ui.commons.TextField({
				id:"last-name",
				width:"100%"
			});
			var oButton = new sap.ui.commons.Button({
				text:"Submit"
			});
			// add rows with label/textfield to tabel
			oLayout.createRow(oLabel1,oTextField1,null);
			oLayout.createRow(oLabel2,oTextField2,null);
			oLayout.createRow(null,oButton,null);
			oLayout.placeAt("content"); //add handler to alter textfield values
			oButton.attachPress(function(){
				var msg = "oTextField1:" + oTextField1.getValue() + "\n" +"oTextField2:" + oTextField2.getValue();
				alert(msg);
			})
		</script>

	</head>
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>