Tableセル内のレイアウトを変更したい

Question

初心者です
javaFXを使ってスケジュール表を作ってみたいと思い、リンクを参考にしてTableを使って作成しようとしました。

リンクの内容を要約すると、セル内のレイアウトを実装してくれるList(Table)Cellクラスを継承したクラスを作り、Controllerクラスでそれを設定すればセルをカスタマイズできるよ、という内容です。

簡単に経緯を話すとリンクに言われた通りにやったところ、TableCellを継承したクラス内のupdateItemメソッド内の、値を設定するために行ったsetTextメソッドでヌルポが出た、という内容です。以下にコードを張ります。

import javafx.scene.control.TableView;
import javafx.util.Callback;

public class SceduleTableController implements Initializable {
    @FXML // ResourceBundle that was given to the FXMLLoader
    private ResourceBundle resources;

    @FXML // URL location of the FXML file that was given to the FXMLLoader
    private URL location;
    
    @FXML // fx:id="table"
    private TableView<ScheduleData> table; // Value injected by FXMLLoader

    @FXML // fx:id="scheduleColumn"
    private TableColumn<String,ScheduleData> scheduleColumn; // Value injected by FXMLLoader

    @FXML // fx:id="timeColumn"
    private TableColumn<String, ?> timeColumn; // Value injected by FXMLLoader
    

    @Override
	public void initialize(URL location, ResourceBundle resources) {
    	scheduleColumn.setCellFactory(new Callback<TableColumn<String,ScheduleData>, TableCell<String,ScheduleData>>() { // (1)
            @Override
            public TableCell<String,ScheduleData> call(TableColumn<String,ScheduleData> tableColumn) {
                return new ScheduleDataCell();
            }
    	});
    	ObservableList<ScheduleData> scheduleDatas = createScheduleDatas();   	
    	table.setItems(scheduleDatas);
    	
        assert scheduleColumn != null : "fx:id=\"sheduleColumn\" was not injected: check your FXML file 'ScheduleIndividual.fxml'.";
        assert timeColumn != null : "fx:id=\"timColumn\" was not injected: check your FXML file 'ScheduleIndividual.fxml'.";

    }
    
    private ObservableList<ScheduleData> createScheduleDatas(){
    	ObservableList<ScheduleData> scheduleDatas = FXCollections.observableArrayList();
    	
    	ScheduleData data1 = new ScheduleData("部活",LocalTime.of(12,30),LocalTime.of(16,0),"試合");
    	
    	scheduleDatas.add(data1);
    	
    	return scheduleDatas;
    }
}

package application;

import javafx.scene.control.TableCell;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.scene.text.Text;

public class ScheduleDataCell extends TableCell<String,ScheduleData> {
	   private VBox cellContainer;
	   private Text scheduleTitle;
	   private Text time;
	   private Text txtDetail;
	   private boolean bound = false;
	   
	   public ScheduleDataCell() {
		//関係ないので端折ります。
	   }
	   
	   @Override
	   public void updateItem(ScheduleData scheduleData, boolean empty) {
		   super.updateItem(scheduleData, empty);
		   if (!bound) { // セルの幅に合わせて折り返されるように、親となる ListView の width プロパティと、それぞれの wrappingWidth プロパティをバインドしています。
	            scheduleTitle.wrappingWidthProperty().bind(getTableView().widthProperty().subtract(25));
	            time.wrappingWidthProperty().bind(getTableView().widthProperty().subtract(25));
	            txtDetail.wrappingWidthProperty().bind(getTableView().widthProperty().subtract(25));
	            bound = true;
	        }
		   		   
		   
		   if (empty) {
	            setText(null);
	            setGraphic(null);
	        } else { // タイトルやら詳細やらを設定
	        	scheduleTitle.setText(scheduleData.titleProperty().get());
	            time.setText(scheduleData.timeProperty().get());
	            txtDetail.setText(scheduleData.detailProperty().get());
	            setGraphic(cellContainer);
	        }
	   }
}

＊ヌルポが起きたのはscheduleTitle.setText(scheduleData.titleProperty().get());
の部分です。

