『
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( "１行１列" , "１行２列" , "１行３列" ),
new TableData( "２行１列" , "２行２列" , "２行３列" ),
new TableData( "３行１列" , "３行２列" , "３行３列" )
);
// データを登録
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<>("列１");
TreeTableColumn<TableData,String> column2_1 = new TreeTableColumn<>("列２");
TreeTableColumn<TableData,String> column2_2 = new TreeTableColumn<>("列３");
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( "１行１列" , "１行２列" , "１行３列" ) ),
new TreeItem<TableData>( new TableData( "２行１列" , "２行２列" , "２行３列" ) ),
new TreeItem<TableData>( new TableData( "３行１列" , "３行２列" , "３行３列" ) )
);
// データを登録
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行分のデータを格納するJava Beansクラスを作成(189行目～221行目)
- TableViewを作成(60行目)
- 列情報を設定(65行目～73行目)
- 行データを登録(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 |
複数行の選択 |
■ 参照
- JavaDoc - クラスTreeTableView
- JavaFX: JavaFX UIコンポーネントの操作
改訂履歴・2015年11月20日 サンプルプログラムで複数セル選択方法、行選択方法されるように変更