[UI5 常用控件] 06.Splitter,ResponsiveSplitter
文章目录
- 前言
- 1. Splitter
- 1.1 属性
- 2. ResponsiveSplitter
前言
本章节记录常用控件Splitter,ResponsiveSplitter。主要功能是分割画面布局。
其路径分别是:
- sap.ui.layout.Splitter
- sap.ui.layout.ResponsiveSplitter
1. Splitter
1.1 属性
- orientation : Horizontal,Vertical (横向分割/纵向分割)
- SplitterLayoutData:size : 尺寸
- SplitterLayoutData:minSize : 最小尺寸
- SplitterLayoutData:resizable : 可变尺寸

- View
<Panel headerText="Splitter 布局"><l:Splitterid="mainSplitter"height="500px"width="100%"orientation="Horizontal"><Buttonwidth="100%"text="Content 1"><layoutData><l:SplitterLayoutData size="300px" /></layoutData></Button><Buttonwidth="100%"text="Content 2"><layoutData><l:SplitterLayoutData size="auto" /></layoutData></Button><Buttonwidth="100%"text="Content 3"><layoutData><l:SplitterLayoutDatasize="30%"minSize="200px"/></layoutData></Button></l:Splitter><HBox class="sapUiSmallMarginTop sapUiSmallMarginBegin"><Buttontext="Add content area"press="btnAddContentArea"/><Buttontext="Remove content area"press="btnRemoveContentArea"/><Buttontext="Resizable"press="btnSetResizable"/><Buttontext="Change Orientation"press="btnChangeOrientation"/></HBox></Panel>
- Controller
btnAddContentArea: function () {var oLayoutData = new SplitterLayoutData({resizable: true,size: Math.random() > 0.5 ? "auto" : 50 + Math.floor(Math.random() * 300) + "px",maxSize: Math.random() > 0.5 ? "0" : Math.floor(Math.random() * 100) + "px"});var oContent = new Button({width: "100%",height: "100%",text: "Content!",layoutData: oLayoutData});this.oSplitter.addContentArea(oContent);},btnRemoveContentArea: function () {var oLastContentArea = this.oSplitter.getContentAreas().pop();this.oSplitter.removeContentArea(oLastContentArea);oLastContentArea.destroy();},btnSetResizable:function(){var oContentArea = this.oSplitter.getContentAreas()[0];var oLayoutData = oContentArea.getLayoutData();oLayoutData.setResizable(false)},btnChangeOrientation: function () {var Orientation = coreLibrary.Orientation;var sOr = this.oSplitter.getOrientation();this.oSplitter.setOrientation(sOr === Orientation.Vertical? Orientation.Horizontal: Orientation.Vertical);}
2. ResponsiveSplitter
-
Splitter另一个替代方案

