JavaFXでテーブル（TableView）を使う

JavaFXでテーブルを扱う方法です。Java全般に言えることですが、コントロールは外観上の制御のみでデータを別のクラスで制御するというケースが多いです。リスト系コントロールはほぼそんな感じですね。

JavaFXのテーブルコントロールTableViewも、データはObservableListというクラスを使って制御します。

[ad#top-1]

Scene Builderを使ってTableViewを実装

Sene Builderを使ってTableViewを以下のように実装します。ボタンを使いたいので１個セットしておきます。

TableViewコントロールだけではダメで、列数だけTableColumnをTableView上に実装する必要があります。

TableViewのコントロールは以下のとおりです。

ボタンアクション名をbtnActionと設定しておきました。（これを押すとテーブルにデータがセットされるようにします）

データクラスを作る

TableViewに対応したデータクラスを作ります。今回はクラス名をMemberとしました。これをMember.javaというファイル名で保存します。

public class Member {
  private String name;
  private String age;
  private String home;

  public Member(String name, String age, String home) {
    this.name = name;
    this.age = age;
    this.home = home;
  }
  /* getter,setterがないとTableViewに反映されない */
  public String getName(){ return name; }
  public String getAge(){ return age; }
  public String getHome(){ return home; }
  public void setName(String name){ this.name = name; }
  public void setAge(String age){ this.age = age; }
  public void setHome(String home){ this.home = home; }
}
 

注意すべき点はコメント文にも書きましたが、getter/setterがないとTableViewに反映されません。かならず書きましょう。

TableViewを実装

こちらがソースコード全文です。ボタンを押すと３データがセットされるようになっています。

import javafx.application.Application;
import javafx.fxml.*;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.layout.*;
import javafx.event.ActionEvent;
import javafx.scene.control.*;
import javafx.collections.*;
import javafx.scene.control.cell.*;

public class TableTest extends Application implements Initializable {
  @FXML private TableView table;
  @FXML private TableColumn nameCol;
  @FXML private TableColumn ageCol;
  @FXML private TableColumn homeCol;
  private ObservableList<Member> data;

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

  @Override
  public void start(Stage stage) throws Exception{
    VBox root = FXMLLoader.load(getClass().getResource("TableTest.fxml"));
    stage.setTitle("TableView Test");
    stage.setScene(new Scene(root));
    stage.show();
  }

  @Override
  public void initialize(java.net.URL url, java.util.ResourceBundle bundle) {
    data = FXCollections.observableArrayList();
    table.itemsProperty().setValue(data);
    table.setItems(data);

    nameCol.setCellValueFactory(new PropertyValueFactory<Member, String>("name"));
    ageCol.setCellValueFactory(new PropertyValueFactory<Member, String>("age"));
    homeCol.setCellValueFactory(new PropertyValueFactory<Member, String>("home"));
  }

  @FXML
  public void btnAction(ActionEvent e) {
    data.addAll( new Member("鈴木", "48", "神奈川県") );
    data.addAll( new Member("山田", "21", "栃木県") );
    data.addAll( new Member("佐藤", "36", "東京都") );
  }
}
 

コンパイルして実行すると以下のような画面が現れます。

ボタンを押すと３つデータがセットされるようになっています。

ソースコード解説

initializeメソッドの中で以下のコードを実装しています。TableView, TableColumnをMemberクラスにリンクさせています。

//private ObservableList<Member> data;
data = FXCollections.observableArrayList();
table.itemsProperty().setValue(data);
table.setItems(data);

nameCol.setCellValueFactory(new PropertyValueFactory<Member, String>("name"));
ageCol.setCellValueFactory(new PropertyValueFactory<Member, String>("age"));
homeCol.setCellValueFactory(new PropertyValueFactory<Member, String>("home"));
 

ボタンを押すとデータがセットされる部分は以下のとおりです。直接TableVewを操作するのではなくObservableListオブジェクトのdataにデータをセットすればテーブルに現れるようになります。

@FXML
public void btnAction(ActionEvent e) {
  data.addAll( new Member("鈴木", "48", "神奈川県") );
  data.addAll( new Member("山田", "21", "栃木県") );
  data.addAll( new Member("佐藤", "36", "東京都") );
}
 

■関連記事■　FXMLなしで実装する方法

非IT企業に勤める中年サラリーマンのIT日記

JavaFXでFXMLなしでTableViewを実装する方法

JavaFXはコントロールのデザインをFXLMファイルに表現するのが一般的で、FXLMを生成するSceneBuilderという便利なツールもあります。しかし、実際やってみて思ったのは最初のデザインの時は早く仕上がるもののデバッグ時に問題が起きると原因を見つけるのに難儀するという点です。FXML−Java間の不具合はコンパイル時にはわからず実行エラーとなり、実行エラーを読み取るのがコンパイルエラーよりも時間がかかるからです。トータルコストはFXML利用のほうが大きいんじゃないかなと最近思い始めています。（プロじゃないからわからんけど...

 - Java