ドキュメント



ご意見をお寄せください | 印刷 | PDF | ePub | Mobi
JavaFX: JavaFX UIコンポーネントの操作

15 ツリー表ビュー

この章では、データの階層を制限を設けずに視覚化し、列形式で表示するためのコントロールであるTreeTableViewユーザー・インタフェースのコンポーネントについて説明します。

TreeTableViewコンポーネントはTreeViewコントロールおよびTableViewコントロールと共通する部分が多数ありますが、その機能の特徴を組み合せ、さらに拡張したものです。

図15-1 TreeTableViewコンポーネントのサンプル

図15-1の説明が続きます
「図15-1 TreeTableViewコンポーネントのサンプル」の説明

TreeTableViewコントロールの作成

アプリケーションへのTreeTableViewコンポーネントの基本の実装は、次の手順で実行できます。

  1. ツリー項目を作成します。

  2. ルート要素を作成します。

  3. ツリー項目をルート要素に追加します。

  4. 1つ以上の列を作成します。

  5. セルの内容を定義します。

  6. ツリー表ビューを作成します。

  7. 列をツリー表ビューに割り当てます。

場合によっては、ルート要素を省略または非表示にできます。例15-1では、これらの手順を実装し、簡単なツリー表ビュー・コントロールを作成します。

例15-1 列が1つのTreeTableView

import javafx.application.Application;
import javafx.beans.property.ReadOnlyStringWrapper;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.TreeTableColumn;
import javafx.scene.control.TreeTableColumn.CellDataFeatures;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeTableView;
import javafx.stage.Stage;
 
public class TreeTableViewSample extends Application {
 
    public static void main(String[] args) {
        Application.launch(args);
    }
    
    @Override
    public void start(Stage stage) {
        stage.setTitle("Tree Table View Samples");
        final Scene scene = new Scene(new Group(), 200, 400);
        Group sceneRoot = (Group)scene.getRoot();  
      
        //Creating tree items
        final TreeItem<String> childNode1 = new TreeItem<>("Child Node 1");
        final TreeItem<String> childNode2 = new TreeItem<>("Child Node 2");
        final TreeItem<String> childNode3 = new TreeItem<>("Child Node 3");
        
        //Creating the root element
        final TreeItem<String> root = new TreeItem<>("Root node");
        root.setExpanded(true);   
     
        //Adding tree items to the root
        root.getChildren().setAll(childNode1, childNode2, childNode3);        

        //Creating a column
        TreeTableColumn<String,String> column = new TreeTableColumn<>("Column");
        column.setPrefWidth(150);   
     
        //Defining cell content
        column.setCellValueFactory((CellDataFeatures<String, String> p) -> 
            new ReadOnlyStringWrapper(p.getValue().getValue()));  

        //Creating a tree table view
        final TreeTableView<String> treeTableView = new TreeTableView<>(root);
        treeTableView.getColumns().add(column);
        treeTableView.setPrefWidth(152);
        treeTableView.setShowRoot(true);             
        sceneRoot.getChildren().add(treeTableView);
        stage.setScene(scene);
        stage.show();
    }     
}

この列に定義されたセル・ファクトリは、それぞれのツリー項目の内容がこの列に配置されることを示しています。

例15-1をコンパイルして実行すると、図15-2に示す出力が得られます。

図15-2 単純なTreeTableViewコンポーネント

図15-2の説明が続きます
「図15-2 単純なTreeTableViewコンポーネント」の説明

列が1つの簡単なツリー・ビュー・コンポーネントを作成していますが、実際のアプリケーションでは、一連の拡張データを操作することが多くあります。次の項では、Tree Viewのユースケースから営業部門の従業員の個人データを表す方法について示します。

複数列の追加

ツリー・ビューの章で説明したユースケースを拡張し、営業部門の各従業員に関する詳細情報を表示します。列を追加する方法について次に示します。

例15-2 列が2つのTreeTableViewコンポーネントの作成

import java.util.Arrays;
import java.util.List;
import javafx.application.Application;
import javafx.beans.property.ReadOnlyStringWrapper;
import javafx.beans.property.SimpleStringProperty;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.TreeTableColumn;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeTableView;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
 
