首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用SplitPanes构建BorderPane并最小化隐藏节点的区域

SplitPanes是JavaFX中的一个布局容器,用于将界面分割成多个可调整大小的区域。BorderPane是JavaFX中的另一个布局容器,它将界面划分为五个区域:顶部、底部、左侧、右侧和中心。

使用SplitPanes构建BorderPane并最小化隐藏节点的区域,可以通过以下步骤实现:

  1. 导入JavaFX相关的库和类:
代码语言:txt
复制
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.SplitPane;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
  1. 创建一个BorderPane对象:
代码语言:txt
复制
BorderPane borderPane = new BorderPane();
  1. 创建需要放置在BorderPane中的节点,例如左侧节点、右侧节点和中心节点:
代码语言:txt
复制
Node leftNode = new Node();
Node rightNode = new Node();
Node centerNode = new Node();
  1. 创建一个SplitPane对象,并将左侧节点和右侧节点添加到SplitPane中:
代码语言:txt
复制
SplitPane splitPane = new SplitPane();
splitPane.getItems().addAll(leftNode, rightNode);
  1. 设置SplitPane的分割位置和分割条的位置:
代码语言:txt
复制
splitPane.setDividerPositions(0.3); // 设置分割位置为30%
splitPane.setDividerPosition(0, 0.3); // 设置第一个分割条的位置为30%
  1. 将SplitPane作为BorderPane的中心节点:
代码语言:txt
复制
borderPane.setCenter(splitPane);
  1. 将其他节点添加到BorderPane的其他区域,例如顶部和底部:
代码语言:txt
复制
borderPane.setTop(topNode);
borderPane.setBottom(bottomNode);
  1. 创建一个Scene对象,并将BorderPane设置为Scene的根节点:
代码语言:txt
复制
Scene scene = new Scene(borderPane, 800, 600);
  1. 创建一个Stage对象,并将Scene设置为Stage的场景:
代码语言:txt
复制
Stage stage = new Stage();
stage.setScene(scene);
stage.show();

通过以上步骤,我们可以使用SplitPanes构建一个包含BorderPane的界面,并且可以通过调整分割条来调整左侧和右侧节点的大小。如果需要最小化隐藏某个节点的区域,可以将该节点设置为不可见或者从SplitPane中移除。

关于SplitPanes、BorderPane以及其他JavaFX布局容器的更多详细信息和用法,可以参考腾讯云的JavaFX开发文档:JavaFX开发文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JavaFX+Jfoenix 学习笔记(四)–MenuBar菜单栏