試したこと
0. デバッグをしたところ、TableCellのupdateItemの第一引数がnullになっていました。（よくわからないのですが、デバックの途中で”～使用不可”と出てくるフレームがありました）
0. なので、一旦nullでも関係なくなるように、scheduleDataクラスをすべてStringにしてみたところ、実行はできましたが、セルにデータが入っていませんでした。
0. そこで、リンクの人はlistで自分はtableなので、何かが違うのかな、と思い、リストの人のサンプルをそのままコピーして実行してやると、なんとデータが表示されませんでした。

考えられることとしては、かれこれ２週間くらい悩んでいるので、実はもう出来ませんでしたオチはどうしても嫌なのですが、javaFXが新しくなってしまい、できてなくなったということですが、いかんせんいくら調べてみても、Oracleのjava8の記事以外全く情報が無くてどうしようもありません。

長文、知識不足でわかりにくい文章だったと思いますが、読んでくださりありがとうございます、私の助けになっていただけるととても助かります！

Answer 1

JavaFX - JavaFXのTableColumnに中身を追加したい｜teratail
過去質問で解決したはずの部分まで壊れているのはなんででしょうか？
試行錯誤は大変結構ですが、手あたり次第に勘で書き換えてもうまくいきません。
TableViewはもともと難しいので、１行１行どういう意味かザックリでも理解しながらやってください。

まずTableColumn<S,T>の型引数が逆です。
そのためScheduleDataCellも逆になってしまい、ヌルポがでます。

setCellValueFactoryがあったはずですが、丸々抜けています。
通常は表示するプロパティを指定するわけですが、セルにまとめて表示したいわけですね？
単に改行したいだけなら各プロパティをconcatするのが簡単です。

あくまでScheduleDataCellを利用したいなら、アイテム自身（ScheduleData）をセルに渡す必要がありますが、ObservableValue<T>でなければなりません。
TableColumn#setCellValueFactory

単純にReadOnlyObjectWrapper<T>で包んでみたところ、編集が即時反映されませんでした（まあ当然か）

ちょっと正しいか自信はないのですが、ScheduleDataをObjectBindingにして内部のプロパティとバインドしたところ想定した動作になりました。

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

<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.layout.BorderPane?>
<BorderPane xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1"
            fx:controller="sample.ScheduleTableController">
    <center>
        <TableView fx:id="table" editable="true">
            <columns>
                <TableColumn fx:id="scheduleColumn" prefWidth="100" text="schedule"/>
                <TableColumn fx:id="concatColumn" prefWidth="100" text="concat"/>
                <TableColumn fx:id="titleColumn" prefWidth="100" text="title"/>
                <TableColumn fx:id="timeColumn" prefWidth="100" text="time"/>
                <TableColumn fx:id="detailColumn" prefWidth="100" text="detail"/>
            </columns>
        </TableView>
    </center>
</BorderPane>

package sample;

import java.net.URL;
import java.time.LocalTime;
import java.util.ResourceBundle;

import javafx.beans.property.ReadOnlyObjectWrapper;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.TableCell;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.control.cell.TextFieldTableCell;
import javafx.scene.layout.VBox;
import javafx.scene.text.Text;


public class ScheduleTableController implements Initializable {
    @FXML
    private TableView<ScheduleData> table;
    @FXML
    private TableColumn<ScheduleData, ScheduleData> scheduleColumn; // アイテム自身をセルに出すため<ScheduleData, ScheduleData>になる
    @FXML
    private TableColumn<ScheduleData, String> concatColumn; // 通常はアイテムの型（TableView<T>のT）, プロパティの型（StringPropertyならString）
    @FXML
    private TableColumn<ScheduleData, String> titleColumn;
    @FXML
    private TableColumn<ScheduleData, String> timeColumn;
    @FXML
    private TableColumn<ScheduleData, String> detailColumn;

