本章主要介绍如何在应用中结合标题面板和可折叠面板。

一个标题面板会有一个标题。它可封装任何的Node，比如UI控件和图片，或者布局容器中的一组元素。

面板也可以是可折叠的控件，这样就允许我们创建多个面板，而我们在某个时间只看其中一个。如下图：

我们使用According和TitledPane类来实现这些控件。

 

创建标题面板

创建见标题面板需要定义标题和内容，我们可以使用两个参数的构造函数，或者使用setText和setContent方法。

//using a two-parameter constructor
TitledPane tp = new TitledPane("My Titled Pane", new Button("Button"));
//applying methods
TitledPane tp = new TitledPane();
tp.setText("My Titled Pane");
tp.setContent(new Button("Button"));

 

运行如下所示：

因为没有设置最小、最大值以及高度，所以当打开或者关闭面板的时候会出现一些不可预期的行为。下面的代码向面板中加入了一个GridPane。

TitledPane gridTitlePane = new TitledPane();
GridPane grid = new GridPane();
grid.setVgap(4);
grid.setPadding(new Insets(5, 5, 5, 5));
grid.add(new Label("First Name: "), 0, 0);
grid.add(new TextField(), 1, 0);
grid.add(new Label("Last Name: "), 0, 1);
grid.add(new TextField(), 1, 1);
grid.add(new Label("Email: "), 0, 2);
grid.add(new TextField(), 1, 2);        
gridTitlePane.setText("Grid");
gridTitlePane.setContent(grid);

 

编译运行如下图所示：

你可以定义标题面板打开或关闭的方法。默认，标题面板是可折叠的。如果你的应用禁止关闭，那么可以调用setCollapsible方法。如果想禁止打开，可以调用setAnimated方法。

TitledPane tp = new TitledPane();
//prohibit closing
tp.setCollapsible(false);
//prohibit animating
tp.setAnimated(false);

 

可折叠的多个标题面板

在你的应用中，你可以单独使用标题面板，你也可以添加多个标题面板到According控件中。代码如下：

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[]{"Apples", "Flowers", "Leaves"};
    final Image[] images = new Image[imageNames.length];
    final ImageView[] pics = new ImageView[imageNames.length];
    final TitledPane[] tps = new TitledPane[imageNames.length];
           
    public static void main(String[] args) {
        launch(args);
    }
 
    @Override public void start(Stage stage) {
        stage.setTitle("TitledPane");
        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(imageNames[i] + ".jpg"));
            pics[i] = new ImageView(images[i]);
            tps[i] = new TitledPane(imageNames[i],pics[i]); 
        }   
        accordion.getPanes().addAll(tps);
        accordion.setExpandedPane(tps[0]);
 
        Group root = (Group)scene.getRoot();
        root.getChildren().add(accordion);
        stage.setScene(scene);
        stage.show();
    }
}

 

通过一个循环创建了3个标题面板。每一个面板中包含了一个ImageView对象.这些标题面板被加入到一个According控件中.编译运行如下图:

处理事件

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 TitledPaneSample extends Application {
    final String[] imageNames = new String[]{"Apples", "Flowers", "Leaves"};
    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("To: "), 0, 0);
        grid.add(new TextField(), 1, 0);
        grid.add(new Label("Cc: "), 0, 1);
        grid.add(new TextField(), 1, 1);
        grid.add(new Label("Subject: "), 0, 2);
        grid.add(new TextField(), 1, 2);        
        grid.add(new Label("Attachment: "), 0, 3);
        grid.add(label,1, 3);
        gridTitlePane.setText("Grid");
        gridTitlePane.setContent(grid);
        
        // --- Accordion
        final Accordion accordion = new Accordion ();                
        for (int i = 0; i < imageNames.length; i++) {
            images[i] = new 
                Image(getClass().getResourceAsStream(imageNames[i] + ".jpg"));
            pics[i] = new ImageView(images[i]);
            tps[i] = new TitledPane(imageNames[i],pics[i]); 
        }   
        accordion.getPanes().addAll(tps);        
        accordion.expandedPaneProperty().addListener(
            (ObservableValue<? extends TitledPane> ov, TitledPane old_val, 
            TitledPane new_val) -> {
                if (new_val != null) {
                    label.setText(accordion.getExpandedPane().getText() +
                            ".jpg");
                }
        });
        
        HBox hbox = new HBox(10);
        hbox.setPadding(new Insets(20, 0, 0, 20));
        hbox.getChildren().setAll(gridTitlePane, accordion);
 
        Group root = (Group)scene.getRoot();
        root.getChildren().add(hbox);
        stage.setScene(scene);
        stage.show();
    }
}

展开其中一个如下图所示：