Using setRowFactory to style rows doesn't work on visible rows (JavaFX 11)

user_10701308 0
Viewed 781

I have a TableView which is updated from an ObservableList. It has two columns. When a file is loaded, the list is populated and the table updates, (initially just the first column is populated). After validation of the items in the list the second column is populated with a success or failure flag. Using the setRowFactory I update the background style of the row to either green for success or red for failure. Some items don't get validated and are styled with "". The table has about a dozen rows visible out of a couple of thousand rows total. The problem I have is that the visible rows don't get their background style updated until they're scrolled out of view and then back in again.

I've been able to overcome this by using the table's refresh() method, but that causes another problem. The first column is editable to allow the data to be corrected before re-validation. If the refresh() method is used then it breaks the ability to edit a cell. The textfield still appears, but is disabled, (no focus border and no ability to highlight or edit its content).

If I leave out the refresh() method editing works just fine. Include the refresh() and the table displays correctly without the need for scrolling, but editing is broken.

So I can either have editable cells or properly displayed rows, but not both. Apart from this problem the code works fine. I've read countless examples and TableView issues, and associated solutions, and nothing I've tried has fixed the problem. In my efforts I can see that the overriden updateItem method is only ever called when the row is redrawn after becoming visible again. My thinking is that I need another mechanism to style the rows on the validationResponse change but this is where I get stuck.

So my question is how to have the visible table rows get their style updated without scrolling while not breaking cell editing? Thanks!!

Edit:

Reproducible code example follows. Click the first button to populate the table with initial data. Click the second button to simulate validation. The second column will update with the validation response, but the styling doesn't take effect until the rows are scrolled out of view and then back in to view. At this point first column is editable. If you uncomment the tblGCode.refresh() line and re-run the test the styling is applied immediately without scrolling, but editing a cell in the first column no longer works.

Main class:

public class TableViewTest extends Application {

    private final ObservableList<GCodeItem> gcodeItems = FXCollections.observableArrayList(
        item -> new Observable[]{item.validatedProperty(), item.errorDescriptionProperty()});
    private final TableView tblGCode = new TableView();

    @Override
    public void start(Stage stage) {

        TableColumn<GCodeItem, String> colGCode = new TableColumn<>("GCode");
        colGCode.setCellValueFactory(new PropertyValueFactory<>("gcode"));
        TableColumn<GCodeItem, String> colStatus = new TableColumn<>("Status");
        colStatus.setCellValueFactory(new PropertyValueFactory<>("validationResponse"));

        // Set first column to be editable
        tblGCode.setEditable(true);
        colGCode.setEditable(true);
        colGCode.setCellFactory(TextFieldTableCell.forTableColumn());
        colGCode.setOnEditCommit((TableColumn.CellEditEvent<GCodeItem, String> t) -> {
            ((GCodeItem) t.getTableView().getItems().get(t.getTablePosition().getRow())).setGcode(t.getNewValue());
        });

        // Set row factory
        tblGCode.setRowFactory(tbl -> new TableRow<GCodeItem>() {
            private final Tooltip tip = new Tooltip();
            {
                tip.setShowDelay(new Duration(250));
            }

            @Override
            protected void updateItem(GCodeItem item, boolean empty) {
                super.updateItem(item, empty);

                if(item == null || empty) {
                    setStyle("");
                    setTooltip(null);
                } else {
                    if(item.isValidated()) {
                        if(item.hasError()) {
                            setStyle("-fx-background-color: #ffcccc"); // red
                            tip.setText(item.getErrorDescription());
                            setTooltip(tip);
                        } else {
                            setStyle("-fx-background-color: #ccffdd"); // green
                            setTooltip(null);
                        }
                    } else {
                        setStyle("");                                
                        setTooltip(null);
                    }
                }
                //tblGCode.refresh(); // this works to give desired styling, but breaks editing
            }
        });

        tblGCode.getColumns().setAll(colGCode, colStatus);
        tblGCode.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);

        // buttons to simulate issue
        Button btnPopulate = new Button("1. Populate Table");
        btnPopulate.setOnAction(eh -> populateTable());
        Button btnValidate = new Button("2. Validate Table");
        btnValidate.setOnAction(eh -> simulateValidation());

