23 タイトル付きペインとアコーディオン

この章では、JavaFXアプリケーションでタイトル付きペインとアコーディオンの組合せを使用する方法について説明します。

タイトル付きペインは、タイトルがあるパネルです。これは、開閉が可能であるとともに、UIコントロールやイメージ、およびレイアウト・コンテナに追加された要素のグループなどの任意のNodeをカプセル化できます。

タイトル付きペインは、複数のペインを作成してこれらを一度に表示できるアコーディオン・コントロールを使用してグループ化できます。図23-1は、3つのタイトル付きペインを組み合せたアコーディオン・コントロールを示しています。

図23-1 3つのタイトル付きペインがあるアコーディオン

「図23-1 3つのタイトル付きペインがあるアコーディオン」の説明

JavaFX SDK APIのAccordionおよびTitledPaneクラスを使用して、これらのコントロールをアプリケーション内で実装します。

タイトル付きペインの作成

TitledPaneコントロールを作成するには、タイトルおよび一部のコンテンツを定義します。これを行うには、TitledPaneの2パラメータ・コンストラクタを使用するか、setTextおよびsetContentメソッドを適用します。両方の方法を例23-1に示します。

例23-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"));

どちらかのコード・フラグメントを使用してアプリケーションをコンパイルして実行すると、図23-2に示すコントロールが生成されます。

図23-2 ボタンがあるタイトル付きペイン

「図23-2 ボタンがあるタイトル付きペイン」の説明

タイトル付きペインには最小、最大または優先の高さを明示的に設定しないでください。設定すると、タイトル付きペインを開閉するときに予期しない動作につながる可能性があります。

例23-2に示すコード・フラグメントを使用すると、複数のコントロールをGridPaneレイアウト・コンテナに格納することにより、これらのコントロールがタイトル付きペインに追加されます。

例23-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);

このコード・フラグメントを使用してアプリケーションをコンパイルして実行すると、図23-3に示す出力が表示されます。

図23-3 複数のコントロールが含まれるタイトル付きペイン

「図23-3 複数のコントロールが含まれるタイトル付きペイン」の説明

タイトル付きペインが開閉する方法は定義できます。デフォルトでは、すべてのタイトル付きペインは縮小可能で、それらの動きはアニメーション化されています。アプリケーションでタイトル付きペインを閉じることを禁止するには、setCollapsibleメソッドでfalse値を使用します。また、setAnimatedメソッドでfalse値を使用することにより、アニメーション化して開く動作を無効にすることもできます。例23-3に示すコード・フラグメントでは、これらのタスクを実行しています。

例23-3 タイトル付きペインのスタイルの調整

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

アコーディオンへのタイトル付きペインの追加

アプリケーションでは、タイトル付きペインをスタンドアロン要素として使用することも、Accordionコントロールを使用してこれらを1つのグループに結合することもできます。アコーディオンには最小、最大または優先の高さを明示的に設定しないでください。設定すると、タイトル付きペインの1つを開くときに予期しない動作につながる可能性があります。

複数のタイトル付きペインを1つのアコーディオンに追加するのは、複数のトグル・ボタンを1つのトグル・グループに追加するのと似ています。1つのアコーディオンで一度に開けるタイトル付きペインは1つのみです。例23-4では、3つのタイトル付きペインを作成し、これらをアコーディオンに追加しています。

例23-4 3つのタイトル付きペインがあるアコーディオン

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オブジェクトとして定義されています。タイトル付きペインは、getPanesおよびaddAllメソッドを使用してアコーディオンに追加されています。 addAllメソッドのかわりにaddメソッドを使用すると、単一のタイトル付きペインを追加できます。

デフォルトでは、アプリケーションが起動すると、タイトル付きペインはすべて閉じられます。例23-4のsetExpandedPaneでは、図23-4に示すように、サンプルを実行すると、Applesの画像が表示されたタイトル付きペインが開くよう指定しています。

図23-4 3つのタイトル付きペインがあるアコーディオン

「図23-4 3つのタイトル付きペインがあるアコーディオン」の説明

タイトル付きペインがあるアコーディオンのイベントの処理

タイトル付きペインとアコーディオンを使用して、アプリケーション内で異なるデータを表示できます。例23-5では、GridPaneレイアウト・コンテナがあるつ1つのスタンドアロンのタイトル付きペインと、アコーディオンを使用して結合された3つのタイトル付きペインを作成しています。スタンドアロンのタイトル付きペインには、電子メール・クライアントのUI要素が含まれています。アコーディオンにより、「Grid」タイトル付きペインの「Attachment」フィールドに表示されるイメージの選択が可能になります。

例23-5 アコーディオンのChangeListenerの実装

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();
    }
}

ユーザーがアコーディオン内のタイトル付きペインを開くと、アコーディオンのexpandedPanePropertyが変更されます。アコーディオン内で展開したタイトル付きペインを使用して、アタッチメントのファイル名を作成します。このファイル名は、対応するLabelオブジェクトのテキストとして設定されます。

図23-5に、アプリケーションが起動後にどのように表示されるかを示します。タイトル付きペインが1つも選択されていないため、アタッチメント・ラベルには"N/A"が表示されています。

図23-5 TitledPaneSampleアプリケーションの初期表示