nashorn + JavaFX で TableViewにデータが表示されない

###前提・実現したいこと
nashorn + JavaFX で TableViewを使ったアプリを
作りたいのですが TableViewにデータが表示されません。
２行分のデータはセットされているようなのですが。
コレを表示させたいです。

###発生している問題・エラーメッセージ
エラーメッセージは無し

###該当のソースコード
★★ 起動コマンド
"C:\Program Files\Java\jre1.8.0_121\bin\jjs.exe" -fx ./1000.js

★★ 1000.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/8.0.65" xmlns:fx="http://javafx.com/fxml/1"> <children> <TableView id="TBL000" fx:id="TBL000" prefHeight="200.0" prefWidth="200.0"> <columns> <TableColumn id="c_code" fx:id="c_code" prefWidth="75.0" text="code" /> <TableColumn id="c_name" fx:id="c_name" prefWidth="75.0" text="name" /> <TableColumn id="c_brth" fx:id="c_brth" prefWidth="75.0" text="brth" /> </columns> </TableView> </children> </VBox>

★★ 1000.js
//================================================
var File = Java.type('java.io.File');
var FXMLLoader = Java.type('javafx.fxml.FXMLLoader');
var FXCollections = Java.type('javafx.collections.FXCollections')
load('fx:base.js');
load('fx:fxml.js');
load('fx:controls.js');
//================================================
function start(stage){
//--------------------------------------------
var fxml = './1000.fxml';
var file = file2URL(fxml);
root = FXMLLoader.load(file);
//--------------------------------------------
var TBL000 = root.lookup('#TBL000');
var Bn0000 = root.lookup('#Bn0000');
var c_code = root.lookupAll('#c_code');
var c_name = root.lookupAll('#c_name');
var c_brth = root.lookupAll('#c_brth');
//--------------------------------------------
var DATA = [
{'code':'A_1234','name':'Tasogare','brth':19800101},
{'code':'B_5678','name':'garegare','brth':20170101}
];
//--------------------------------------------
c_code.cellValueFactory = new PropertyValueFactory('code');
c_name.cellValueFactory = new PropertyValueFactory('name');
c_brth.cellValueFactory = new PropertyValueFactory('brth');
var dt = FXCollections.observableList(DATA);
TBL000.setItems(dt);
TBL000.setItems(dt);
//--------------------------------------------
var scene = new Scene(root);
//--------------------------------------------
stage.title = 'Test';
//stage.getIcons().add(new Image(file2URL('./test.png')));
stage.setScene(scene);
stage.show();
//--------------------------------------------
}
//================================================
function file2URL(file) {
return new File(file).toURI().toURL();
}
//================================================

###試したこと
TableColumnは SceneBuilderで設定するのではなく
c_code = new TableColumn() もやってみましたが
結果は同じでした。

###補足情報(言語/FW/ツール等のバージョンなど)
FXMLは JavaFX Scene Builder 8.1.1 で作成
OS = win7

var c_code = root.lookupAll('#c_code'); で
TableColumnを取得できていないのか？
その為 c_code.cellValueFactory = new PropertyValueFactory('code'); が
効いてないのか？その辺りもちゃんと理解できてません

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

TableColumnはシーングラフ上に出現しない(Nodeではない)のでlookupでは取れないのだと思います。(まぎらわしいのですがシーングラフ上にはTableColumnのidと同じidのTableColumnHeaderというNodeが生成されています。CSSを指定する場合にはこちらに対してidでスタイルを指定することができるはずですが、いずれにせよ本件の目的ではこのNodeがlookupに返されてもしかたありませんね。)

TableColumnは以下のようにすれば取得できます。(とりあえずindex指定で得る方法です)

var c_code = TBL000.getColumns().get(0)

問題はcellValueFactoryの設定です。
TableView.getItems()とするとちゃんと2要素になっているので何らかのオブジェクトは設定されてますが、

var c_code = TBL000.getColumns().get(0)
c_code.cellValueFactory = new PropertyValueFactory('code')

とやっても何も表示されませんでした。PropertyValueFactoryはJavaFXの規約に従ったプロパティー(javafx.beans.property.XxxPropertyによる)が実装されているオブジェクトに対して使うユーティリティークラスですが、おそらくjavascriptのプロパティーをJavaFXプロパティーとして扱うような仕組みはないのだと思います。

そこで非JavaFXプロパティーを扱う方法を試してみたところうまくいきましたのでご紹介します。なおlookupはできないもののTableColumnをインデックスで取得するよりはidで取得する方が多少ましなのでgetColumnByIdという関数でそれをするようにしてみました。

javascript
1var getColumnById = function(tableView, id) {
2  return tableView.getColumns().stream()
3    .filter(function(col) col.id == id).findFirst().get()
4}
5var c_code = getColumnById(TBL000, 'c_code')
6c_code.cellValueFactory = function(p) {
7  return new ReadOnlyObjectWrapper(p.getValue().code)
8}
9var c_name = getColumnById(TBL000, 'c_name')
10c_name.cellValueFactory = function(p) {
11  return new ReadOnlyObjectWrapper(p.getValue().name)
12}
13...

余談：
JavaにてFXMLをロードするなら@FXMLアノテーションとfx:idによるバインディングが便利ですがJavascriptからロードする際にlookupを使うならFXML上でのfx:idの指定は使いようがなさそうなので省略してもいいかも知れません。もちろん同じFXMLをJavaにてロードするためにfx:idとidの両方残しておくのもかまわないと思います。

投稿2017/03/07 09:37