-
View
<PanelheaderText="ResponsiveSplitter 布局"class="sapUiLargeMarginTop"><l:ResponsiveSplitterdefaultPane="default"height="600px"><l:PaneContainer resize=".onRootContainerResize"><l:SplitPanerequiredParentWidth="400"id="default"><l:layoutData><l:SplitterLayoutData size="40%" /></l:layoutData><PanelheaderText="Minimum parent width 400"height="100%"><Buttontext="Area 1"width="50%"type="Success"/></Panel></l:SplitPane><l:PaneContainerorientation="Vertical"resize=".onInnerContainerResize"><l:SplitPane requiredParentWidth="100"><l:layoutData><l:SplitterLayoutData size="30%" /></l:layoutData><Panel headerText="Minimum parent width 600"><Buttontext="Area 2"width="50%"type="Attention"/></Panel></l:SplitPane><l:SplitPane requiredParentWidth="800"><l:layoutData><l:SplitterLayoutData size="70%" /></l:layoutData><Page title="Minimum parent width 800"><Buttontext="Area 3"width="50%"type="Emphasized"/><footer><OverflowToolbar id="otb3"><Label text="Buttons:" /><ToolbarSpacer /><Buttontext="New"type="Transparent"/><Buttontext="Open"type="Transparent"/><Buttontext="Save"type="Transparent"/><Buttontext="Save as"type="Transparent"/><Buttontext="Cut"type="Transparent"/><Buttontext="Copy"type="Transparent"/><Buttontext="Paste"type="Transparent"/><Buttontext="Undo"type="Transparent"/></OverflowToolbar></footer></Page></l:SplitPane></l:PaneContainer></l:PaneContainer></l:ResponsiveSplitter></Panel>
- Controller
onRootContainerResize: function (oEvent) {var aOldSizes = oEvent.getParameter("oldSizes"),aNewSizes = oEvent.getParameter("newSizes"),sMessage = "Root container is resized.";if (aOldSizes && aOldSizes.length) {sMessage += "\nOld panes sizes = [" + aOldSizes + "]";}sMessage += "\nNew panes sizes = [" + aNewSizes + "]";MessageToast.show(sMessage);},onInnerContainerResize: function (oEvent) {var aOldSizes = oEvent.getParameter("oldSizes"),aNewSizes = oEvent.getParameter("newSizes"),sMessage = "Inner container is resized.";if (aOldSizes && aOldSizes.length) {sMessage += "\nOld panes sizes = [" + aOldSizes + "]";}sMessage += "\nNew panes sizes = [" + aNewSizes + "]";MessageToast.show(sMessage);}
相关文章:
[UI5 常用控件] 06.Splitter,ResponsiveSplitter
文章目录 前言1. Splitter1.1 属性 2. ResponsiveSplitter 前言 本章节记录常用控件Splitter,ResponsiveSplitter。主要功能是分割画面布局。 其路径分别是: sap.ui.layout.Splittersap.ui.layout.ResponsiveSplitter 1. Splitter 1.1 属性 orientation &#x…...
C遗漏知识(个人向)
之前C语言遗漏的一些。 数据在内存中的存储 原码、反码、补码 整数的2进制表⽰⽅法有三种,即 原码、反码和补码 正整数的原、反、补码都相同。 负整数的三种表⽰⽅法各不相同。 原码:直接将数值按照正负数的形式翻译成⼆进制得到的就是原码。 反码&…...
ERR_SSL_VERSION_OR_CIPHER_MISMATCH
我在namesilo买的域名,coludflare做的解析,华为云的SSL,用宝塔部署的SSL,访问https报错,http却正常: 报错:此网站无法提供安全连接www.hongkong.ioyunxin.top 使用了不受支持的协议。 ERR_SSL_…...
2.5作业
一 、程序阅读题 1、给出下面程序输出结果。 #include <iostream.h> class example {int a; public: example(int b5){ab;} void print(){aa1;cout <<a<<"";} void print()const {cout<<a<<endl;} }; void main() {example x; const e…...
linux系统lvs命令的使用
Lvs命令 LVS ipvsadm 命令的使用LVS-server安装lvs管理软件命令选项 LVS ipvsadm 命令的使用 LVS-server安装lvs管理软件 yum -y install ipvsadm 程序包:ipvsadm(LVS管理工具) 主程序:/usr/sbin/ipvsadm 规则保存工具&#x…...
PoEAA笔记-7.分布策略
本文摘抄自PoEAA,详细信息请阅读本书 7.1 分布对象的诱惑 透明性非常有用,但虽然有很多东西在分布对象中可以是透明的,但性能却不在其中,尽管上面的架构师是为了提高性能而使用分布组件的,但他的设计只会影响性能&…...
Spring Boot 整合 Redis 使用教程
作为开发者,相信大家都知道 Redis 的重要性。Redis 是使用 C 语言开发的一个高性能键值对数据库,是互联网技术领域使用最为广泛的存储中间件,它是「Remote Dictionary Service」的首字母缩写,也就是「远程字典服务」。 Redis 以超…...
用友U8 Cloud ReportDetailDataQuery SQL注入漏洞复现(QVD-2023-47860)
0x01 产品简介 用友U8 Cloud 提供企业级云ERP整体解决方案,全面支持多组织业务协同,实现企业互联网资源连接。 U8 Cloud 亦是亚太地区成长型企业最广泛采用的云解决方案。 0x02 漏洞概述 用友U8 cloud ReportDetailDataQuery 接口处存在SQL注入漏洞,攻击者未经授权可以访…...
docker镜像命令
docker images 列表本机上的镜像 - REPOSITORY:表示镜像的仓库源 - TAG:镜像的标签 - IMAGE ID:镜像 - ID CREATED:镜像创建时间 - SIZE:镜像大小 同一仓库源可以有多个 TAG,代表这个仓库源的不同个版本&am…...
通义千问上线春节新应用,AI帮你免费拍全家福
2月5日,春节将至年味渐浓,阿里云通义千问APP上线多项免费新应用,涵盖全家福、拜新年、万物成龙等图像生成的新玩法,共提供超300套照片模板,用户上传照片即可生成全家福、团圆照、拜年照、千里江山主题照;此…...
RabbitMQ 安装
下载erlang语言: erlang语言 下载RabbitMQ rabbitmq 安装erlang 1.以管理员身份安装erlang 2.弹出框选择next 3.选择安装路径,亦可以安装在默认路径 4.接下来一路点击下一步,无需任何修改,直到 install安装为止ÿ…...
如何让MySQL从部署到稳定运行?
如何让MySQL从部署到稳定运行? 1. 安装MySQL 8保姆级教程 2. 《从菜鸟到大师之路 MySQL 篇》 3. 关于MySQL的66个问题 4. MySQL 的学习资源史上最全 5. 掌握 SQL 这些核心知识点,出去吹牛逼再也不担心了...
go 内存二进制数据操作
go 内存二进制数据操作 go 内存二进制数据直接操作 以数字类型为例 int(linux/macos 为int32,windows 为int64). 如果不清楚可以使用unsafe.Sizeof函数来查看(函数出来的值*8就是int位数) 若不使用内存二进制数据操作,你需要在每次获取数字内容时调用binary.Big…...
Antd+React+react-resizable实现表格拖拽功能
1、先看效果 2、环境准备 在package.json 引入相关的依赖 "dependencies": {"antd": "^5.4.0","react-resizable": "^3.0.4",},"devDependencies": {"types/react": "^18.0.33","types…...
StringBuilder类常用方法(Java)
StringBuilder类常用方法 StringBuilder 是 Java 中常用的字符串缓冲区类,适用于频繁修改字符串的场景。 1. append(): 将指定字符串、字符、布尔值或其他数据类型的表示追加到字符串缓冲区的末尾。 StringBuilder sb new StringBuilder("Hello"); sb.…...
Iceberg从入门到精通系列之二十一:Spark集成Iceberg
Iceberg从入门到精通系列之二十一:Spark集成Iceberg 一、在 Spark 3 中使用 Iceberg二、添加目录三、创建表四、写五、读六、Catalogs七、目录配置八、使用目录九、替换会话目录十、使用目录特定的 Hadoop 配置值十一、加载自定义目录十二、SQL 扩展十三、运行时配置…...
Linux的进程信号
注意:首先需要提醒一个事情,本节提及的进程信号和下节的信号量没有任何关系,请您区分对待。 1.信号概念 1.1.生活中的信号 我们在生活中通过体验现实,记忆了一些信号和对应的处理动作,这意味着信号有以下相关的特点&…...
svn常用命令及过滤文件 global ignore pattern
SVN常用命令详解和global ignore pattern Subversion(SVN)是一个版本控制系统,广泛用于软件开发项目中。它能够追踪文件的变更,并且允许多人在同一个项目中协同工作。以下是一些常用的SVN命令及其用法。 1. 检出代码 要从SVN服…...
【QT+QGIS跨平台编译】之二十九:【HDF5+Qt跨平台编译】(一套代码、一套框架,跨平台编译)
文章目录 一、HDF5介绍二、文件下载三、文件分析四、pro文件一、HDF5介绍 HDF5(层次数据格式第5版)是一种用于存储和组织大量数据的文件格式和技术集合。它由美国国家超级计算应用中心(NCSA)开发,旨在解决复杂数据的存储和分布问题。HDF5支持各种数据类型,能够有效地存储…...
React 中实现拖拽功能-插件 react-beautiful-dnd
拖拽功能在平时开发中是很常见的,这篇文章主要使用react-beautiful-dnd插件实现此功能。 非常好用,附上GitHub地址:https://github.com/atlassian/react-beautiful-dnd 安装及引入 // 1.引入 # yarn yarn add react-beautiful-dnd# npm npm…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框,很难让人不联想到SQL注入,但提示都说了不是SQL注入,所以就不往这方面想了 先查看一下网页源码,发现一段JavaScript代码,有一个关键类ctfs…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中,我们会遇到使用 java 调用 dll文件 的情况,此时大概率出现UnsatisfiedLinkError链接错误,原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用,结果 dll 未实现 JNI 协…...
渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet: https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
基础测试工具使用经验
背景 vtune,perf, nsight system等基础测试工具,都是用过的,但是没有记录,都逐渐忘了。所以写这篇博客总结记录一下,只要以后发现新的用法,就记得来编辑补充一下 perf 比较基础的用法: 先改这…...
MySQL 8.0 OCP 英文题库解析(十三)
Oracle 为庆祝 MySQL 30 周年,截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始,将英文题库免费公布出来,并进行解析,帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...
蓝桥杯 冶炼金属
原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V,是一个正整数,表示每 V V V 个普通金属 O O O 可以冶炼出 …...
STM32HAL库USART源代码解析及应用
STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...
Linux系统部署KES
1、安装准备 1.版本说明V008R006C009B0014 V008:是version产品的大版本。 R006:是release产品特性版本。 C009:是通用版 B0014:是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存:1GB 以上 硬盘…...
AI语音助手的Python实现
引言 语音助手(如小爱同学、Siri)通过语音识别、自然语言处理(NLP)和语音合成技术,为用户提供直观、高效的交互体验。随着人工智能的普及,Python开发者可以利用开源库和AI模型,快速构建自定义语音助手。本文由浅入深,详细介绍如何使用Python开发AI语音助手,涵盖基础功…...
pycharm 设置环境出错
pycharm 设置环境出错 pycharm 新建项目,设置虚拟环境,出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...
