23 タイトル付きペインとアコーディオン
この章では、JavaFXアプリケーションでタイトル付きペインとアコーディオンの組合せを使用する方法について説明します。
タイトル付きペインは、タイトルがあるパネルです。これは、開閉が可能であるとともに、UIコントロールやイメージ、およびレイアウト・コンテナに追加された要素のグループなどの任意のNode
をカプセル化できます。
タイトル付きペインは、複数のペインを作成してこれらを一度に表示できるアコーディオン・コントロールを使用してグループ化できます。図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に示すコード・フラグメントを使用すると、複数のコントロールを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に示す出力が表示されます。
タイトル付きペインが開閉する方法は定義できます。デフォルトでは、すべてのタイトル付きペインは縮小可能で、それらの動きはアニメーション化されています。アプリケーションでタイトル付きペインを閉じることを禁止するには、setCollapsible
メソッドでfalse
値を使用します。また、setAnimated
メソッドでfalse
値を使用することにより、アニメーション化して開く動作を無効にすることもできます。例23-3に示すコード・フラグメントでは、これらのタスクを実行しています。
アコーディオンへのタイトル付きペインの追加
アプリケーションでは、タイトル付きペインをスタンドアロン要素として使用することも、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-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"が表示されています。
「Leaves」タイトル付きペインを展開すると、図23-6に示すように、「Attachment」ラベルに"Leaves.jpg"が表示されます。
図23-6 「Leaves」タイトル付きペインが展開されたTitledPaneSampleアプリケーション

「図23-6 「Leaves」タイトル付きペインが展開されたTitledPaneSampleアプリケーション」の説明
TitledPane
およびAccordion
クラスは両方ともNode
クラスの拡張であるため、これらに視覚効果または変換を適用できます。また、CSSスタイルを適用してコントロールの外観を変更することもできます。
関連APIドキュメント