    @Override public void initialize(URL location, ResourceBundle resources) {
        // ScheduleDataがObjectBindingでなくとも、Wrapperでコード上は通る
        // が、編集した時の挙動が異なる
        // 即時反映されずセルのクリックでupdateItemが走る模様
//        scheduleColumn.setCellValueFactory(x -> new ReadOnlyObjectWrapper<>(x.getValue()));

        // これでいいのか自信はないが、とりあえず想定通りに動いている
        scheduleColumn.setCellValueFactory(x -> x.getValue());
        scheduleColumn.setCellFactory(x -> new ScheduleDataCell());


        // 単にまとめたいだけならつなげればいい
        concatColumn.setCellValueFactory(x ->
                x.getValue().titleProperty()
                        .concat("\n")
                        .concat(x.getValue().timeProperty())
                        .concat("\n")
                        .concat(x.getValue().detailProperty()));


//        titleColumn.setCellValueFactory(new PropertyValueFactory<>("title")); // ↓同じ意味
        titleColumn.setCellValueFactory(x -> x.getValue().titleProperty());
        titleColumn.setCellFactory(TextFieldTableCell.forTableColumn());

        timeColumn.setCellValueFactory(x -> x.getValue().timeProperty());
        timeColumn.setCellFactory(TextFieldTableCell.forTableColumn());

        detailColumn.setCellValueFactory(x -> x.getValue().detailProperty());
        detailColumn.setCellFactory(TextFieldTableCell.forTableColumn());

        ObservableList<ScheduleData> schedules = FXCollections.observableArrayList(
                new ScheduleData("部活", LocalTime.of(12, 30), LocalTime.of(16, 0), "試合"),
                new ScheduleData("部活", LocalTime.of(12, 30), LocalTime.of(16, 0), "試合"));
        table.setItems(schedules);
    }
}

class ScheduleDataCell extends TableCell<ScheduleData, ScheduleData> {
    private VBox cellContainer = new VBox();
    private Text scheduleTitle = new Text();
    private Text time = new Text();
    private Text txtDetail = new Text();

    public ScheduleDataCell() {
        cellContainer.getChildren().addAll(scheduleTitle, time, txtDetail);
    }

    @Override protected void updateItem(ScheduleData item, boolean empty) {
        super.updateItem(item, empty);

        if (!empty) {
            scheduleTitle.setText(item.titleProperty().get());
            time.setText(item.timeProperty().get());
            txtDetail.setText(item.detailProperty().get());

            // これでもよさそうな気もするが、いつunbindすればいいかよくわからない
//            scheduleTitle.textProperty().bind(item.titleProperty());
//            time.textProperty().bind(item.timeProperty());
//            txtDetail.textProperty().bind(item.detailProperty());

            setGraphic(cellContainer);
        }
    }
}

package sample;

import java.time.LocalTime;

import javafx.beans.binding.ObjectBinding;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;


public class ScheduleData extends ObjectBinding<ScheduleData> {
    private StringProperty title = new SimpleStringProperty();
    private StringProperty time = new SimpleStringProperty();
    private StringProperty detail = new SimpleStringProperty();

    public ScheduleData(String title, LocalTime startTime, LocalTime finishTime, String detail) {
        this.title.set(title);
        time.set(startTime + "～" + finishTime);
        this.detail.set(detail);

        bind(this.title, time, this.detail);
    }

    public StringProperty titleProperty() { return title; }

    public StringProperty timeProperty() { return time; }

    public StringProperty detailProperty() { return detail; }

    @Override protected ScheduleData computeValue() { return this; }
}

package sample;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;


public class Main extends Application {
    public static void main(String[] args) { launch(args); }

    @Override public void start(Stage primaryStage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
        primaryStage.setScene(new Scene(root, 600, 300));
        primaryStage.show();
    }
}

---

そもそもTableViewは表形式で編集するのに便利なコンポーネントだと思うのですが、まとめて表示の意味は何なのでしょう？

---

Java - TableViewにデータを追加したい｜teratail
と全く同じ質問ですよね？

推奨していない質問｜teratail（テラテイル）

省略された部分が多く試す気が起きずにスルーしてしまいましたが、省略すべきはなくても動く部分（自動生成されたコメントやinitStyle()等）であって、initComponent()やfxml等なくては動かない部分はできる限り記載してください。

Comments

[ryu-bamboo]

回答ありがとうございます！あと、すみません、TableColumn<S,T>のS,Tはそれぞれ何のクラスを表しているのか教えていただけないでしょうか。

