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

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

JavaFXでテーブル(TableView)を使う

      2020/09/18

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

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

[ad#top-1]

Scene Builderを使ってTableViewを実装

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

 

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

 

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を実装

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

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", "東京都") );
  }
}
 

 

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

 

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

 

ソースコード解説

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

//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なしで実装する方法

スポンサーリンク

 - Java