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 件のコメント:
コメントを投稿