SAPUI5 (04) - 控件的布局

最新推荐文章于 2024-06-24 16:50:05 发布
最新推荐文章于 2024-06-24 16:50:05 发布
阅读量7.3k 收藏 12
点赞数 6
分类专栏： # SAPUI5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stone0823/article/details/53872039
版权

如果多个控件都放在页面上，OpenUI5 会怎么安排控件的位置呢？如何按自己的想法安排控件的位置呢？Layout 控件就是专门来对控件的位置进行管理的。本篇介绍表格型布局 ( grid layout）。

Grid Layout 控件简介

Grid Layout 控件负责将页面进行表格式布局，页面被分为 12 列，子控件从左至右排列。每个控件并不是占一列，OpenUI5 根据屏幕的大小，将屏幕分为 4 种，分别是 特大 ( XL: extra large )、大 ( L: large )、中等 ( M: medium ) 和 小 ( S: small )。特大的比如 PC 机的大桌面，大的比如 PC 的桌面，中等的比如平板，小的比如手机。默认情况下，每个控件在 XL 桌面上占 3 列，在 L 桌面上占 3 列，在 M 桌面上占 6 列，在
S 桌面上占 12 列。OpenUI5 用一个字符串表示为 XL3 L3 M6 S12，通过 defaultSpan 属性来设置。

当屏幕的尺寸变更的时候，OpenUI5 检测到尺寸的变化，根据上面的 4 个分类对控件的位置进行调整，从而实现所谓的 自适应。

Grid layout 控件宽度 （width 属性），可以基于像素，或者基于页面宽度的相对比例。控件之间的间距可以通过 vSpacing 和 hSpacing 属性进行设置。

没有布局的控件位置是如何安排的？

假设我们现在编写一个含有选择问答题的页面。每一个问题提供 A、B 两种答案。示例的问答包括两个问题：

  1. 页面上有两个 Logo，哪一个更好?
  2. 是否否喜欢 JavaScript 语言？

页面用 OpenUI5 控件实现，代码都写在 index.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'/>

		<!-- Bootstrap -->
		<script src="resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.m"
				data-sap-ui-theme="sap_bluecrystal">
		</script>
		
		<!-- Application area -->
		<script>
			function initialization() {
				// 两个image为两个logo
				var oImage1 = new sap.m.Image({
					src: "img/alice.png",
					decorative: false,
					alt: 'Alice'
				});
				
				var oImage2 = new sap.m.Image({
					src: "img/Hellen.png",
					decorative: false,
					alt: 'Helen'
				});
				
				// 询问更喜欢哪一个logo
				var oLabel1 = new sap.m.Label("label1", {
					text: "Which logo do you like better?"
				});				

				// 答案放在radioButton中
				var oRadioBtnGrp1 = new sap.m.RadioButtonGroup({
					columns: 2,
					ariaLabelledBy: oLabel1,
					buttons: [
				        new sap.m.RadioButton({ text: "Left logo" }),
				        new sap.m.RadioButton({ text: "Right logo"}), 
				    ]
				});
				
				// 询问是否喜欢javascript
				var oLabel2 = new sap.m.Label({
					text: "Do you like JavaScript?"});
				
				// 答案放在radioButton中 
				var oRadioBtnGrp2 = new sap.m.RadioButtonGroup({
					columns: 2,
					ariaLabelledBy: oLabel2,
					buttons: [
					    new sap.m.RadioButton({text: "Yes"}),
					    new sap.m.RadioButton({text: "No" }),
					]
				});
				
				oImage1.placeAt("content");
				oImage2.placeAt("content");
				oLabel1.placeAt("content");				
				oRadioBtnGrp1.placeAt("content");
				oLabel2.placeAt("content");
				oRadioBtnGrp2.placeAt("content");
			};
			
			sap.ui.getCore().attachInit(initialization);
			
		</script>

	</head>
	
	<!-- UI area -->
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

运行一下，我们得到的页面如下图所示：

两个问题都在同一行中，显得比较乱。

Grid Layout （表格式布局）

OpenUI5 是从左到右依次对控件进行放置的。我们需要添加布局控件对这些控件位置进行管理管理。先将代码修改如下：

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

		<!-- Bootstrap -->
		<script src="resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.m, sap.ui.layout"
				data-sap-ui-theme="sap_bluecrystal">
		</script>
		
		<!-- Application area -->
		<script>
			function initialization() {
				// 两个image为两个logo
				var oImage1 = new sap.m.Image({
					src: "img/alice.png",
					decorative: false,
					alt: 'Alice'
				});
				
				var oImage2 = new sap.m.Image({
					src: "img/Hellen.png",
					decorative: false,
					alt: 'Helen'
				});
				
				// 询问更喜欢哪一个logo
				var oLabel1 = new sap.m.Label("label1", {
					text: "Which logo do you like better?"
				});				

				// 答案放在radioButton中
				var oRadioBtnGrp1 = new sap.m.RadioButtonGroup({
					columns: 2,
					ariaLabelledBy: oLabel1,
					buttons: [
				        new sap.m.RadioButton({ text: "Left logo" }),
				        new sap.m.RadioButton({ text: "Right logo"}), 
				    ]
				});
				
				// 询问是否喜欢javascript
				var oLabel2 = new sap.m.Label({
					text: "Do you like JavaScript?"});
				
				// 答案放在radioButton中 
				var oRadioBtnGrp2 = new sap.m.RadioButtonGroup({
					columns: 2,
					ariaLabelledBy: oLabel2,
					buttons: [
					    new sap.m.RadioButton({text: "Yes"}),
					    new sap.m.RadioButton({text: "No" }),
					]
				});
				
				new sap.ui.layout.Grid({
					content: [
				          oImage1,
				          oImage2,
				          oLabel1,
				          oRadioBtnGrp1,
				          oLabel2,
				          oRadioBtnGrp2
					]
				}).placeAt("content");
			};
			
			sap.ui.getCore().attachInit(initialization);
			
		</script>

	</head>
	
	<!-- UI area -->
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

注意代码有两个主要改变：

  • Bootstrap 的 data-sap-ui-libs="sap.m, sap.ui.layout" 增加了sap.ui.layout;
  • 控件全部放在 Grid layout 控件中而不是 DIV 中，只有 Grid 控件放在
    DIV 中。Grid layout 控件和这些控件是聚合关系。主要代码如下：
new sap.ui.layout.Grid({
	content: [
          oImage1,
          oImage2,
          oLabel1,
          oRadioBtnGrp1,
          oLabel2,
          oRadioBtnGrp2
	]
}).placeAt("content");

运行改变后的代码，界面如下：

界面有改变，但两个问题没有分开，仍然不是我们想要的结果。我想把每个问题单独放一行，答案一行。

控件的 layoutData 属性

sap.ui.core.Element 类定义了 layoutData 属性、getLayoutData() 方法和 setLayoutData() 方法。控件都是 sap.ui.core.Element 类的间接子类，从而控件都可以利用这些属性和方法设定这个控件在页面中如何定位。setLayoutData() 方法的参数是 sap.ui.core.LayoutData 对象。因为我们现在使用的 Grid 布局，所以 layoutData 我们可以用
sap.ui.core.LayoutData 类的子类 sap.ui.layout.GridData。

以 sap.m.Label 控件为例，代码这样写：

var oLabel1 = new sap.m.Label("label1", {
	text : "Which logo do you like better?",
	layoutData: new sap.ui.layout.GridData({
		span: "XL12 L12 M12 S12"
	})
});

调整后代码如下：

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
		
		<!-- Bootstrap -->
		<script src="resources/sap-ui-core.js" id="sap-ui-bootstrap"
			data-sap-ui-libs="sap.m, sap.ui.layout"
			data-sap-ui-theme="sap_bluecrystal">
			
		</script>
		
		<!-- Application area -->
		<script>
		
			function initialization() {
				// 两个image为两个logo
				var oImage1 = new sap.m.Image({
					src : "img/alice.png",
					decorative : false,
					alt : 'Alice'
				});
		
				var oImage2 = new sap.m.Image({
					src : "img/Hellen.png",
					decorative : false,
					alt : 'Helen'
				});
		
				// 询问更喜欢哪一个logo
				var oLabel1 = new sap.m.Label("label1", {
					text : "Which logo do you like better?",
					layoutData: new sap.ui.layout.GridData({
						span: "XL12 L12 M12 S12"
					})
				});
		
				// 答案放在radioButton中
				var oRadioBtnGrp1 = new sap.m.RadioButtonGroup({
					columns : 2,
					ariaLabelledBy : oLabel1,
					buttons : [ 
					    new sap.m.RadioButton({text : "Left logo"}), 
					    new sap.m.RadioButton({text : "Right logo"}), 
					],
					layoutData: new sap.ui.layout.GridData({
						span: "XL12 L12 M12 S12"
					})
				});
		
				// 询问是否喜欢javascript
				var oLabel2 = new sap.m.Label("label2", {
					text : "Do you like JavaScript?",
					layoutData: new sap.ui.layout.GridData({
						span: "XL12 L12 M12 S12"
					})
				});
		
				// 答案放在radioButton中 
				var oRadioBtnGrp2 = new sap.m.RadioButtonGroup({
					columns : 2,
					ariaLabelledBy : oLabel2,
					buttons : [ 
					    new sap.m.RadioButton({text : "Yes"}),
					    new sap.m.RadioButton({text : "No"}), 
					],
					layoutData: new sap.ui.layout.GridData({
						span: "XL12 L12 M12 S12"
					})
				});
		
				new sap.ui.layout.Grid({
					content : [ 
					     oImage1, 
					     oImage2, 
					     oLabel1, 
					     oRadioBtnGrp1, 
					     oLabel2,
						 oRadioBtnGrp2 ]
				}).placeAt("content");
			};
		
			sap.ui.getCore().attachInit(initialization);
			
		</script>	
	</head>

	<!-- UI area -->
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

调整后界面如下：

Responsive Margin

上面的界面中，控件和页面没有任何间距。我们可以在 div 的 class 属性中添加 sapUiResponsiveMargin来解决。

	<!-- UI area -->
	<body class="sapUiBody sapUiResponsiveMargin" role="application">
		<div id="content"></div>
	</body>

现在界面如下，在 Logo 上面有了一些间距 ( margin )：

达到目的。

stone0823
关注
专栏目录
SAP-UI5-快速指南
08-09
SAP UI5 使用 3 位版本号，例如 SAPUI5 1.36.5，其中数字（1）指定主版本，第二个数字（36）指定次要版本号，第三个数字指定补丁版本号（5）。 SAP UI5 和 Open UI5 都提供了 UI 开发环境，但它们在以下方面彼此...
SAPUI5基础知识17 - 控件的外边距和内边距（Margins and Paddings）
最新发布
SAP领域技术博客
07-22 845
本文介绍了如何使用SAPUI5中预制的CSS类来调整控件的外边距和内边距，并通过具体的代码展示了其运行效果。
Fiori2.0-在SAPUI5中控制一个“块”的隐藏与显示：setVisible
期待一个富婆
12-21 1090
在开发中，我们可能会遇到像通过控制一些控件来跳转两个部分极为相似的页面。如果通过路由的跳转则会造成view的滥用，为路由增添负担，影响加载效率。或者可以通过一个view两个fragment来切换部分不相似的部分。但是今天我介绍的方法要比上面两个都要简单实用，我们可以想到就是利用类似JS中的display属性，但是SAPUI5并不支持原生JS，那么我们该如何实现呢？
Windows系统本地安装Open UI实现AI聊天生成UI界面详细流程
weixin_46151178的博客
06-24 548
本篇文章介绍如何本地部署Open UI并结合Cpolar内网穿透实现公网访问。Open UI 是一个开放源代码的项目，致力于创建一个可扩展、可定制，并且能够跨平台运行的用户界面框架。该项目的目标是提供一套标准化的组件库，让开发者可以更高效地构建响应式的Web应用，同时保持对最新Web技术的兼容性和前瞻性。Open UI 基于现代Web技术如HTML、CSS和JavaScript（尤其是配合React或Vue等前端框架）。它采用了模块化的设计，允许开发者按需引入所需组件，大大减少了代码体积。
SAP UI5 之Controls (控件) 笔记三
Tiny~JJ的博客
04-30 915
我们将控件的构造函数调用链接到标准方法，该方法用于将 SAPUI5 控件放在文档对象模型 （DOM） 或任何其他 SAPUI5 控件实例的节点内。在上面的示例中，事件的回调是我们现在实例化 SAPUI5 文本控件的位置。对于我们的控件，我们将属性设置为值“Hello World”。首先我们得define中声明我们使用的是文本 “sap/m/Text”,function()参数传递类Text ，在前面展示在浏览器中的Hello World 是在Html body标签中，接下来我们展示 文本放在UI5控制中。
RadioButton文字按钮间距设置，按钮在文字右端显示，RadioButton 右端对齐
llllll_iinn的博客
11-28 1448
①xml文件对控件设置两个参数： android:layoutDirection=“rtl” android:textDirection=“ltr” ②右端选项圆圈 对齐 相应设置radiobutton控件宽度即可 android:layout_width=“match_parent” 或者给一个定值可以控制其间距， RadioButton属性将 android:paddingleft设置上就可以了 ...
SAPUI5教程——ABAP环境下SAP Fiori 系统搭建以及开发实践
热门推荐
天外野草技术专栏
06-23 1万+
前言近年来，SAPUI5(SAP Fiori 2.0)的普及，云时代下的移动Web应用一路高歌，众多SAP 顾问也将焦点投入到了这个前端框架。那么作为一款和SAP 系列套件深度结合的框架，需要安装很多组件支持Fiori的系列开发，可能我们并不会去做SAP Basic的相关工作，但是作为一名合格的咨询顾问，需要了解它的原理。整体架构一个Fiori的安装过程中包含了前端服务组件和后台服务数据，前端组件和
SAPUI5基础知识1 - 概览，库，支持工具，自学教程
SAP领域技术博客
05-06 1739
本文介绍了SAPUI5的基础概念，常用库，调试工具和支持工具，同时给出了自学SAPUI5的demo教程的访问方式。
sapui5-runtime
03-27
【SAP UI5运行时环境】，又称为`sapui5-runtime`，是SAP公司推出的一款强大的前端开发框架，专为构建企业级的Web应用程序而设计。它基于OpenUI5，一个开源版本的UI5，因此也带有"openui5"的标签。SAP UI5提供了一个...
SAP UI5入门
07-11
**注**：您可以通过在线方式访问 Demo Kit：[SAP UI5 Demo Kit on SAP HANA Cloud](https://sapui5.hana.ondemand.com/)。请注意，这可能并不是您本地版本的 Demo Kit。 #### 三、选择浏览器 SAP UI5 对浏览器的...
sap.m.sample.LightBox.zip_UI5_proudx4v_sap ui5
09-23
4. **V.view.xml** - 这代表了一个视图（View）的定义，视图是 UI5 中用户界面的基本构建块，包含了 UI 控件的布局和交互逻辑。这里的 "V" 可能是视图名称的一部分或者代表某种分类（例如，Vertical 或 Variant）。 ...
sap ui5工具栏例子
04-29
sap ui5工具栏例子,工具栏的交互，布局，使用
Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises
08-26
SAPUI5的核心特性包括对移动设备的良好支持、丰富的UI控件库、以及与SAP后端系统的紧密集成。SAPUI5适合用于开发SAP Fiori风格的用户界面，Fiori是SAP提出的一个用户体验设计准则，旨在为所有SAP软件产品提供统一、...
SAPUI5教程——MaskInput的妙用
天外野草技术专栏
08-17 1539
前言SAPUI5作为一个重量级别的框架，提供了丰富的组件，今天介绍一个非常实用的组件叫做MaskInput， 在格式化邮编，电话等具有特殊格式的数据，非常管用，使用更是简单，如果用其他框架实现就非常的麻烦了。给大家介绍一下：应用先看下代码：<MaskInput mask = "CCCC-CCCC-CCCC-CCCC-CCCC" placeholderSymbol = "_" placeholder
SAPUI5学习第五天-----（08）页面控件：Pages and Panels，Shell Control as Container，Margins and Paddings
'尤其是十月的风'的博客
06-11 441
Pages and Panels 官网代码 在完成了所有关于应用结构的工作之后，是时候改善我们的应用的外观了。我们将使用来自sap.m库的两个控件来为我们的UI添加更多的“bling”。在此步骤中，您还将了解有关控件聚合的知识。 先看效果吧 上一步的： 这一步的：现在有一个面板显示前面步骤中的控件 代码： webapp/view/App.view.xml <mvc:View controllerName="sap.ui.demo.walkthrough.controller.App"
SAP UI5简单控件
m0_60885199的博客
01-20 242
如果需要获取按钮的值，需要在事件处理函数中传入事件，然后getSouce()和getText()获得按钮绑定的值。(多个控件可共用一个事件处理器)
SAPUI5 (12) - 对象显示组件
王敏的专栏
01-09 4399
SAPUI5提供了几个专门用于显示数据的组件，可以让编码更加简单，显示更加漂亮
SAPUI5 (03) - 简单控件的使用
王敏的专栏
12-23 8640
SAPUI5 控件的基本使用方法，以及控件的两种基本关系 agrregation 和association。
SAPUI5最新进展与开发工具探索
3. **丰富的控件库**：SAPUI5提供了一套完整的UI控件集合，涵盖了表格、图表、按钮、输入框等，可以快速构建功能丰富的应用界面。 4. **OData支持**：SAPUI5原生支持OData协议，这是一种面向服务的接口，便于与后端...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值