public class TreeTableViewSample extends Application {
 
    List<Employee> employees = Arrays.<Employee>asList(
        new Employee("Ethan Williams", "ethan.williams@example.com"),
        new Employee("Emma Jones", "emma.jones@example.com"),
        new Employee("Michael Brown", "michael.brown@example.com"),
        new Employee("Anna Black", "anna.black@example.com"),
        new Employee("Rodger York", "roger.york@example.com"),
        new Employee("Susan Collins", "susan.collins@example.com"));

    private final ImageView depIcon = new ImageView (
            new Image(getClass().getResourceAsStream("department.png"))
    );

    final TreeItem<Employee> root = 
        new TreeItem<>(new Employee("Sales Department", ""), depIcon);
    public static void main(String[] args) {
        Application.launch(TreeTableViewSample.class, args);
    }

    @Override
    public void start(Stage stage) {
        root.setExpanded(true);
        employees.stream().forEach((employee) -> {
            root.getChildren().add(new TreeItem<>(employee));
        });
        stage.setTitle("Tree Table View Sample");
        final Scene scene = new Scene(new Group(), 400, 400);
        scene.setFill(Color.LIGHTGRAY);
        Group sceneRoot = (Group) scene.getRoot();

        TreeTableColumn<Employee, String> empColumn = 
            new TreeTableColumn<>("Employee");
        empColumn.setPrefWidth(150);
        empColumn.setCellValueFactory(
            (TreeTableColumn.CellDataFeatures<Employee, String> param) -> 
            new ReadOnlyStringWrapper(param.getValue().getValue().getName())
        );

        TreeTableColumn<Employee, String> emailColumn = 
            new TreeTableColumn<>("Email");
        emailColumn.setPrefWidth(190);
        emailColumn.setCellValueFactory(
            (TreeTableColumn.CellDataFeatures<Employee, String> param) -> 
            new ReadOnlyStringWrapper(param.getValue().getValue().getEmail())
        );

        TreeTableView<Employee> treeTableView = new TreeTableView<>(root);
        treeTableView.getColumns().setAll(empColumn, emailColumn);
        sceneRoot.getChildren().add(treeTableView);
        stage.setScene(scene);
        stage.show();
    }
 
    public class Employee {
 
        private SimpleStringProperty name;
        private SimpleStringProperty email;
        public SimpleStringProperty nameProperty() {
            if (name == null) {
                name = new SimpleStringProperty(this, "name");
            }
            return name;
        }
        public SimpleStringProperty emailProperty() {
            if (email == null) {
                email = new SimpleStringProperty(this, "email");
            }
            return email;
        }
        private Employee(String name, String email) {
            this.name = new SimpleStringProperty(name);
            this.email = new SimpleStringProperty(email);
        }
        public String getName() {
            return name.get();
        }
        public void setName(String fName) {
            name.set(fName);
        }
        public String getEmail() {
            return email.get();
        }
        public void setEmail(String fName) {
            email.set(fName);
        }
    }
}

例15-2では、Employeeクラスのデータ構造を変更し、従業員の名前と電子メール・アドレスに対応する2つのプロパティを定義します。TreeTableViewコンポーネントは、そのそれぞれを表す2つの列を提供します。

例15-3に示すコード・フラグメントを調べます。これは2つの列のセル・ファクトリを作成します。setCellValueFactoryメソッドが各列にTreeItemコンテンツを定義することによって、「Employee」列にはEmployee.nameプロパティ値が含まれ、「Email」列にはEmployee.emailプロパティ値が含まれます。

例15-3 「Employee」列と「Email」列へのセル・ファクトリの実装

//Cell factory for the data the Empoyee column
        empColumn.setCellValueFactory(
            (TreeTableColumn.CellDataFeatures<Employee, String> param) -> 
            new ReadOnlyStringWrapper(param.getValue().getValue().getName())
        );
        //Cell factory for the data in the Email column
        emailColumn.setCellValueFactory(
            (TreeTableColumn.CellDataFeatures<Employee, String> param) -> 
            new ReadOnlyStringWrapper(param.getValue().getValue().getEmail())
        );

