忍者ブログ

軽Lab

 Javaを中心とした、プログラミング関係のナレッジベース

Home > JavaFX入門 > JavaFX UIコントロール3(テーブル、ツリーテーブル)

JavaFX UIコントロール3(テーブル、ツリーテーブル)

JavaFX UIコントロール(全体像)』に引き続き、UIレイアウトの詳細な使い方を見ていく。今回はプログラムを参照しながら、UIコントロールの表示方法とイベント・ハンドラの利用方法を見る。

■ サンプルコード

以下にUIコントロールを利用するサンプルコードと解説を示す。サンプル中で利用されている要素技術については、以下のリンクにて解説している。

■ サンプルの実行結果


■ サンプルコード

package application_fx;

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.SelectionMode;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TablePosition;
import javafx.scene.control.TableView;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeTableColumn;
import javafx.scene.control.TreeTablePosition;
import javafx.scene.control.TreeTableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.control.cell.TreeItemPropertyValueFactory;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class TestUIControl3 extends Application {

    public static void main(String[] args)
    {
        launch( args );
    }

    @Override
    public void start(Stage primaryStage) throws Exception
    {
        // フォント色がおかしくなることへの対処
        System.setProperty( "prism.lcdtext" , "false" );
        
        // シーングラフを作成
        VBox        root    = new VBox( 2.0 );
        
        // 表ビュー
        root.getChildren().add( createTableView() );
        
        // ツリー表ビュー
        root.getChildren().add( createTreeTableView() );
        
        // シーンを作成
        Scene       scene   = new Scene( root , 500 , 600 );
        
        // ウィンドウ表示
        primaryStage.setScene( scene );
        primaryStage.show();
        
    }
    
    /**
     * 表ビューを作成
     * @return
     */
    @SuppressWarnings("unchecked")
    public Node createTableView()
    {
        // 表ビューを作成
        TableView<TableData>   table       = new TableView<TableData>();
        table.setEditable( true );
        
        // 列を追加
        // PropertyValueFactoryでBeanクラスの対応するプロパティを指定
        TableColumn<TableData,String>     col1        = new TableColumn<TableData,String>("列1");
        TableColumn<TableData,String>     col2        = new TableColumn<TableData,String>("列2");
        TableColumn<TableData,String>     col2_1      = new TableColumn<TableData,String>("列2-1");
        TableColumn<TableData,String>     col2_2      = new TableColumn<TableData,String>("列2-2");
        col1.setCellValueFactory( new PropertyValueFactory<>("element1") );
        col2_1.setCellValueFactory( new PropertyValueFactory<>("element2_1") );
        col2_2.setCellValueFactory( new PropertyValueFactory<>("element2_2") );
        col2.getColumns().addAll( col2_1 , col2_2 );
        table.getColumns().addAll( col1 , col2 );
        
        // データを追加
        ObservableList<TableData>   data    = FXCollections.observableArrayList(
                new TableData( "1行1列" , "1行2列" , "1行3列" ),
                new TableData( "2行1列" , "2行2列" , "2行3列" ),
                new TableData( "3行1列" , "3行2列" , "3行3列" )
        );
        
        // データを登録
        table.setItems( data );
        
        // 複数セル選択可能に設定
        table.getSelectionModel().setSelectionMode( SelectionMode.MULTIPLE );
        table.getSelectionModel().setCellSelectionEnabled( true );

        // 選択を検知するバインディングを設定
        table.getSelectionModel().selectedItemProperty().addListener( 
                ( ov , old , current) ->
                {
                    // 標準出力にヘッダ文字出力
                    System.out.println( "選択セル(TableView)" );
                    
                    // 選択したセル位置を取得
                    for( TablePosition<TableData, ?> pos : table.getSelectionModel().getSelectedCells() )
                    {
                        // 選択行・列の情報を取得
                        int                         row     = pos.getRow();
                        TableColumn<TableData, ?>   col     = pos.getTableColumn();
                        
                        // 選択行を取得
                        TableData   item        = table.getItems().get( row );

                        // 選択セルを取得
                        String      selected    = (String) col.getCellObservableValue( item ).getValue();
                        
                        // 標準出力に出力
                        System.out.println( " " + selected );
                        
                    }
                }
                );
        
        return table;
    }
    
    /**
     * ツリー・テーブル・ビューを作成
     * @return
     */
    @SuppressWarnings("unchecked")
    public Node createTreeTableView()
    {
        // ツリー・テーブル・ビューを作成
        TreeTableView<TableData>   treeTableView        = new TreeTableView<>();
        
        // ルートのツリーアイテムを登録
        TreeItem<TableData>    root                     = new TreeItem<TableData>( new TableData("1","2","3") );
        treeTableView.setRoot( root );
        
        // テーブルの行列情報を設定
        TreeTableColumn<TableData,String>   column1     = new TreeTableColumn<>("列1");
        TreeTableColumn<TableData,String>   column2_1   = new TreeTableColumn<>("列2");
        TreeTableColumn<TableData,String>   column2_2   = new TreeTableColumn<>("列3");
        column1.setCellValueFactory( new TreeItemPropertyValueFactory<TableData, String>("element1") );
        column2_1.setCellValueFactory( new TreeItemPropertyValueFactory<TableData, String>("element2_1") );
        column2_2.setCellValueFactory( new TreeItemPropertyValueFactory<TableData, String>("element2_2") );
        treeTableView.getColumns().add( column1 );
        treeTableView.getColumns().add( column2_1 );
        treeTableView.getColumns().add( column2_2 );
        
        // データを追加
        ObservableList<TreeItem<TableData>>   data      = FXCollections.observableArrayList(
                new TreeItem<TableData>( new TableData( "1行1列" , "1行2列" , "1行3列" ) ),
                new TreeItem<TableData>( new TableData( "2行1列" , "2行2列" , "2行3列" ) ),
                new TreeItem<TableData>( new TableData( "3行1列" , "3行2列" , "3行3列" ) )
        );
        
        // データを登録
        root.getChildren().addAll( data );
        
        // 単一セルのみ選択可能に設定
        treeTableView.getSelectionModel().setSelectionMode( SelectionMode.SINGLE );
        treeTableView.getSelectionModel().setCellSelectionEnabled( true );
        
        // 選択を検知するバインディングを設定
        treeTableView.getSelectionModel().selectedItemProperty().addListener( 
                ( ov , old , current) ->
                {
                    // 選択したセル位置を取得
                    TreeTablePosition<TableData, ?>     pos         = treeTableView.getSelectionModel().getSelectedCells().get(0);
                    
                    // 選択行・列の情報を取得
                    int                             row     = pos.getRow();
                    TreeTableColumn<TableData, ?>   col     = pos.getTableColumn();
                    
                    // 選択行を取得
                    TableData   item        = treeTableView.getTreeItem( row ).getValue();

                    // 選択セルを取得
                    String      selected    = (String) col.getCellObservableValue( row ).getValue();
                    
                    // 標準出力に出力
                    System.out.println( " " + selected );
                }
                );
        
        return treeTableView;
    }
    
    
    /**
     * テーブル表示用のローカルクラス
     * @author tomo
     *
     */
    public class TableData
    {
        private String      element1;
        private String      element2_1;
        private String      element2_2;
        
        public TableData( String element1 , String element2_1 , String element2_2  )
        {
            this.element1   = element1;
            this.element2_1 = element2_1;
            this.element2_2 = element2_2;
        }
        
        public String getElement1() {
            return element1;
        }
        public void setElement1(String element1) {
            this.element1 = element1;
        }
        public String getElement2_1() {
            return element2_1;
        }
        public void setElement2_1(String element2_1) {
            this.element2_1 = element2_1;
        }
        public String getElement2_2() {
            return element2_2;
        }
        public void setElement2_2(String element2_2) {
            this.element2_2 = element2_2;
        }
        
    }
    
}