        var scene = new Scene(new VBox(tblGCode, btnPopulate, btnValidate), 640, 320);
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch();
    }

    private void populateTable() {
        // simulates updating of ObservableList with first couple of dozen lines of a file
        gcodeItems.add(new GCodeItem("(1001)"));
        gcodeItems.add(new GCodeItem("(T4  D=0.25 CR=0 - ZMIN=-0.4824 - flat end mill)"));
        gcodeItems.add(new GCodeItem("G90 G94"));
        gcodeItems.add(new GCodeItem("G17"));
        gcodeItems.add(new GCodeItem("G20"));
        gcodeItems.add(new GCodeItem("G28 G91 Z0"));
        gcodeItems.add(new GCodeItem("G90"));
        gcodeItems.add(new GCodeItem(""));
        gcodeItems.add(new GCodeItem("(Face1)"));
        gcodeItems.add(new GCodeItem("T4 M6"));
        gcodeItems.add(new GCodeItem("S5000 M3"));
        gcodeItems.add(new GCodeItem("G54"));
        gcodeItems.add(new GCodeItem("M8"));
        gcodeItems.add(new GCodeItem("G0 X1.3842 Y-1.1452"));
        gcodeItems.add(new GCodeItem("Z0.6"));
        gcodeItems.add(new GCodeItem("Z0.2"));
        gcodeItems.add(new GCodeItem("G1 Z0.015 F20"));
        gcodeItems.add(new GCodeItem("G18 G3 X1.3592 Z-0.01 I-0.025 K0"));
        gcodeItems.add(new GCodeItem("G1 X1.2492"));
        gcodeItems.add(new GCodeItem("X-1.2492 F40"));
        gcodeItems.add(new GCodeItem("X-1.25"));
        gcodeItems.add(new GCodeItem("G17 G2 X-1.25 Y-0.9178 I0 J0.1137"));
        gcodeItems.add(new GCodeItem("G1 X1.25"));
        gcodeItems.add(new GCodeItem("G3 X1.25 Y-0.6904 I0 J0.1137"));

        // Add list to table
        tblGCode.setItems(gcodeItems);
    }

    private void simulateValidation() {
        // sets validationResponse on certain rows (not every row is validated)
        gcodeItems.get(2).setValidationResponse("ok");
        gcodeItems.get(3).setValidationResponse("ok");
        gcodeItems.get(4).setValidationResponse("ok");
        gcodeItems.get(5).setValidationResponse("ok");
        gcodeItems.get(6).setValidationResponse("ok");
        gcodeItems.get(9).setValidationResponse("error:20");
        gcodeItems.get(10).setValidationResponse("ok");
        gcodeItems.get(11).setValidationResponse("ok");
        gcodeItems.get(12).setValidationResponse("ok");
        gcodeItems.get(13).setValidationResponse("ok");
        gcodeItems.get(14).setValidationResponse("ok");
        gcodeItems.get(15).setValidationResponse("ok");
        gcodeItems.get(16).setValidationResponse("ok");
        gcodeItems.get(17).setValidationResponse("ok");
        gcodeItems.get(18).setValidationResponse("ok");
        gcodeItems.get(19).setValidationResponse("ok");
        gcodeItems.get(20).setValidationResponse("ok");
        gcodeItems.get(21).setValidationResponse("ok");
        gcodeItems.get(22).setValidationResponse("ok");
        gcodeItems.get(23).setValidationResponse("ok");
    }
}

GCodeItem model:

public class GCodeItem {

    private final SimpleStringProperty gcode;
    private final SimpleStringProperty validationResponse;
    private ReadOnlyBooleanWrapper validated;
    private ReadOnlyBooleanWrapper hasError;
    private ReadOnlyIntegerWrapper errorNumber;
    private ReadOnlyStringWrapper errorDescription;

    public GCodeItem(String gcode) {
        this.gcode = new SimpleStringProperty(gcode);
        this.validationResponse = new SimpleStringProperty("");
        this.validated = new ReadOnlyBooleanWrapper();
        this.hasError = new ReadOnlyBooleanWrapper();
        this.errorNumber = new ReadOnlyIntegerWrapper();
        this.errorDescription = new ReadOnlyStringWrapper();

        validated.bind(Bindings.createBooleanBinding(
            () -> ! "".equals(getValidationResponse()),
            validationResponse
        ));

        hasError.bind(Bindings.createBooleanBinding(
            () -> ! ("ok".equals(getValidationResponse()) ||
                    "".equals(getValidationResponse())),
            validationResponse
        ));

        errorNumber.bind(Bindings.createIntegerBinding(
            () -> {
                String vResp = getValidationResponse();
                if ("ok".equals(vResp)) {
                    return 0;
                } else {
                    // should handle potential exceptions here...
                    if(vResp.contains(":")) {
                        int en = Integer.parseInt(vResp.split(":")[1]);
                        return en ;
                    } else {
                        return 0;
                    }
                }
            }, validationResponse
        ));

        errorDescription.bind(Bindings.createStringBinding(
            () -> {
                int en = getErrorNumber() ;
                return GrblDictionary.getErrorDescription(en);
            }, errorNumber
        ));
    }

