JavaFXでテーブル(TableView)を使う
2020/09/18
JavaFXでテーブルを扱う方法です。Java全般に言えることですが、コントロールは外観上の制御のみでデータを別のクラスで制御するというケースが多いです。リスト系コントロールはほぼそんな感じですね。
JavaFXのテーブルコントロールTableView
も、データはObservableList
というクラスを使って制御します。
[ad#top-1]
Scene Builderを使ってTableViewを実装
Sene Builderを使ってTableViewを以下のように実装します。ボタンを使いたいので1個セットしておきます。
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を実装
こちらがソースコード全文です。ボタンを押すと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
, 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なしで実装する方法
スポンサーリンク