如何将TableCell样式类绑定到TableRow样式类（JavaFX）

Question

I am making a system log window for my JavaFX application. I figure the easiest way to display the log and be able to sort filter etc is to use a TableView.

The log messages have four types that are classified by an enum(LogType):

SUCCESS, INFO, WARNING, ERROR.

If the type is ERROR, I want to change the text of the entire TableRow to red using a CSS class .redText

I did this using the RowFactory. Here is declaring the variables:

@FXML
TableView<LogMessage> table;
@FXML
TableColumn<LogMessage, String> timeColumn;
@FXML
TableColumn<LogMessage, LogMessage.LogType> typeColumn;
@FXML
TableColumn<LogMessage, String> msgColumn;

Here is setRowFactory(). Its located in my initialize() method of the controller class.

        //Change text color based on success/failure
        table.setRowFactory(new Callback<TableView<LogMessage>, TableRow<LogMessage>>() {

            @Override
            public TableRow<LogMessage> call(TableView<LogMessage> param) {
                TableRow<LogMessage> tableRow = new TableRow<LogMessage>() {

                    @Override
                    protected void updateItem(LogMessage item, boolean empty) {
                        super.updateItem(item, empty);
                        this.getStyleClass().remove("redText");
                        if (item != null && !empty) {
                            if(item.isError()) {
                                this.getStyleClass().add("redText");
                            }
                        }
                    }

                };

                return tableRow;
            }
        });

This works, except I've run into the issue where some of the log messages are too long for my fixed size table, so the user would have to horizontally scroll.

I would rather it wrap onto multiple lines. So I added a custom cell factory on msgColumn , using some code I found on StackOverflow, like so:

//Auto wrap the message column
        msgColumn.setCellFactory(tc -> {
            TableCell<LogMessage, String> cell = new TableCell<>();
            Text text = new Text();
            cell.setGraphic(text);
            cell.setPrefHeight(Control.USE_COMPUTED_SIZE);
            text.wrappingWidthProperty().bind(msgColumn.widthProperty());
            text.textProperty().bind(cell.itemProperty());
            text.styleProperty().bind(cell.styleProperty());
            return cell ;
        });

I added the text.styleProperty().bind(cell.styleProperty()); to try to get it to copy over the style too, but no luck.

I think the cellFactory for the message column is overwriting the style on the TableRow. The word wrapping works great, but it has the default color as black for the msg column, and its red for the rest of the columns in that row.

How can I get it to do both, word wrap and keep the style?

I am open to doing it either through CSS or the Java Controller.

Answer 1

Add a (fixed) style class to the Text :

    msgColumn.setCellFactory(tc -> {
        TableCell<LogMessage, String> cell = new TableCell<>();
        Text text = new Text();
        cell.setGraphic(text);
        cell.setPrefHeight(Control.USE_COMPUTED_SIZE);
        text.wrappingWidthProperty().bind(msgColumn.widthProperty());
        text.textProperty().bind(cell.itemProperty());
        text.getStyleClass().add("table-cell-text");
        return cell ;
    });

and then in your CSS you can just do, for example,

.redText .table-cell .table-cell-text {
    -fx-fill: red ;
}

Note that the CSS property for a Text object is -fx-fill . If you use a Label (or just want to set the text color of a table cell directly), you would use -fx-text-fill .