    public final String getGcode() {
        return gcode.get();
    }
    public final void setGcode(String value) {
        gcode.set(value);
    }
    public SimpleStringProperty gcodeProperty() {
        return this.gcode;
    }

    public final String getValidationResponse() {
        return validationResponse.get();
    }
    public final void setValidationResponse(String value) {
        validationResponse.set(value);
    }
    public SimpleStringProperty validationResponseProperty() {
        return this.validationResponse;
    }

    public Boolean isValidated() {
        return validatedProperty().get();
    }
    public ReadOnlyBooleanProperty validatedProperty() {
        return validated.getReadOnlyProperty();
    }

    // ugly method name to conform to method naming pattern:
    public final boolean isHasError() {
        return hasErrorProperty().get();
    }
    // better method name:
    public final boolean hasError() {
        return isHasError();
    }
    public ReadOnlyBooleanProperty hasErrorProperty() {
        return hasError.getReadOnlyProperty();
    }

    public final int getErrorNumber() {
        return errorNumberProperty().get();
    }
    public ReadOnlyIntegerProperty errorNumberProperty() {
        return errorNumber.getReadOnlyProperty() ;
    }

    public final String getErrorDescription() {
        return errorDescriptionProperty().get();
    }
    public ReadOnlyStringProperty errorDescriptionProperty() {
        return errorDescription.getReadOnlyProperty();
    }
}

Supporting dictionary class (abridged):

public class GrblDictionary {

    private static final Map<Integer, String> ERRORS = Map.ofEntries(
        entry(1, "G-code words consist of a letter and a value. Letter was not found."),
        entry(2, "Numeric value format is not valid or missing an expected value."),
        entry(17, "Laser mode requires PWM outentry."),
        entry(20, "Unsupported or invalid g-code command found in block."),
        entry(21, "More than one g-code command from same modal group found in block."),
        entry(22, "Feed rate has not yet been set or is undefined.")
    );

    public static String getErrorDescription(int errorNumber) {
        return ERRORS.containsKey(errorNumber) ? ERRORS.get(errorNumber) : "Unrecognized error number.";
    }
}

Edit #2:

If I replace the TableView.setRowFactory code with TableColumn.setCellFactory as shown below I get the desired effect and editing still works. Is this a sensible solution, or should I really be using setRowFactory and getting the list changes recognised correctly by setRowFactory? In my testing it only ever seemed like the overriden updateItem method was being called when rows scrolled in to view.

colStatus.setCellFactory(tc -> new TableCell<GCodeItem, String>() {
    private final Tooltip tip = new Tooltip();
    {
        tip.setShowDelay(new Duration(250));
    }

    @Override
    protected void updateItem(String item, boolean empty) {
        super.updateItem(item, empty);

        TableRow<GCodeItem> row = this.getTableRow();
        GCodeItem rowItem = row.getItem();

        if(item == null || empty) {
            row.setStyle("");
            row.setTooltip(null);
        } else {
            if(rowItem.isValidated()) {
                if(rowItem.hasError()) {
                    row.setStyle("-fx-background-color: #ffcccc"); // red
                    tip.setText(rowItem.getErrorDescription());
                    row.setTooltip(tip);
                } else {
                    row.setStyle("-fx-background-color: #ccffdd"); // green
                    row.setTooltip(null);
                }
            } else {
                row.setStyle("");                                
                row.setTooltip(null);
            }
            setText(item);
        }
    }
});

Edit #3:

Many thanks to kleopatra and James_D I now have a solution. Overriding isItemChanged() in the row factory has solved my issue.

javafx tableview
2 Answers

The basic issue is that the table is not forcing updates on the table row when the relevant properties change. Using the "extractor" as you do with

private final ObservableList<GCodeItem> gcodeItems = FXCollections.observableArrayList(
    item -> new Observable[]{item.validatedProperty(), item.errorDescriptionProperty()});