最小化及关闭按钮那一行及窗口边框外其它区域(场景) * 场景(Scene)是一个窗口(Stage)必不可少 */ @Override public void start(Stage stage...) throws Exception { // 创建一个标签,用于存放我们Hello World文本,设置让它在父容器中居中 Label label = new Label("Hello")...、最小化及关闭按钮那一行及窗口边框外其它区域(场景) * 场景(Scene)是一个窗口(Stage)必不可少 */ @Override public void start(Stage stage...three-pass-box, #F2F2F2, 1, 0, 0, 0);*/ /*阴影效果*/ } .menu-bar > .container > .menu-button:showing{ /*菜单栏选中移动到二级菜单时一级选中菜单样式...public class MenuBar3 extends Application { /** * Stage:就是你能看到整个软件界面(窗口) * Scene:就是除了窗口最上面有最大、最小化及关闭按钮那一行及窗口边框外其它区域

2.6K20

手拉手JavaFX布局

布局、HyperLink超级链接、Hyper超级、Insets插入、BorderPane布局顶部,底部,左,右或中心区域节点。...每个区域只能有一个节点BorderPane顶部和底部区域允许可调整大小节点占用所有可用宽度。 左边界区域和右边界区域占据顶部和底部边界之间可用垂直空间。...默认情况下,所有边界区域尊重子节点首选宽度和高度。...放置在顶部,底部,左侧,右侧和中心区域节点默认对齐方式如下:顶部: Pos.TOP_LEFT底部: Pos.BOTTOM_LEFT左侧: Pos.TOP_LEFT右侧: Pos.TOP_RIGHT...放置在顶部,底部,左侧,右侧和中心区域节点默认对齐方式如下:顶部: Pos.TOP_LEFT底部: Pos.BOTTOM_LEFT左侧: Pos.TOP_LEFT右侧: Pos.TOP_RIGHT

21400
  • 基于 HTML5 工业互联网云平台监控机房 U 位 顶

    布局结束记得将最外层组件最底层 div 添加到 body 中,HT 组件一般都会嵌入 BorderPane、SplitView 和 TabView 等容器中使用,而最外层HT组件则需要用户手工将...}, 10); } 通过 createData 函数创建节点节点设置父子关系: CMS.prototype.createData = function(data, parent){//...,填写该机架信息 } },{ icon: self.getToolbarIcon('toolbar.edit.rack', function(){// 判断右侧拓扑图上最后选中节点...表单进行显示,同时还设计了两个按钮,“OK”按钮作为执行创建/更改机柜属性,“Cancel”按钮不执行其他操作,只是将对话框隐藏: ?...实现了添加和编辑机柜两个功能,删除机柜功能实现上非常容易,只要将节点从拓扑图和树上移除即可: handleRemoveRack: function(){// 在拓扑图上删除机柜,删除树上此机柜对应节点

    1.5K30

    基于 HTML5 Canvas 工控机柜 U 位动态管理

    布局结束记得将最外层组件最底层 div 添加到 body 中,HT 组件一般都会嵌入 BorderPane、SplitView 和 TabView 等容器中使用,而最外层HT组件则需要用户手工将...}, 10); } 通过 createData 函数创建节点节点设置父子关系: CMS.prototype.createData = function(data, parent){//...,填写该机架信息 } },{ icon: self.getToolbarIcon('toolbar.edit.rack', function(){// 判断右侧拓扑图上最后选中节点...表单进行显示,同时还设计了两个按钮,“OK”按钮作为执行创建/更改机柜属性,“Cancel”按钮不执行其他操作,只是将对话框隐藏: ?...实现了添加和编辑机柜两个功能,删除机柜功能实现上非常容易,只要将节点从拓扑图和树上移除即可: handleRemoveRack: function(){// 在拓扑图上删除机柜,删除树上此机柜对应节点

    2.4K40

    原 快速创建 HTML5 Canvas 电

    五个区域位置摆放子组件, 子组件可为 HT 框架提供组件,也可为 HTML 原生组件,子组件以 position 为 absolute 方式进行绝对定位。...BorderPane、SplitView 和 TabView 等容器中使用,而最外层 HT 组件则需要用户手工将 getView() 返回底层 div 元素添加到页面的 DOM 元素中,这里需要注意是...属性 displayName: '隐藏这个节点', accessType: 'attr',//如name为hidden,采用getAttr('hidden...}, { button:{//设置了该属性后HT将根据属性值自动构建ht.widget.Button对象,保存在element属性上...自动布局 最后说一下整个界面节点排布,HT 中 autolayout 自动布局组件,即根据节点和连线关系,提供多种类型算法进行自动排布节点位置。

    1.4K20

    HT for Web列表和3D拓扑组件拖拽应用

    ,在矢量中通过clip属性定义裁切区域,效果就是超出该裁切区域内容将被隐藏。...这时候,我想到了BorderPane组件,将List组件放在左边,将3D拓扑组件放在右边: var borderPane = new ht.widget.BorderPane(); borderPane.setLeftView...接下来就是今天重头戏了,该如何实现拖拽List上节点到3D拓扑上,实现节点图标吸附到3D拓扑图元上呢,我给大家细细道来。 ?...第一步,我们来实现鼠标附带图标的效果,在拖拽ListView节点时,在鼠标下方增加一个该节点缩略图: 思路是这样: 1....在prepare状态时获取当前拖拽节点ProductId属性,通过调用ht.Default.toCanvas()方法将当前拖拽节点结合矢量productIcon获得一个canvas对象; 2.

    82920

    HT for Web列表和3D拓扑组件拖拽应用

    ,在矢量中通过clip属性定义裁切区域,效果就是超出该裁切区域内容将被隐藏。...这时候,我想到了BorderPane组件,将List组件放在左边,将3D拓扑组件放在右边: var borderPane = new ht.widget.BorderPane(); borderPane.setLeftView...接下来就是今天重头戏了,该如何实现拖拽List上节点到3D拓扑上,实现节点图标吸附到3D拓扑图元上呢,我给大家细细道来。 ?...第一步,我们来实现鼠标附带图标的效果,在拖拽ListView节点时,在鼠标下方增加一个该节点缩略图: 思路是这样: 1....在prepare状态时获取当前拖拽节点ProductId属性,通过调用ht.Default.toCanvas()方法将当前拖拽节点结合矢量productIcon获得一个canvas对象; 2.

    1.1K60

    Java FX制作小游戏

    root.getChildren().add(character); // ... } // ...}使用上述代码,我们创建了一个蓝色矩形作为游戏角色,并将其添加到游戏窗口节点中...使用Java FX制作一个基于键盘操作小游戏,类似于打方块游戏,让玩家通过操作键盘控制角色移动消除方块。...此外,通过使用Timeline和KeyFrame实现了游戏循环,使得角色移动动画可以持续播放。JavaFX是用于构建富客户端应用程序Java技术。...Scene可以根据需要设置宽度和高度,并将根节点(Root Node)设置为场景内容,从而构建应用程序用户界面。Scene还可以用于处理鼠标和键盘事件,支持CSS样式和动画效果。...常用布局类包括FlowPane、HBox、VBox、BorderPane、GridPane等。布局类可以根据不同规则自动调整组件位置和大小,以适应不同窗口尺寸。

    34510

    基于 HTML5 Canvas 3D 模型列表贴图

    少量图片对于我们赋值是没有什么难度,但是如果图片量大的话,我们肯定希望能很直接地显示在界面上供我们使用,再就是排放位置等等,这些都需要比较直观操作,在实际应用中会让我们省很多力以及时间。...(toolbar);//将 toolbar 放置到面板中顶部 borderPane.setLeftView(listView, 350); //将 listView 放置到面板中左侧 borderPane.setCenterView...',//图片始终保持原始宽高比例不变化,尽量填充满矩形区域 rect: [0, 0, 50, 50],//指定组件绘制在矢量中矩形边界 [x, y, width, height...,如果不存在,则返回-1 } return true; });  第三个部分,右侧 3d 场景,利用是 HT 三维组件 ht.graph3d.Graph3dView,然后在 3d 场景上添加两个节点...icon 图标拖拽到 3d 中节点上,作为贴图。

    1.5K100

    基于 HTML5 Canvas 3D 模型贴图问题

    之前注意到一个例子,但是一直没有沉下心来看这个例子到底有什么优点,总觉得就是一个 list 列表,也不知道右边 3d 场景放两个节点是要干嘛,今天突然想起来就仔细地看了一下这个例子代码,实际操作中应该还是有用处...首先,创建场景,HT 中有一个 BorderPane 面板组件是拿来页面排布,可以排布 html 标签,也可以排布 HT 组件,这里我们将整个页面分为三个部分,顶部工具条 toolbar、左侧列表...(toolbar);//将 toolbar 放置到面板中顶部 borderPane.setLeftView(listView, 350); //将 listView 放置到面板中左侧 borderPane.setCenterView...',//图片始终保持原始宽高比例不变化,尽量填充满矩形区域 rect: [0, 0, 50, 50],//指定组件绘制在矢量中矩形边界 [x, y, width, height...icon 图标拖拽到 3d 中节点上,作为贴图。

    1K20

    基于 HTML5 OpenLayers3 实现 GIS 电信资源管理系统

    使用 OpenLayers 前只需要引入相关类库以及 css 文件: <script...js 库,有着各自交互系统和坐标系,首先我们将某些我们需要获取在 HT 上做交互事件停止事件传播到 OpenLayers 上: // 拖拽 node 时不移动地图 var stopGraphPropagation...值得注意一点是,我们在上面对节点在电信 GIS 地图视图投影中坐标进行了数据存储,但是这个方法对于 Shape 类型节点来说不太合适,因为地图上一般都是用点围成区域面,勾勒出某个国家或者某个城市轮廓...insertBefore 在指定已有子节点(参数二)之前插入新节点(参数一) 对数据容器增删变化事件进行监听,通过监听当前加入数据容器节点类型,将当前节点像素坐标转为地图视图投影中坐标存储在节点业务属性...} if (data instanceof ht.Shape) { var points = data.toPoints();// 构建一个新

    3.8K60

    3D拓扑自动布局之Web Workers篇

    最近玩了玩HT弹力自动布局插件挺有意思,特别在平板上Touch方式拖拽三维空间图元节点时,对我这种控制欲较强者很有满足感。 ?...以下是页面部分代码,通过new Worker('workderjs')构建Worker后台运行对象,通过worker.addEventListener('message', ..)监听后台自动布局后派发图元位置信息进行更新...ht.graph3d.Graph3dView(dataModel); toolbar = new ht.widget.Toolbar(items); borderPane...= new ht.widget.BorderPane(); borderPane.setTopView(toolbar); borderPane.setCenterView...,这个例子纯粹为了玩玩Web Workers,这样折腾性能并不会提高,甚至因为来回序列化更费性能,Web Worker可以使用场景并不太多,比较适合纯数学运算业务逻辑,同时还需要注意跑在Worker

    1.5K100

    原 基于HTML5 Canvas WebG

    工业方面制作图表,制作模型方面运用到 3d 模型是非常多,在一个大环境中,构建无数个相同或者不同模型,构建起来对于程序员来说也是一件相当头疼事情,我们利用 HT 帮大家解决了很大难题,无数个例子可在官网上查找到...ht.widget.BorderPane 将界面分成上面、中间和下面。...= new ht.widget.BorderPane();//面板组件 borderPane.setTopView(toolbar);//toolbar 放在上部 borderPane.setCenterView...,也就是说 ht.Default.parseObj 函数中第三个参数所带控制信息在 ht.Default.loadObj 函数中第三个参数 params 中都可以使用,并且添加了 sync 和 finishFunc...toolbar.v('size', 50*t); } }); } } 因为“树”部分我们只用了两个主节点

    75130

    基于 HTML5 工业互联网 3D 可视化应用

    /guide/guide/core/borderpane/ht-borderpane-guide.html)、SplitView(https://hightopo.com/guide/guide/core...我一开始使用时候就是遗漏了对 dm 数据容器过滤,因为场景不大,所以一开始没有感觉,后来加了灯光后很重,就立马出现问题了,才发现遗漏了对 data 过滤判断。...this.getValue());// 获取灯节点设置是否关闭灯光效果,light.disabled 属性默认为false,可设置为true关闭灯效果 } } }, {...点击隐藏/显示属性窗口 上面说到了事件监听,既然同为点击事件,我们就在一个监听事件里面进行具体操作即可,在上面的 if (e.kind === 'clickData') 判断中添加显示/隐藏属性窗口逻辑...通过 tag 获取场景中对应属性窗口节点,此节点为一个面板,相当于六面体有六面,这个节点类型就只有一面,通过设置属性 shape3d.image 设置此节点图片为 tooltips.json

    1.7K20

    达观桂洪冠:海量文本中挖掘人物关联关系核心技术介绍

    图2 人物关联关系挖掘技术结构通联关系挖掘通过查找选定多个话单人物,对多人物之间通联关系建立网络(如图2),构建人物之间关系网络,计算话单人物间亲密值权重。...基于构建关系网络可以做以下统计分析挖掘:图3 多人物关系网络示意图01关键节点发现在构建关系网络中,以用户为节点,通过PageRank算法量化不同粒度网络结构中不同主体地位,发掘关系网络中关键节点...04搜索共同联系人根据已知多个人物搜索其共同联系人,从而分析人物之间关联性,发现隐藏关系信息。...问题转化为最小化 J(A,β):04基于节点收缩关键节点确定采用节点收缩方法,其原理(如图4)如下:假设Vi是网络G(V,E)中一个节点,所谓节点收缩是指将节点Vi与其相邻节点进行融合,即用一个新节点...因此,拟借鉴上一部分对关键节点发现探索,研究如何对某些包含关键结点路径进行分析,研究如何使用特定模型判断是否为关键路径。

    73620

    原 3D拓扑自动布局之Web Worker

    最近玩了玩HT弹力自动布局插件挺有意思,特别在平板上Touch方式拖拽三维空间图元节点时,对我这种控制欲较强者很有满足感。...以下是页面部分代码,通过new Worker('workderjs')构建Worker后台运行对象,通过worker.addEventListener('message', ..)监听后台自动布局后派发图元位置信息进行更新...= new  ht.widget.BorderPane();       borderPane.setTopView(toolbar...);       borderPane.setCenterView(g3d);        ...,这个例子纯粹为了玩玩Web Workers,这样折腾性能并不会提高,甚至因为来回序列化更费性能,Web Worker可以使用场景并不太多,比较适合纯数学运算业务逻辑,同时还需要注意跑在Worker

    57030

    从自编码器到变分自编码器(其一)

    下一篇,我将讨论基于这些概念构建变分自编码器,以构建更强大模型。 欠完备自编码器 构建自编码器最简单架构是限制网络隐藏层中存在节点数量,进而限制可以通过网络传输信息量。...即使“瓶颈层”只有一个隐藏节点,只要编码器和解码器模型有足够容量来学习一些可以将数据映射到索引任意函数,我们模型仍然可以记住训练数据。...稀疏自编码器 稀疏自编码器为我们提供了一种不需要减少我们隐藏节点数量,就可以引入信息瓶颈方法。相反,我们将构造我们损失函数,以惩罚层中激活。...这样做结果是,我们使网络各个隐藏节点对输入数据特定属性敏感。欠完备自编码器使用整个网络进行每次观察,而稀疏自编码器将被迫根据输入数据选择性地激活网络区域。...我们可以将ρ描述为一个伯努利随机变量分布来,我们可以利用KL散度(下展开)来比较理想分布在所有隐藏节点观察分布。 ?

    1.2K50

    原 Web SCADA 电力接线图工控组态

    borderPane 跟 splitView 作用有些相似,但是在这个 Demo 中布局,结合这两种组件,代码看起来会更加清爽。...borderPane = new ht.widget.BorderPane();//边框面板 leftSplit = new ht.widget.SplitView(palette, borderPane...(toolbar);//设置边框面板顶部组件为 toolbar borderPane.setTopHeight(30); borderPane.setCenterView(rulerFrame);//...但是我们使用这个组件最重要一个原因是它能够拖拽节点,但是因为我们拖拽后需要在 graphView 拓扑组件中生成一个新节点显示在拓扑图上,所以我将拖拽部分逻辑写在了 graphView 拓扑组件初始化函数中...和Drop事件启用模拟拖拽事件 if(ht.Default.containedInView(e, g2d)){//判断交互事件所处位置是否在View组件之上

    3.4K71

    基于HTML5 Canvas WebGL制作分离摩托车

    工业方面制作图表,制作模型方面运用到 3d 模型是非常多,在一个大环境中,构建无数个相同或者不同模型,构建起来对于程序员来说也是一件相当头疼事情,我们利用 HT 帮大家解决了很大难题,无数个例子可在官网上查找到...ht.widget.BorderPane 将界面分成上面、中间和下面。...= new ht.widget.BorderPane();//面板组件 5 borderPane.setTopView(toolbar);//toolbar 放在上部 6 borderPane.setCenterView...,也就是说 ht.Default.parseObj 函数中第三个参数所带控制信息在 ht.Default.loadObj 函数中第三个参数 params 中都可以使用,并且添加了 sync 和 finishFunc...toolbar.v('size', 50*t); 10 } 11 }); 12 } 13 } 因为“树”部分我们只用了两个主节点

    1.2K50
    领券