■ 解説

 TableViewを利用するには、以下の順で処理を進めるとよい。

  1. 1行分のデータを格納するJava Beansクラスを作成(189行目~221行目)
  2. TableViewを作成(60行目)
  3. 列情報を設定(65行目~73行目)
  4. 行データを登録(76行目~83行目)

 Java Beansクラスとは内部変数をgetter/setterで取得・設定できるクラスという理解でよい。サンプルでは1列目の内部変数をelement1、2列目をelement2_1、3列目をelement2_2としている。そして、手順3でどの内部変数が何列目に対応するかをTableViewに設定している。あとは、表示するデータをObservableList型のリストに格納して、TableViewに登録すればよい。

 TreeTableViewの利用方法は基本的にTableViewと同じだが、行データを木構造クラス(TableItem)に集約できるようになっている点が異なる(130行目~131行目、152行目)。


◇ セルの選択

 tableView及びTreeTableViewで選択したセル・行の情報を得るには、SelectionModelのselectedItemPropertyに対してリスナーを設定すればよい(90行目~114行目)。デフォルトでは単一セル選択となっているが、cellSelectionEnabledプロパティとSelectionModelプロパティの設定により行選択や複数選択も可能となる。設定と選択内容の組み合わせは以下のとおり

CellSelectionEnabledプロパティ SelectionMode 選択内容
true SelectionMode.SINGLE 単一セルの取得
SelectionMode.MULTUPLE 複数セルの取得
false SelectionMode.SINGLE 単一行の選択
SelectionMode.MULTUPLE 複数行の選択



■ 参照

  1. JavaDoc - クラスTreeTableView
  2. JavaFX: JavaFX UIコンポーネントの操作

改訂履歴
・2015年11月20日 サンプルプログラムで複数セル選択方法、行選択方法されるように変更
Home > JavaFX入門 > JavaFX UIコントロール3(テーブル、ツリーテーブル)

- ランダム記事 -
- PR -

コメント

プロフィール

管理者:
 連絡はContactよりお願いします。

PR