　TN8001さんのおっしゃる通り、確かにOracleのTableView<S>クラスのsetItemsなどの説明を見る限りにおいてはSはScheduleDataの型だと考えられるのですが、同じくListView<T>の説明を見ると、
T - この型は、ListViewsのitems ObservableListに格納されているオブジェクトの型を表す場合に使用されます。また、selection modelおよびfocus modelでも使用されます。
　と記述されていて、TがScheduleDataになるのではないか、と思うのですが、どちらが正しいのでしょうか。

＊そもそもTableViewにはSが入るので、TableView<String>にするべきでした。直したところ、TableViewと、ObservableListの<>の型が異なってしまっていてエラーになりました。

それと、<ScheduleData, String>にしたところ、CellクラスのupdateItemメソッドの引数がTになっているため、引数違いで使えませんでした。

[TN8001]

> TableColumn<S,T>のS,Tはそれぞれ何のクラスを表しているのか教えていただけないでしょうか。

リンクの通り
> 型パラメータ:
> S - TableView汎用型の型(つまり、S == TableView<S>)
> T - このTableColumnのすべてのセルのコンテンツの型。

SがScheduleDataで
例えばtimeColumnなら StringProperty timeですから
TはStringとなるということでしょう。

TableViewとListViewは全く同じというわけではありません。
ListViewにはカラムの概念がないので、ListCellにはアイテムそのものが来ます。

TableCellの場合は、そのアイテムのうちどのプロパティを表示するかという設定が入ります（setCellValueFactory）

> そもそもTableViewにはSが入るので、TableView<String>にするべきでした。

なぜ？
回答コードは全ソースついていますので、実行してみて落ち着いてコードを読んでください。

[ryu-bamboo]

なるほど、別の意味でつかわれていたんですね、納得できました。

> そもそもTableViewにはSが入るので、TableView<String>にするべきでした。

これは、SにStringを入れていた場合にという意味で使いました、蛇足でしたね笑

回答を見ながら少しづつ理解していこうと思うので、進捗があったらまた質問させてください、よろしくお願いします。

[ryu-bamboo]

予備知識が無くてまとめて表示するという意味がよく分からないです…
ただ、自分はCellのレイアウトを変えたいと思っています

[ryu-bamboo]

あ、なるほど！

私が作りたいのは、一列目(timeColumn)に直感的に時刻がわかるように12、13などの時刻を表示し、2列目(scheduleColumn)に予定の名前（Title）、時間(time)、予定の詳細(detail)を表示するようなスケジュール表で、
そのなかで、二列めのレイアウトを変更して、予定の名前を大きくしたりするためにCellクラスを使用することにしたのです。（よくよく考えると1列目をLabelにしてしまえばよかった気がします。）

説明不足過ぎて本当にに迷惑かけます…

[ryu-bamboo]

あと、controllerクラスにある"x -> x"はなんですか！？ラムダ式というやつですか？

[TN8001]

┌───┬────────┐
│時　　│予定　　　　　　│
├───┼────────┤
│１２　│部活　　　　　　│
│　　　│12:30～16:00　│
│　　　│試合　　　　　　│
├───┼────────┤
こうではなくって

┌───┬───┬───────┬────┐
│時　　│予定　│時間　　　　　│詳細　　│
├───┼───┼───────┼────┤
│１２　│部活　│12:30～16:00│試合　　│
├───┼───┼───────┼────┤
こうなんですね？？

あるカラムに例えばtitlePropertyとtimeProperty両方が必要というわけではないと。。
であればObjectBindingはいらないです。

例えば
TableColumn<ScheduleData, String> bigTimeColumn;
TableColumn<ScheduleData, String> timeColumn;
２つ用意してどちらもtimePropertyにsetCellValueFactoryして
bigのほうは
void updateItem(String item, boolean empty)
となりますのでコロン以前を拾って。。みたいな感じになるでしょう。

> controllerクラスにある"x -> x"はなんですか！？ラムダ式というやつですか？

その通りです。

[ryu-bamboo]

ありがとうございます！おかげで解決できました。
ラムダ式のところ以外は一応理解できました！ラムダ式を勉強したらもう一度考えてみます。
丁寧な説明本当にありがとうございます、お世話になりました！