javaFX学习之Accordion和TitledPane组件的配合使用

最新推荐文章于 2024-09-05 10:05:59 发布

brave_zhao

最新推荐文章于 2024-09-05 10:05:59 发布

阅读量1k

点赞数 2

分类专栏： javaFX 文章标签： ui jquery 前端

原文链接：http://www.javafxchina.net/blog/2015/04/doc03_titledpane_accordion/

版权

javaFX 专栏收录该内容

39 篇文章 6 订阅

订阅专栏

原文链接: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] = new
                    Image(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 container
        TitledPane 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布局对象

        // --- Accordion
        final Accordion accordion = new Accordion ();//创建一个手风琴对象
        for (int i = 0; i < imageNames.length; i++) {
            images[i] = new
                    Image(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来改变控件的显示效果