JavaFX TableView: Rapid change in items list not reflected

Question

It is hard to explain so I'll use an example:

@Override
public void start(Stage primaryStage) throws Exception
{
    final VBox vbox = new VBox();
    final Scene sc = new Scene(vbox);
    primaryStage.setScene(sc);

    final TableView<Person> table = new TableView<>();
    final TableColumn<Person, String> columnName = new TableColumn<Person, String>("Name");
    table.getColumns().add(columnName);

    final ObservableList<Person> list = FXCollections.observableArrayList();
    list.add(new Person("Hello"));
    list.add(new Person("World"));
    Bindings.bindContent(table.getItems(), list);

    columnName.setCellValueFactory(new PropertyValueFactory<>("name"));

    vbox.getChildren().add(table);

    final Button button = new Button("test");
    button.setOnAction(event ->
    {
        final Person removed = list.remove(0);
        removed.setName("Bye");
        list.add(0, removed);
    });
    vbox.getChildren().add(button);


    primaryStage.show();
}

public static class Person
{
    private String name = "";

    public Person(String n)
    {
        name = n;
    }

    public String getName()
    {
        return name;
    }

    public void setName(String n)
    {
        name = n;
    }
}

In this example, I show a TableView with a single column named "Name". Running this sample code, you will get two rows: first row with "Hello" in "Name" column; and second row with "World" in "Name" column.

Additionally, there is a button, this button removes the first Person object from the list, then makes some changes to the object, then adds it back in at the same index. Doing so would cause any ListChangeListener added to the ObservableList to be triggered, and I have tested this to be true.

I would expect the row with "Hello" to be replaced with "Bye", but it seems like the TableView continues to show "Hello". If I used a TimeLine to add delay before I add the removed Person object back to the list, it would change to "Bye".

final Timeline tl = new Timeline(new KeyFrame(Duration.millis(30), ae -> list.add(0, removed)));
tl.play();

Is there something weird with the API? Is there any way to do this without this problem?

Answer 1

This is essentially expected behavior.

Note that (and I'm guessing you are trying to work around this issue), if you simply called

list.get(0).setName("Bye");

which has the same effect in terms of the underlying data, the table would not update as it has no way of being notified that the String field name in the element of the list has changed.

The code

Person removed = list.remove(0);
removed.setName("Bye");
list.add(0, removed);

is really equivalent to list.get(0).setName("Bye");: you just temporarily remove the item from the list before changing it, and then add it back. As far as the list is concerned, the net result is the same. I guess you are doing this in the hope that removing and replacing the item from the list will persuade the table to notice the state of the item has changed. There's no guarantee this will be the case. Here is what's happening:

The binding between your two lists:

Bindings.bindContent(table.getItems(), list);

works like any other binding: it defines how to get the value of the binding (the elements of list), and marks the data as invalid if list is invalidated at any time. The latter happens when you add and remove elements from list.

The TableView will not perform layout every time the binding to the list changes; instead, when then binding is invalidated (add or remove an element), then the table view marks itself as potentially needing to be redrawn. Then, on the next rendering pulse, the table will check the data and see if it really needs to be redrawn, and re-render if needed. There are obvious performance-saving features of this implementation.

So what happens with your code is that an item is removed from the list, causing the binding to be marked as invalid. The item is then changed (by calling setName(...)), and the same item is then added back into the list at the same position. This also causes the binding to be marked as invalid, which has no effect (it is already invalid).

No rendering pulse can occur between the removal and re-addition of this element. Consequently, the first time the table actually looks at the changes that were made to the list has to be after the entire remove-change-add process. At that point, the table will see that the list still contains the exact same elements in the exact same order that it previously contained. (The internal state of one of the elements has changed, but since this is not an observable value - not a JavaFX property - the table is unaware of this.) Consequently, the table sees no changes (or sees that all the changes have cancelled each other out), and doesn't re-render.

In the case where you add the pause, then a rendering frame (or two) occurs between the removal of the item and its re-addition. Consequently, the table actually renders one or two frames without the item, and when it is added back in, it adds it back and renders the current value. (You might, possibly, be able to make the behavior unpredictable, by pausing for 16 or 17 milliseconds, which is right on the cusp of the time for one rendering frame.)

It's not clear what you really intend to do. If you are trying to persuade the table to update without using JavaFX properties, you can do

list.get(0).setName("Bye");
table.refresh();

though this is not a very satisfactory solution.

Note too that

list.remove(0);
list.add(0, new Person("Bye"));

will also work (since now the added element is not the same as the removed element).

The better approach is to implement your model class with JavaFX properties:

public static class Person
{
    private final StringProperty name = new SimpleStringProperty("");

    public Person(String n)
    {
        setName(n);
    }

    public StringProperty nameProperty() {
        return name ;
    }

    public final String getName()
    {
        return nameProperty().get();
    }

    public final void setName(String n)
    {
        nameProperty().set(n);
    }
}

and then simply calling

list.get(0).setName("Bye");

will update the table (because the cell will be observing the property).