JavaFXのTableViewにComboBoxを埋め込む方法（ChoiceBoxTableCell）

2018/05/31

JavaFXのTableView内にComboBoxのような選択ボックスを埋め込む方法です。正確にはComboBoxではなくChoiceBoxです。ChoiceBoxTableCellというセル内にChoiceBoxノードを描画するクラスを使って埋め込みます。

実行例は以下の通りです。

[ad#top-1]

まずはセルを編集可能に設定する

選択式セルにするためには、まずColumnを編集可能に設定する必要があります。

SceneBuilderのTableViewを選択し、Propertiesの「Editable」にチェックを入れます。

次に対象のColumnを選択し、同様に「Editable」にチェックを入れます。

TableView全体と対象Columnの両方に設定する必要があることを覚えておきましょう。

ソースコード

以前、TableViewの基本的な使い方を書きましたが…

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

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

JavaFXでテーブルを扱う方法です。Java全般に言えることですが、コントロールは外観上の制御のみでデータを別のクラスで制御するというケースが多いです。リスト系コントロールはほぼそんな感じですね。JavaFXのテーブルコントロールTableViewも、データはObservableListというクラスを使って制御します。Scene Builderを使ってTableViewを実装Sene Builderを使ってTableViewを以下のように実装します。ボタンを使いたいので１個セットしておきます。 TableViewコントロールだけではダメで、列数だけTableColumnをTableView上に実...

そのソースコードに以下の1行を加えればOKです。

homeCol.setCellFactory(ChoiceBoxTableCell.forTableColumn("神奈川県", "栃木県", "東京都"));

以下ソースコード全文です。

まずはSceneBuilderから生成したFXMLです。


<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.layout.VBox?>

<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/9" xmlns:fx="http://javafx.com/fxml/1" fx:controller="TableTest">
  <children>
    <TableView fx:id="table" editable="true" prefHeight="429.0" prefWidth="600.0">
      <columns>
        <TableColumn fx:id="nameCol" prefWidth="225.0" text="名前" />
        <TableColumn fx:id="ageCol" prefWidth="129.0" text="年齢" />
        <TableColumn fx:id="homeCol" prefWidth="181.0" text="出身地" />
      </columns>
    </TableView>
  </children>
</VBox>

次にJava本体です。

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"));
    homeCol.setCellFactory(ChoiceBoxTableCell.forTableColumn("神奈川県", "栃木県", "東京都"));

    data.addAll( new Member("鈴木", "48", "神奈川県") );
    data.addAll( new Member("山田", "21", "栃木県") );
    data.addAll( new Member("佐藤", "36", "東京都") );
  }
}

以上をコピペしてコンパイルすれば以下のような選択式のセルが可能になります。

[ad#ad-1]

- Java