翻譯自  Titled Pane and Accordion

本章介紹如何在JavaFX應用程式中使用accordion和title窗格的組合。

標題窗格是帶標題的面板。它可以開啟和關閉，它可以封裝任何Node諸如UI控制元件或影象以及新增到佈局容器的元素組。

標題窗格可以使用手風琴控制元件進行分組，這使您可以建立多個窗格並一次顯示一個窗格。圖21-1顯示了一個結合了三個標題窗格的手風琴控制元件。

圖21-1帶有三個標題的摺疊窗格

使用JavaFX SDK API中的Accordion和TitledPane類在應用程式中實現這些控制元件。

建立標題窗格

建立TitledPane控制元件定義標題和一些內容。您可以通過使用類的雙引數建構函式TitledPane或應用setText和setContent方法來完成此操作。兩種方法都顯示在例21-1中。

例21-1宣告TitledPane物件

//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"));
 

使用任一程式碼片段編譯和執行應用程式將生成如圖21-2所示的控制元件。

圖21-2帶按鈕的標題窗格

標題窗格的大小調整為適應其內容的首選大小。您可以新增多行文字並評估結果，如圖21-3所示。

圖21-3帶有一些文字的標題窗格

不要顯式設定標題窗格的最小高度，最大高度或首選高度，因為這可能會在開啟或關閉標題窗格時導致意外行為。

例21-2中顯示的程式碼片段通過將幾個控制元件放入GridPane佈局容器中，將幾個控制元件新增到標題窗格中。

示例21-2帶有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);
 

使用此程式碼片段執行和編譯應用程式時，將顯示如圖21-4所示的輸出。

圖21-4包含多個控制元件的標題窗格

您可以定義標題窗格的開啟和關閉方式。預設情況下，所有標題窗格都是可摺疊的，並且它們的移動是動畫的。如果您的應用程式禁止關閉標題窗格，請使用setCollapsible帶有false值的方法。您還可以通過應用setAnimated帶有false值的方法來禁用動畫開啟。例21-3中顯示的程式碼片段實現了這些任務。

例21-3調整標題窗格的樣式

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

將標題窗格新增到摺疊中

在您的應用程式中，您可以使用標題窗格作為獨立元素，或者可以使用Accordion控制元件將它們組合在一個組中。不要明確設定手風琴的最小，最大或首選高度，因為這可能會在開啟其標題窗格之一時導致意外行為。

向手風琴新增幾個標題窗格類似於向切換組新增切換按鈕：一次只能在手風琴中開啟一個標題窗格。例21-4建立了三個標題窗格並將它們新增到手風琴中。

例21-4摺疊和三個標題窗格

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.scene.paint.Color;
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);
        scene.setFill(Color.GHOSTWHITE);
                               
        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();
    }
}

在迴圈內建立三個標題窗格。每個標題窗格的內容都定義為一個ImageView物件。通過使用getPanes和addAll方法將標題窗格新增到手風琴中。您可以使用該add方法而不是addAll方法新增單個標題窗格。

預設情況下，應用程式啟動時會關閉所有標題窗格。例21-4中的setExpandedPane方法指定在執行樣本時將開啟帶有蘋果圖片的標題窗格，如圖21-5所示。

圖21-5帶有三個標題窗格的摺疊

處理具有標題窗格的摺疊的事件

您可以使用標題窗格和摺疊在應用程式中顯示不同的資料。例21-5建立了一個獨立的標題窗格，其中GridPane包含佈局容器和使用摺疊組合的三個標題窗格。獨立標題窗格包含電子郵件客戶端的UI元素。摺疊使影象的選擇能夠出現在Grid標題窗格的Attachment欄位中。

例21-5為Accordion實現ChangeListener

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
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.scene.paint.Color;
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);
        scene.setFill(Color.GHOSTWHITE);
        
        // --- 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(new 
            ChangeListener<TitledPane>() {
                public void changed(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();
    }
}

當用戶在摺疊中開啟標題窗格時，expandedPaneProperty摺疊會改變。將ChangeListener通知物件此更改，並且摺疊中的擴充套件標題窗格用於構造附件的檔名。此檔名設定為相應Label物件的文字。

圖21-6顯示了應用程式啟動後的外觀。附件標籤包含“N / A”，因為沒有選擇標題窗格。

圖21-6 TitledPaneSample應用程式的初始檢視

如果展開Leaves標題窗格，Attachment標籤將包含“Leaves.jpg”，如圖21-7所示。

圖21-7帶葉子標題窗格的TitledPaneSample應用程式擴充套件

因為TitledPane和Accordion類都是類的擴充套件，所以Node可以對它們應用視覺效果或轉換。您還可以通過應用CSS樣式來更改控制元件的外觀。

相關的API文件 

• TitledPane

• Accordion

• Label

• GridPane

• TextField