behaviour duplicate and inverse rows in a tableView (javafx) - javafx

Question

I have simplified the code to the following in an update of tableview.
For some reasons I do not use the property of JavaFx as one would expect, perhaps this behaviour is linked to this. Coming from JTable and observer pattern I wanted to try how to implement this in javafx. However the data of my table are all fine but when I am trying to change the colour of the background some more rows appears outside the range of the table. I have checked the size of the Observable list and it is as expected.
I cannot really see or understand how the datas.set generates this behaviour, would it be something that I miss with my code or then an expected behaviour with Javafx tableview.
Basically the logic used is I receive an update from another class (which I simulate here with the Thread), then I will update the corresponding row of the observable list with the updated data.
Thanks.
package application;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;
public class Main extends Application {
#Override
public void start(Stage primaryStage) {
try {
Pane root = new Pane();
root.getChildren().add(new TableModel().getTable());
Scene scene = new Scene(root,400,800);
scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
} catch(Exception e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
launch(args);
}
}
package application;
import java.util.Random;
import javafx.application.Platform;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.beans.value.ObservableValue;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.control.TableCell;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableColumn.CellDataFeatures;
import javafx.scene.control.TableView;
import javafx.util.Callback;
public class TableModel{
private TableView<TableData> table = new TableView<>();
private ObservableList<TableData> datas;
#SuppressWarnings("unchecked")
public TableModel() {
datas = FXCollections.observableArrayList();
final TableColumn<TableData, Integer> cId = new TableColumn<>("ID");
cId.setCellValueFactory(
new Callback<TableColumn.CellDataFeatures<TableData, Integer>, ObservableValue<Integer>>() {
#Override
public ObservableValue<Integer> call(CellDataFeatures<TableData, Integer> param) {
return new SimpleObjectProperty<Integer>(param.getValue().getId());
}
});
cId.setCellFactory(e -> new TableCell<TableData, Integer>() {
#Override
public void updateItem(Integer item, boolean empty) {
// Always invoke super constructor.
super.updateItem(item, empty);
if (item == null || empty) {
setText(null);
} else {
setText(String.valueOf(item));
if (getIndex() == 0) {
this.setStyle("-fx-background-color: green;");
}else {
this.setStyle("-fx-background-color: red;");
}
}
}
});
table.getColumns().addAll(cId);
table.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);
table.setItems(datas);
table.setPrefSize(150, 450);
datas.add(0, new TableData(0));
datas.add(1, new TableData(0));
datas.add(2, new TableData(0));
datas.add(3, new TableData(0));
datas.add(4, new TableData(0));
new Thread(()->{
while(true) {
Random rand = new Random(10);
update(rand.nextInt());
try {
Thread.sleep(3000);
} catch (InterruptedException e1) {
e1.printStackTrace();
}
}
}).start(); ;
}
public TableView<TableData> getTable() {
return table;
}
public void update(int num) {
TableData data = new TableData(num);
Platform.runLater(() -> {
datas.set(0, data);
});
}
private class TableData {
private SimpleIntegerProperty cId = new SimpleIntegerProperty();
public TableData(Integer conid) {
this.cId.setValue(conid);
}
public Integer getId() {
return cId.get();
}
}
}
Output with datas.set(0, data);
Output without datas.set(0, data);

Answer 1

There are 4 issues with your code:
Issue 1
final TableColumn<TableData, Integer> cId = new TableColumn<>("ID");
cId.setCellValueFactory(
new Callback<TableColumn.CellDataFeatures<TableData, Integer>, ObservableValue<Integer>>() {
#Override
public ObservableValue<Integer> call(CellDataFeatures<TableData, Integer> param) {
return new SimpleObjectProperty<Integer>(param.getValue().getId());
}
});
This prevents changes of the property from triggering updates automatically. E.g.
table.getItems().get(0).cId.set(5);
would not result in an update of the table. To fix this return the property itself, not a newly created property that is initialized with the property's value at the time of the cellValueFactory's execution.
final TableColumn<TableData, Number> cId = new TableColumn<>("ID");
cId.setCellValueFactory(
new Callback<TableColumn.CellDataFeatures<TableData, Number>, ObservableValue<Number>>() {
#Override
public ObservableValue<Number> call(TableColumn.CellDataFeatures<TableData, Number> param) {
return param.getValue().cId;
}
});
Issue 2
#Override
public void updateItem(Integer item, boolean empty) {
// Always invoke super constructor.
super.updateItem(item, empty);
if (item == null || empty) {
setText(null);
} else {
setText(String.valueOf(item));
if (getIndex() == 0) {
this.setStyle("-fx-background-color: green;");
}else {
this.setStyle("-fx-background-color: red;");
}
}
}
This implementation is incorrect given the fact that cells may become empty after being filled with a value. You should make sure the "empty" look is restored in case the cell becomes empty. This requires you to clear the style property:
#Override
protected void updateItem(Number item, boolean empty) {
// Always invoke supertype's implementation
super.updateItem(item, empty);
if (item == null || empty) {
setText(null);
setStyle(null);
} else {
setText(item.toString());
if (getIndex() == 0) {
this.setStyle("-fx-background-color: green;");
} else {
this.setStyle("-fx-background-color: red;");
}
}
}
Issues 3 & 4
new Thread(()->{
while(true) {
Random rand = new Random(10);
update(rand.nextInt());
try {
Thread.sleep(3000);
} catch (InterruptedException e1) {
e1.printStackTrace();
}
}
}).start();
This thread will remain alive even if the GUI is shut down preventing the program from terminating. You can easily fix this by using a daemon thread.
Futhermore Random initialized with a seed returns deterministic results. Since you reinitialize Random with the same seed in every iteration of the loop, the value rand.nextInt() returns is always the same. You need to move the initialisation of the Random outside of the loop.
Thread thread = new Thread(() -> {
Random rand = new Random(10);
while (true) {
update(rand.nextInt());
try {
Thread.sleep(3000);
} catch (InterruptedException e1) {
e1.printStackTrace();
}
}
});
thread.setDaemon(true);
thread.start();