Sunday, June 8, 2014

JavaFX TableView with image background in header

I got to wondering how to set the background of a table to an image of some sort. It is pretty straight-forward with CSS. The only trick, really, is setting the background-color of the filler and column-header so the image can be seen. I used a semi-transparent white so the label text is easier to see.

.table-view > .column-header-background {
    -fx-background-image: url("https://duke.kenai.com/models/Duke3DprogressionSmall.jpg");
    -fx-background-size: stretch;
    -my-wash: rgba(255,255,255,.75);
}

.table-view > .column-header-background > .filler {
    -fx-background-color: -my-wash;
}

.table-view > .column-header-background > .nested-column-header > .column-header.table-column {
    -fx-background-color: -my-wash;

}

Sample code to try it on.

    static class Person {
        final StringProperty lastName  = new SimpleStringProperty();
        final StringProperty firstName  = new SimpleStringProperty();
        Person(String lastName, String firstName) {
            this.lastName.set(lastName);
            this.firstName.set(firstName);
        }
        StringProperty lastNameProperty() { return lastName; }
        StringProperty firstNameProperty() { return firstName; }
    }

    @Override
    public void start(Stage stage) throws Exception {

        TableColumn lastName = new TableColumn<>("Last");
        lastName.setCellValueFactory((value) -> value.getValue().lastNameProperty());

        TableColumn firstName = new TableColumn<>("First");
        firstName.setCellValueFactory((value) -> value.getValue().firstNameProperty());

        TableView tableView = new TableView();
        tableView.getColumns().setAll(lastName, firstName);
        tableView.getItems().setAll(
                new Person("Cratchit", "Bob"),
                new Person("Scrooge", "Ebenezer")
        );

        Group root = new Group(tableView);

        Scene scene = new Scene(root, 300, 500);
        scene.getStylesheets().add("/fxtest/test.css");
        stage.setScene(scene);
        stage.show();

    }

Saturday, June 7, 2014

JavaFX CSS selectors for TableView

I had time to kill while on a flight from Boston to Houston and came up with a list of CSS selectors for simple, JavaFX TableView. The comment in each CSS rule states the public API of the selected node.

.table-view > .column-header-background {
    /* StackPane */
}

.table-view > .column-header-background > .filler {
    /* Region - area of header not taken by column headers */
}

.table-view > .column-header-background > .column-drag-header {
    /* StackPane */
}

.table-view > .column-header-background > .column-drag-header > .label {
    /* Label */
}

.table-view > .column-header-background > .column-drag-header > .label > .text {
    /* Text */
}

.table-view > .column-header-background > .nested-column-header {
    /* Region */
}

.table-view > .column-header-background > .nested-column-header > .column-header.table-column {
    /* Region */
}

.table-view > .column-header-background > .nested-column-header > .column-header.table-column > .label {
    /* Label */
}

.table-view > .column-header-background > .nested-column-header > .column-header.table-column > .label > .text {
    /* Text */
}

.table-view > .column-header-background > .nested-column-header > .column-header.table-column > Grid {
    /* Grid */
}

.table-view > .column-header-background > .nested-column-header > .column-header.table-column > Grid > .arrow {
    /* Region */
}

.table-view > .column-header-background > .nested-column-header > Rectangle {
    /* Rectangle - separates column headers. Resize icon on :hover */
}

.table-view > .column-header-background > .show-hide-columns-button {
    /* StackPane */
}

.table-view > .column-header-background > .show-hide-columns-button > .show-hide-column-image {
    /* StackPane */
}

.table-view > .column-overlay {
    /* Region - highlights column being dragged */
}

.table-view > .column-resize-line {
    /* Region - displays where the dragged column will drop  */
}

.table-view > .virtual-flow {
    /* Region */
}

.table-view > .virtual-flow > .clipped-container {
    /* Region */
}

.table-view > .virtual-flow > .clipped-container > .sheet {
    /* Group */
}

.table-view > .virtual-flow > .clipped-container > .sheet > .cell.indexed-cell.table-row-cell {
    /* TableRow */
}
.table-view > .virtual-flow > .clipped-container > .sheet > .cell.indexed-cell.table-row-cell > .cell.indexed-cell.table-cell.table-column {
    /* TableCell */
}

.table-view > .virtual-flow > .clipped-container > .sheet > .cell.indexed-cell.table-row-cell > .cell.indexed-cell.table-cell.table-column > .text {
    /* Text */
}

.table-view > .virtual-flow > .scroll-bar {
    /* ScrollBar - has :vertical and :horizontal (default) pseudo-class state */
}

.table-view > .virtual-flow > .scroll-bar > .track-background {
    /* StackPane */
}

.table-view > .virtual-flow > .scroll-bar > .track {
    /* StackPane */
}

.table-view > .virtual-flow > .scroll-bar > .thumb {
    /* StackPane */
}

.table-view > .virtual-flow > .scroll-bar > .decrement-button {
    /* Region */
}

.table-view > .virtual-flow > .scroll-bar > .decrement-arrow {
    /* Region */
}

.table-view > .virtual-flow > .scroll-bar > .increment-button {
    /* Region */
}

.table-view > .virtual-flow > .scroll-bar > .increment-arrow {
    /* Region */
}