should work, but it seems the table does not force row updates when the underlying data list fires updated type changes. (I'd consider this a bug; it's possible the JavaFX team simply doesn't consider this a supported feature.)

One approach here is to have the TableRow register a listener with the current item's validationResponseProperty() (or any other desired property), and update the row when it changes. A little care is needed here, because the current item that the row displays can change (e.g. when scrolling or when the data in the list change), so you need to observe the itemProperty() and ensure the listener is registered with the property in the correct item. This looks like:

    // Set row factory
    tblGCode.setRowFactory(tbl -> new TableRow<GCodeItem>() {

        private final Tooltip tip = new Tooltip();

        private final ChangeListener<String> listener = (obs, oldValidationResponse, newValidationResponse) -> 
            updateStyleAndTooltip();

        {
            tip.setShowDelay(new Duration(250));
            itemProperty().addListener((obs, oldItem, newItem) -> {
                if (oldItem != null) {
                    oldItem.validationResponseProperty().removeListener(listener);
                }
                if (newItem != null) {
                    newItem.validationResponseProperty().addListener(listener);
                }
                updateStyleAndTooltip();
            });
        }

        @Override
        protected void updateItem(GCodeItem item, boolean empty) {
            super.updateItem(item, empty);
            updateStyleAndTooltip();

        }

        private void updateStyleAndTooltip() {
            GCodeItem item = getItem();
            if(item == null || isEmpty()) {
                setStyle("");
                setTooltip(null);
            } else {
                if(item.isValidated()) {
                    if(item.hasError()) {
                        setStyle("-fx-background-color: #ffcccc"); // red
                        tip.setText(item.getErrorDescription());
                        setTooltip(tip);
                    } else {
                        setStyle("-fx-background-color: #ccffdd"); // green
                        setTooltip(null);
                    }
                } else {
                    setStyle("");                                
                    setTooltip(null);
                }
            }   
        }
    });

Note now you no longer need the list created with the extractor:

private final ObservableList<GCodeItem> gcodeItems = FXCollections.observableArrayList();

and indeed this would work without the dependent properties being implemented as JavaFX (bound) properties (as long as they are kept consistent with the other data); though I still consider the version you currently have to be the better implementation.

BTW, as a brief aside, your style will work better if you use -fx-background instead of -fx-background-color. By default, the background color (-fx-background-color) of a row is set equal to -fx-background. However, the color of the text is made dependent on -fx-background: if -fx-background is light, then a dark text is used, and vice-versa. By default, selecting a row changes -fx-background, which results in a change in text color, so in your implementation you'll notice the text is hard to read in a selected (validated or error) row. In short, modifying -fx-background will play better with selection than modifying -fx-background-color.

user_21891270

The place to install conditional row styling is a custom TableRow - nowhere else. As always, contained nodes - like tableCells here - must not interfere with their parent's state, never-ever!.

The base problem with such styling in a tableRow is that row.updateItem(...) is not called when we might expect it, in particular, not after an update of a property. There are two options to solve (apart from making sure that the table is notified at all on updates of properties not shown in columns by using an extractor as already suggested by James)

A quick option is to unconditionally force an update always, by overriding isItemChanged: 

@Override
protected boolean isItemChanged(GCodeItem oldItem,
        GCodeItem newItem) {
    return true;
}

Another option is to update the styling in both updateItem(...) and updateIndex(...) (the latter is called always when anything chances in the data)

@Override
protected void updateIndex(int i) {
    super.updateIndex(i);
    doUpdateItem(getItem());
}

@Override
protected void updateItem(CustomItem item, boolean empty) {
    super.updateItem(item, empty);
    doUpdateItem(item);
}

protected void doUpdateItem(CustomItem item) {
    // actually do the update and styling
}

Choosing between both depends on context and requirements. Have seen contexts where the one or other didn't work properly, without a clean indication when/why that happened (too lazy to really dig ;)

Aside - a couple of comments to the question which did improve considerably over time but still is not quite a [MCVE]:

  • the data item is both too complex (for basic styling, there's no need for several direct/indirect intertwined conditions) and not complete enough to really demonstrate the requirements (like update after editing the value that drives the error condition)
  • the data item exposes properties (good thing!) - so use those (vs. PropertyValueFactory, bad thing!)
  • with a writable property a custom edit commit handler is not needed
  • TableColumn is editable by default, making col.setEditable(true) a no-op. If only some columns should editable, the others must be set to false
user_2036570
Related