javaFX学习之Accordion和TitledPane组件的配合使用
原文链接:DOC-03-23 标题面板(Titled Pane)和可折叠面板(Accordion) | JavaFX中文资料
javaFX应用程序中组合使用Accordion和TitlePane
TitledPane是一个带标题的面板。它可以被打开或者关闭,并且可以封装任何Node,例如UI控件或者图片,以及添加到布局容器中的界面元素组
TitledPane可以使用Accordion控件来进行分组,Accordion控件可以让你创建多个面板并且每次显示其中一个
使用JavaFX API中的Accordion 和TitledPane 类来在你的应用程序中实现上述控件
创建Titled Pane
要创建一个TitledPane 控件需要为其定义一个标题和一些内容。要完成此任务,你可以使用TitledPane 类的带两个参数的构造方法,或者使用setText和setContent 方法
定义一个TitledPane对象
第一种方式 //使用两个参数的构造函数
TitledPanetp = new TitledPane("My Titled Pane", new Button("Button"));
第二种方式 //使用方法
TitledPanetp = new TitledPane();
tp.setText("My Titled Pane");
tp.setContent(new Button("Button"));
请不要明确地设置Titled Pane的最小、最大或者首选高度,因为这可能导致其打开或者关闭时出现异常行为
你可以定义Titled Pane的打开或者关闭方式。.默认情况下,所有的Titled Pane都是可折叠的,并且展开或折叠时会带有动画效果。如果你的应用程序希望禁止关闭Titled Pane,可以使用setCollapsible 方法并设置参数值为false。你也可以通过setAnimated 方法并设置参数值为false来关闭动画效果
调整Titled Pane的风格
TitledPanetp = new TitledPane();
//禁止关闭
tp.setCollapsible(false);
//禁止动画
tp.setAnimated(false);
————————————————————————————
添加TitledPane到Accordion组件中
在你的应用程序中,你可以将TitledPane作为一个独立的元素来使用,也可以使用Accordion 控件将其组合到一个组中。请不要明确地设置Accordion组件的最小、最大和首选高度,因为这可能导致在其中某个TitledPane组件打开时出现异常行为。
向Accordion中添加多个TitledPane组件的方法与向ToggleGroup中添加多个ToggleButton组件很类似:在一个Accordion中同一时间只能打开一个TitledPane组件。创建了三个TitledPane组件,并将它们添加到一个Accordion组件中。
Accordion和三个TitledPane
import javafx.application.Application; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.control.Accordion; import javafx.scene.control.TitledPane; import javafx.scene.image.Image; import javafx.scene.image.ImageView; import javafx.stage.Stage;public class TitledPaneSample extends Application {final String[] imageNames = new String[]{"选项一", "选项二", "选项三"};final Image[] images = new Image[imageNames.length];//图片对象final ImageView[] pics = new ImageView[imageNames.length];//图片视图区域显示对象final TitledPane[] tps = new TitledPane[imageNames.length];//创建TitledPane类型对象public static void main(String[] args) {launch(args);}@Override public void start(Stage stage) {stage.setTitle("舞台标题");//设置舞台标题对象Scene scene = new Scene(new Group(), 80, 180);//创建场景对象final Accordion accordion = new Accordion ();//创建手风琴对象for (int i = 0; i < imageNames.length; i++) {images[i] = newImage(getClass().getResourceAsStream("folder_16.jpg"));//加载图片pics[i] = new ImageView(images[i]);//创建图片视图区域对象tps[i] = new TitledPane(imageNames[i],pics[i]);//给titledPane数组赋值}accordion.getPanes().addAll(tps);//手风琴组件中添加TitledPane对象accordion.setExpandedPane(tps[0]);//给手风琴组件添加titledPane类型对象Group root = (Group)scene.getRoot();//场景上节点组对象的获取root.getChildren().add(accordion);//节点组上添加手风琴组件对象stage.setScene(scene);//舞台设置场景对象stage.show();//舞台播放} }
三个TitledPane都是在一个循环中被创建的。每个TitledPane的内容都被定义为一个ImageView对象。这些TitledPane通过使用getPanes和addAll 方法添加到Accordion组件中。你可以使用add方法替代addAll方法来添加单个TitledPane ,
在默认情况下,在应用程序启动时所有的TitledPane都是关闭状态的
setExpandedPane 方法指定带有Apples图片的TitledPane会在应用程序启动时被打开
Accordion和三个TitledPane
import javafx.application.Application; import javafx.beans.value.ObservableValue; import javafx.geometry.Insets; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.control.Accordion; import javafx.scene.control.Label; import javafx.scene.control.TextField; import javafx.scene.control.TitledPane; import javafx.scene.image.Image; import javafx.scene.image.ImageView; import javafx.scene.layout.GridPane; import javafx.scene.layout.HBox; import javafx.stage.Stage;public class TitledPaneTest extends Application {final String[] imageNames = new String[]{"选项1", "选项2", "选项3"}; //创建图片名称数组final Image[] images = new Image[imageNames.length];//创建图片数组final ImageView[] pics = new ImageView[imageNames.length];//创建视图区域数组final TitledPane[] tps = new TitledPane[imageNames.length];//创建标题模板数组final Label label = new Label("N/A");//穿件标签对象public static void main(String[] args) {launch(args);}@Override public void start(Stage stage) {stage.setTitle("TitledPane");//设置舞台标题对象Scene scene = new Scene(new Group(), 800, 250);//创建场景对象,并挂载一个节点组对象// --- GridPane containerTitledPane gridTitlePane = new TitledPane();//标题面板对象的创建GridPane grid = new GridPane();//网格面板对象grid.setVgap(4);//网格布局对象垂直间隙距离的设置grid.setPadding(new Insets(5, 5, 5, 5));//网格布局对象内边距的设置grid.add(new Label("至: "), 0, 0);//网格布局对象第一行第一列添加label标签grid.add(new TextField(), 1, 0);//网格布局对象添加TextField对象到第一行第二列上grid.add(new Label("抄送: "), 0, 1);//网格布局对象第二行第一列添加label标签grid.add(new TextField(), 1, 1);//网格布局对象第二行第二列添加label标签grid.add(new Label("主题: "), 0, 2);//网格布局对象第三行第1列添加label标签grid.add(new TextField(), 1, 2);//网格布局对象第三行第1列添加TextField对象grid.add(new Label("Attachment: "), 0, 3);//网格布局对象中的第四行第1列放置一个标签label对象grid.add(label,1, 3);//网格中第4行第2列中添加label标签gridTitlePane.setText("Grid");//给titlePane对象上添加标题gridTitlePane.setContent(grid);//titlePane对象中添加gridPane布局对象// --- Accordionfinal Accordion accordion = new Accordion ();//创建一个手风琴对象for (int i = 0; i < imageNames.length; i++) {images[i] = newImage(getClass().getResourceAsStream("folder_16.jpg"));//创建图片对象pics[i] = new ImageView(images[i]);//加载显示图片显示区域对象tps[i] = new TitledPane(imageNames[i],pics[i]);//titlePane对象的创建并且装载图片显示区域对象}accordion.getPanes().addAll(tps);//手风琴组件添加titledPane组件对象accordion.expandedPaneProperty().addListener(//手风琴组件点击扩展属性事件处理回调机制(ObservableValue<? extends TitledPane> ov, TitledPane old_val,TitledPane new_val) -> {if (new_val != null) {label.setText(accordion.getExpandedPane().getText() +".jpg");//将label标签的文本域添加accordion所展开的pane中的text文本内容}});HBox hbox = new HBox(10);//水平盒子布局器hbox.setPadding(new Insets(20, 0, 0, 20));//设置水平盒子的内边距hbox.getChildren().setAll(gridTitlePane, accordion);//水平盒子上添加titledPane和手风琴组件Group root = (Group)scene.getRoot();//场景上添加节点组对象root.getChildren().add(hbox);//添加水平盒子布局对象到节点组容器中stage.setScene(scene);//舞台挂载场景stage.show();//舞台展现} }
当用户打开Accordion中的一个Titled Pane时,Accordion的expandedPaneProperty 属性将会被改变。
Accordion中展开的Titled Pane会被用于构建一个Attachment的文件名。这个文件名会被设置为对应的Label对象的文本
应用程序启动后的显示效果。Attachment Label的内容是“N/A”,因为此时还没有Titled Pane被选中
因为TitledPane 和Accordion 类都是对Node类的扩展,所以你可以对它们应用视觉特效或者变换。你也可以使用CSS来改变控件的显示效果
javaFX学习之Accordion和TitledPane组件的配合使用相关推荐
- Ui学习笔记---EasyUI的EasyLoader组件源码分析
Ui学习笔记---EasyUI的EasyLoader组件源码分析 技术qq交流群:JavaDream:251572072 1.问题1:为什么只使用了dialog却加载了那么多的js http: ...
- amazeui学习笔记--css(常用组件4)--关闭按钮Close
amazeui学习笔记--css(常用组件4)--关闭按钮Close 一.总结 1.关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用.对 <a> 或者 <button> ...
- JavaFX学习之道:JavaFX之TableView
TableView表 TableColumn列 构建一个表主要有TableView,TableColumn,ObservableList,Bean. 加入列table.getColumn ...
- Flex Accordion 和 TabNavigator组件浏览器跳转问题
[文章出处]http://xinzy.iteye.com/blog/474778 最近做flex项目的时候,发现退出登陆时URL上会自动加上一个"#"字符,很奇怪,Google+B ...
- React学习:ref调用、组件封装调用-学习笔记
文章目录 React学习:ref调用.组件封装调用-学习笔记 ref调用-string形式 ref调用-回调形式(官方推荐) ref调用-父调子 组件封装调用demo(全选) demo1(单组件) d ...
- amazeui学习笔记--css(常用组件1)--小徽章Badge
amazeui学习笔记--css(常用组件1)--小徽章Badge 一.总结 1.am-badge:添加am-badge来声明小徽章对象 <span class="am-badge a ...
- amazeui学习笔记--css(常用组件5)--评论列表Comment
amazeui学习笔记--css(常用组件5)--评论列表Comment 一.总结 1.am-comment:使用am-comment来声明评论对象,这个是放在article里面的,虽然article ...
- amazeui学习笔记--css(常用组件6)--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
- 【Monica的android学习之路】四大组件的生命周期
[Monica的android学习之路]四大组件的生命周期 1. Service 1.1 启动service 1.1.1 startService 1.1.2 bindService 1.2 死亡回调 ...
最新文章
- easyui 报表合并单元格
- 深入理解Java Stream流水线,学到了!
- 全球大国人工智能实力大比拼与技术发展趋势
- android webview开启html5支持
- altium pcb 信号高亮_Altium Designer PCB的时候 高亮显示引脚连线
- 连接MySQL的10060错误:Can't connect to MySQL server on '*.*.*.*'(10060)
- Android初级教程Activity小案例(计算器乘法运算)
- Log4j配置学习文档之二 处理日滚文件-模拟实现
- 【Oracle】并行等待之PX Deq Credit: need buffer
- Angular通过XHR加载模板而限制使用file://(解决方案)
- Html代码打包后如何修改,html代码打包封装成APP教程
- “形象代言人”与“抽风式管理”
- 基于强化学习和析取图模型的统一调度框架
- 大学生创新项目管理系统
- 2021-06-31 rockchip rv1126编译说明
- 【汇智学堂】基于Socket实现的网络版梅花易数一撮金游戏
- vue3 倒计时3秒后返回首页
- 一行Python都可以做什么?这35行看懂十行就算入门,全能看懂必是高手
- python爬取王者荣耀皮肤高清图
- 河内塔问题(Hanoi Tower)
热门文章
- Aptina公司设计出1400万像素的高性能1.4微米像素尺寸级相机图像传感器
- 华为鸿蒙系统时钟闪退怎么办,鸿蒙系统时钟闪退
- ERP初阶(七):八十年代的MRPII
- 网页游戏服务器需要多大宽带,顺畅运行一款网游,究竟要多少带宽?
- iTALK---单细胞受配体互作分析及可视化(详细版教程)
- 2017年软件工程第三次作业-2效能分析
- 个人时尚竞聘简历PPT模板
- firefox 添加 表单_将搜索表单添加到Firefox搜索栏
- Powerbuilder中Kodak图像扫描控件应用技巧
- 100个暗黑系哑光效果lr/acr预设(含预设导入教程)