例15-2のアプリケーションをコンパイルして実行すると、図15-3に示す出力が表示されます。

図15-3 「Employee」列と「Email」列のあるTreeTableView コンポーネント

図15-3の説明が続きます
「図15-3 「Employee」列と「Email」列のあるTreeTableView コンポーネント」の説明

ツリー表のデフォルトのスタイルでは、すべてのツリー要素が展開されており、すべての表列が表示されています。ただし、これはTreeTableViewクラスおよびTreeTableColumnクラスの対応するプロパティとメソッドを使用すると、他のデフォルト設定に変更できます。

外観の変更

表メニュー・ボタンの表示を有効化し、アプリケーションのユーザーが表列の表示をトグルできるようにします。treeTableView.setTableMenuButtonVisible(true);メソッドをtreeTableViewオブジェクトにコールします。このメソッドは表ヘッダーに「+」ボタンを追加します。図15-4はユーザーが「Employee」列を非表示にした瞬間のキャプチャを示します。

図15-4 表メニュー・ボタンを有効にしたTreeTableView

図15-4の説明が続きます
「図15-4 表メニュー・ボタンを有効にしたTreeTableView」の説明

また、TreeTableViewクラスのsetShowRootメソッド、treeTableView.setShowRoot(false);を使用すると、ルート・ツリー項目の表示を制御できます。false値が渡されると、図15-5に示すようにルートが非表示になります。

図15-5 ルート・ツリー項目のないTreeTableViewコントロール

図15-5の説明が続きます
「図15-5 ルート・ツリー項目のないTreeTableViewコントロール」の説明

列ヘッダーをクリックし、ソートのモードを昇順から降順、またはその逆に切り替えると、列内のデータをソートできます。ビルトインのソート機能の他にも、データのソートは例15-4に示すTreeTableColumnプロパティおよびTreeTableViewプロパティでも可能です。

例15-4 モード設定のソート

//Setting the descending mode of sorting for the Email column
emailColumn.setSortType(TreeTableColumn.SortType.DESCENDING);
//Setting the ascending mode of sorting for the Email column
emailColumn.setSortType(TreeTableColumn.SortType.ASCENDING);
//Applying the sorting mode to all tree items
treeTableView.setSortMode(TreeSortMode.ALL_DESCENDANTS);
//Applying the sorting mode only to the first-level nodes
treeTableView.setSortMode(TreeSortMode.ONLY_FIRST_LEVEL);

選択モードの管理

TreeTableViewクラスに実装されているデフォルトの選択モデルは、MultipleSelectionModel抽象クラスに定義されており、デフォルト値をSelectionMode.SINGLEとして指定します。ツリー項目とセルの複数選択を有効にするには、setSelectionModelメソッドとsetCellSelectionEnabledメソッドを組み合せて使用します。使用可能な値とその結果の動作の詳細は、表15-1を参照してください。

表15-1 選択モデルの設定

setSelectionModel setCellSelectionEnabled 動作

SelectionMode.SINGLE

false

表内の単一行の選択を有効にします。

SelectionMode.SINGLE

true

表内の単一セルの選択を有効にします。

SelectionMode.MULTUPLE

false

表内の複数行の選択を有効にします。

SelectionMode.MULTIPLE

true

複数行での複数セルの選択を有効にします。

たとえば、例15-5に示すように、TreeTableViewコンポーネントで、複数行における複数セルの選択を実装できます。

例15-5 セルの複数選択の有効化

treeTableView.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
treeeTableView.getSelectionModel().setCellSelectionEnabled(true);

図15-6は、行を追加した後に選択可能なセルがTreeTableViewSampleアプリケーションのコードに追加されたことを示します。

図15-6 表のセルの複数選択

図15-6の説明が続きます
「図15-6 表のセルの複数選択」の説明

TreeTableViewコントロールは表ビューおよびツリー・ビューのすべての機能をカプセル化するため、追加機能の詳細は、「表ビュー」および「ツリー・ビュー」の章を参照してください。

関連ドキュメント

ウィンドウを閉じる

目次

JavaFX: JavaFX UIコンポーネントの操作

展開 | 縮小