2015-05-04

JavaFX/TableView でカラムヘッダーを二段にする

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;
}

実行例を以下に示します。

参考サイト

  1. Using JavaFX UI Controls: Table View | JavaFX 2 Tutorials and Documentation
  2. JavaFX Tutorial - JavaFX TableView

 

0 件のコメント: