[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…...
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下: struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频
使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...
在rocky linux 9.5上在线安装 docker
前面是指南,后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...
【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密
在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...
ardupilot 开发环境eclipse 中import 缺少C++
目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...
uniapp中使用aixos 报错
问题: 在uniapp中使用aixos,运行后报如下错误: AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)
Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败,具体原因是客户端发送了密码认证请求,但Redis服务器未设置密码 1.为Redis设置密码(匹配客户端配置) 步骤: 1).修…...
学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”
2025年#高考 将在近日拉开帷幕,#AI 监考一度冲上热搜。当AI深度融入高考,#时间同步 不再是辅助功能,而是决定AI监考系统成败的“生命线”。 AI亮相2025高考,40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕,江西、…...
Springboot社区养老保险系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,社区养老保险系统小程序被用户普遍使用,为方…...
HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架,允许使用简单的变成模型跨计算机对大型集群进行分布式处理(1.海量的数据存储 2.海量数据的计算)Hadoop核心组件 hdfs(分布式文件存储系统)&a…...
