JavaFX の TableView ウィジェットで、カラムヘッダー (TableColumn) の部分を二段にして、カラム名の他にカラムの属性を視覚的に設定できるような UI を作りたかったので、いろいろ調べてみたところ、やり方が判りました。どうやら、Nested Header と呼ぶらしいですが、ここでは一つのカラムに二つのタイトルヘッダーを二段にして表示する簡単なサンプルを紹介します。
動作環境は次の通りです。
- OS: Fedora 22 beta x86_64
- Java: Java(TM) SE Runtime Environment (build 1.8.0_45-b14)
- IDE: NetBeans IDE 8.0.2
リスト:TableViewTest1.java
package tableviewtest1;
import java.util.ArrayList;
import java.util.List;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class TableViewTest1 extends Application {
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage primaryStage) {
TableView table = new TableView();
table.setEditable(true);
TableColumn C1Col = new TableColumn("C1");
TableColumn C2Col = new TableColumn("C2");
TableColumn C3Col = new TableColumn("C3");
table.getColumns().addAll(C1Col, C2Col, C3Col);
List<String> attr;
attr = new ArrayList<>();
attr.add("x");
attr.add("y");
attr.add("z");
List<TableColumn> listColHead = table.getColumns();
for (int i = 0; i < listColHead.size(); i++) {
TableColumn objColHead = listColHead.get(i);
TableColumn subCol = new TableColumn(attr.get(i));
subCol.setId("colattr");
objColHead.getColumns().addAll(subCol);
}
StackPane root = new StackPane();
root.getChildren().add(table);
Scene scene = new Scene(root, 300, 200);
scene.getStylesheets().add(TableViewTest1.class.getResource("TableViewTest1.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
}
}
ほんの少しですが CSS で修飾しています。
リスト:TableViewTest1.css
#colattr {
-fx-font: 12px Times;
}
実行例を以下に示します。
参考サイト
- Using JavaFX UI Controls: Table View | JavaFX 2 Tutorials and Documentation
- JavaFX Tutorial - JavaFX TableView



0 件のコメント:
コメントを投稿