We Keep Coding

JavaFx : How to make a persistent selection with CSS in a TableView

Update: inserted project (reproductible example) and last details
I have an application that is displaying a TableView filled with simple objects (observable list)
I want to display selected items (rows) in a TableView highlighting them.
Ex: If the user press 'Insert' i update (in the observable list) the object which is selected. A boolean in the object will do. The objects are 'marked'; the user can do something else.
I cannot use myTableView.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE); as the user will loose the selection as soon as a key is pressed or a mouse clik happens.
With that in mind, this means i'm managing keyboard like so:
public boolean implementListenerPackage(Scene s) {
//some init then...
s.setOnKeyReleased(new EventHandler<KeyEvent>() {
#Override
public void handle(KeyEvent ke) {
switch (ke.getCode()) {
case INSERT:
setObservableListObjectSelect();
break;
}
}
});
}
The object in the observable list is rather simple:
public class myObject {
private boolean selected;
private String otherStuff = "";
// Then constructor , getters and setters
And i have a MouseEvent management to handle other actions as well. When i'm creating my TableView i add this:
myTableView.setRowFactory(rftv-> {
TableRow<type> rowObj = new TableRow<>();
rowObj.setOnMousePressed(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent e) {
if (e.getClickCount() == 2 && (!rowObj.isEmpty())) {
SomeClass.doSomethingForDoubleClik()
} else { // Simple clic
SomeClass.doSomethingForSimpleClik()
}
}
});
return rowObj;
});
My goal is to change the CSS of a row when the myObject boolean changes. And by doing so make the user selection highlighted even though the user click on another row.
I tried :
A lot of reading on this website, but only to find simple examples. Not the one i have with several obstacles at the same time.
to implement more things in the rowFactory. But i couldn't do it. If it compiles, then it crashes with a nullpointerexception. I never been good at those tricky syntax things.
to do it directly from the keyboard management but only to find it's rather complicated. I have to get the selected object, update it, then find the selected cells and change the CSS one by one (column logic).
to implement a "binding" (An example here) between the object and the row but only to find myself wondering how to implement it as it was an answer for a different problem 'flavor'.
It's probably in front of my eyes but i can't see it.
update:
Bear in mind that
the keyboard management is centralized.
there is already a factory set on the tableView.
They are several TableView in the original application so i whish the CSS style change automatically and not in some kind of 'hardcoded' fashion.
The minimal code:
package application;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.EventHandler;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableRow;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.VBox;
public class Main extends Application {
Label lbl01 = new Label("Information");
#Override
public void start(Stage primaryStage) {
try {
TableView tv1 = new TableView();
TableColumn<MyObject, String> column1 = new TableColumn<>("Col 01");
column1.setCellValueFactory(new PropertyValueFactory<>("keyboardSelected"));
TableColumn<MyObject, String> column2 = new TableColumn<>("Col 02");
column2.setCellValueFactory(new PropertyValueFactory<>("dataA"));
TableColumn<MyObject, String> column3 = new TableColumn<>("Col 03");
column3.setCellValueFactory(new PropertyValueFactory<>("dataB"));
TableColumn<MyObject, String> column4 = new TableColumn<>("Col 04");
column4.setCellValueFactory(new PropertyValueFactory<>("dataC"));
tv1.getColumns().add(column1);
tv1.getColumns().add(column2);
tv1.getColumns().add(column3);
tv1.getColumns().add(column4);
ObservableList<MyObject> olm1 = FXCollections.observableArrayList();
olm1.addAll(new MyObject(false, "Object01 A", "Object01 B", "Object01 C"),
new MyObject(false, "Object02 A", "Object02 B", "Object02 C"),
new MyObject(false, "Object03 A", "Object03 B", "Object03 C"),
new MyObject(false, "Object04 A", "Object04 B", "Object04 C"),
new MyObject(false, "Object05 A", "Object05 B", "Object05 C")
);
tv1.setItems(olm1);
tv1.setRowFactory(dc -> {
TableRow<MyObject> rowObj = new TableRow<>();
rowObj.setOnMousePressed(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent e) {
if (e.getClickCount() == 2 && (!rowObj.isEmpty())) {
lbl01.setText("Double click on line " + tv1.getSelectionModel().getSelectedIndex());
} else {
lbl01.setText("Single click on line " + +tv1.getSelectionModel().getSelectedIndex());
}
}
});
return rowObj;
});
VBox root = new VBox(tv1, lbl01);
Scene scene = new Scene(root, 512, 640);
primaryStage.setScene(scene);
KeyboardManagement km = new KeyboardManagement();
km.implementListener(scene, lbl01, tv1);
primaryStage.show();
} catch (Exception e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
launch(args);
}
}
package application;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TableView;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
public class KeyboardManagement {
public KeyboardManagement() {
}
public boolean implementListener(Scene s, Label l, TableView tv1) {
boolean retRep = false;
try {
s.setOnKeyReleased(new EventHandler<KeyEvent>() {
#Override
public void handle(KeyEvent ke) {
if (ke.getCode() == KeyCode.SPACE) {
MyObject m1 = (MyObject) tv1.getSelectionModel().getSelectedItem();
tv1.refresh();
m1.setKeyboardSelected(!m1.isKeyboardSelected());
l.setText("Space was pressed / TableView Line :" + tv1.getSelectionModel().getSelectedIndex()
+ ". " + m1.toString());
}
}
});
} catch (Exception e) {
}
return retRep;
}
}
package application;
public class MyObject {
private boolean keyboardSelected;
private String dataA;
private String dataB;
private String dataC;
public MyObject(boolean keyboardSelected, String dataA, String dataB, String dataC) {
super();
this.keyboardSelected = keyboardSelected;
this.dataA = dataA;
this.dataB = dataB;
this.dataC = dataC;
}
public boolean isKeyboardSelected() {
return keyboardSelected;
}
public void setKeyboardSelected(boolean keyboardSelected) {
this.keyboardSelected = keyboardSelected;
}
public String getDataA() {
return dataA;
}
public void setDataA(String dataA) {
this.dataA = dataA;
}
public String getDataB() {
return dataB;
}
public void setDataB(String dataB) {
this.dataB = dataB;
}
public String getDataC() {
return dataC;
}
public void setDataC(String dataC) {
this.dataC = dataC;
}
#Override
public String toString() {
return "MyObject [keyboardSelected=" + keyboardSelected + ", dataA=" + dataA + ", dataB=" + dataB + ", dataC="
+ dataC + "]";
}
}

Found it!
Simple and complex at the same time.
The trick is to insert at the right place a listener on the object property.
Inside the rowfactory definition.
Before the #override
Pass the row object as an argument and 'voila'.
Something like :
rowObj.itemProperty().addListener((observable, oldValue, newValue) -> updateTableRowCss(rowObj, newValue));
Notes:
You can add several listeners on different object properties.
I strongly suggest you create a method the listener will call. Sometimes the IDE syntax analyzers are making bloodshed in the screen. It doesn't help finding errors in this type of code.
From the tests i made, it seems that the modifications on the style you do will preval (like more important) on the already loaded style. Which is fine.
This way you keep a centralized keyboard management (like in this example) and the mouse event management in the factory.
The cursor still moves freely and you keep an object selection you can reuse later.
The modified example code from above:
package application;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.EventHandler;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableRow;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.VBox;
public class Main extends Application {
Label lbl01 = new Label("Information");
#Override
public void start(Stage primaryStage) {
try {
TableView tv1 = new TableView();
TableColumn<MyObject, String> column1 = new TableColumn<>("Col 01");
column1.setCellValueFactory(new PropertyValueFactory<>("keyboardSelected"));
TableColumn<MyObject, String> column2 = new TableColumn<>("Col 02");
column2.setCellValueFactory(new PropertyValueFactory<>("dataA"));
TableColumn<MyObject, String> column3 = new TableColumn<>("Col 03");
column3.setCellValueFactory(new PropertyValueFactory<>("dataB"));
TableColumn<MyObject, String> column4 = new TableColumn<>("Col 04");
column4.setCellValueFactory(new PropertyValueFactory<>("dataC"));
tv1.getColumns().add(column1);
tv1.getColumns().add(column2);
tv1.getColumns().add(column3);
tv1.getColumns().add(column4);
ObservableList<MyObject> olm1 = FXCollections.observableArrayList();
olm1.addAll(new MyObject(false, "Object01 A", "Object01 B", "Object01 C"),
new MyObject(false, "Object02 A", "Object02 B", "Object02 C"),
new MyObject(false, "Object03 A", "Object03 B", "Object03 C"),
new MyObject(false, "Object04 A", "Object04 B", "Object04 C"),
new MyObject(false, "Object05 A", "Object05 B", "Object05 C")
);
tv1.setItems(olm1);
tv1.setRowFactory(dc -> {
TableRow<MyObject> rowObj = new TableRow<>();
rowObj.itemProperty().addListener((observable, oldValue, newValue) -> updateTableRowCss(rowObj, newValue));
rowObj.setOnMousePressed(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent e) {
if (e.getClickCount() == 2 && (!rowObj.isEmpty())) {
lbl01.setText("Double click on line " + tv1.getSelectionModel().getSelectedIndex());
} else {
lbl01.setText("Single click on line " + +tv1.getSelectionModel().getSelectedIndex());
}
}
});
return rowObj;
});
VBox root = new VBox(tv1, lbl01);
Scene scene = new Scene(root, 512, 640);
primaryStage.setScene(scene);
KeyboardManagement km = new KeyboardManagement();
km.implementListener(scene, lbl01, tv1);
primaryStage.show();
} catch (Exception e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
launch(args);
}
private void updateTableRowCss(TableRow<MyObject> rowObj, MyObject item) {
// On doit vérifier si null
if (item != null ) {
if (item.isKeyboardSelected()) {
rowObj.setStyle("-fx-background-color: #FF000080;");
} else {
rowObj.setStyle("");
}
}
}
}
Final result

EDIT: Model for TableView with dynamic column number

I am revising my question based on the comments. I have a JavaFX TableView for which the number of checkbox columns is only known at runtime. So, to create the columns, I do:
TableColumn attributeColumn = new TableColumn("Attribut");
attributeColumn.setCellValueFactory(new PropertyValueFactory<AttributeRow, String>("name"));
attributeTable.getColumns().add(attributeColumn);
for (String group : companyGroups)
{
TableColumn< AttributeRow, Boolean > groupColumn = new TableColumn<>( group );
groupColumn.setCellFactory(CheckBoxTableCell.forTableColumn(groupColumn));
groupColumn.setCellValueFactory( f -> f.getValue().activeProperty());
groupColumn.setEditable(true);
attributeTable.getColumns().add(groupColumn);
}
The question is, how would a table model look like for this TableView? If there were a fixed number of checkbox columns, say 2 columns, my model looks like this:
public class AttributeRow {
private SimpleStringProperty name;
private SimpleBooleanProperty active = new SimpleBooleanProperty(false);
public AttributeRow(String name, Boolean active) {
this.name= new SimpleStringProperty(name);
}
public SimpleStringProperty nameProperty() {
if (name == null) {
name = new SimpleStringProperty(this, "name");
}
return name;
}
public String getAttributeName() {
return name.get();
}
public void setAttributeName(String fName) {
name.set(fName);
}
public final SimpleBooleanProperty activeProperty() {
return this.active;
}
public final boolean isActive() {
return this.activeProperty().get();
}
public final void setActive(final boolean active) {
this.activeProperty().set(active);
}
}
This model works if I have one string column and one checkbox column. But what do I do, if I have muliple checkbox columns for which the number is only known at runtime?

You haven't really described the structure of the data, but it looks like there is some kind of collection of Strings (companyGroups) and each row is the table is represented by a String (name) and one boolean for each element of companyGroups. So one way to do this would just be to define a Map<String, BooleanProperty> in the model class AttributeRow, where the key in the map is intended to be an element of companyGroups:
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javafx.beans.property.BooleanProperty;
import javafx.beans.property.SimpleBooleanProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
public class AttributeRow {
private final StringProperty name = new SimpleStringProperty();
private final Map<String, BooleanProperty> activeByGroup = new HashMap<>();
public AttributeRow(List<String> companyGroups) {
for (String group : companyGroups) {
activeByGroup.put(group, new SimpleBooleanProperty()) ;
}
}
public final BooleanProperty activeProperty(String group) {
// might need to deal with the case where
// there is no entry in the map for group
// (else calls to isActive(...) and setActive(...) with
// a non-existent group will give a null pointer exception):
return activeByGroup.get(group) ;
}
public final boolean isActive(String group) {
return activeProperty(group).get();
}
public final void setActive(String group, boolean active) {
activeProperty(group).set(active);
}
public final StringProperty nameProperty() {
return this.name;
}
public final String getName() {
return this.nameProperty().get();
}
public final void setName(final String name) {
this.nameProperty().set(name);
}
}
There is nothing special about the cell value factory for the columns - it still just has to map each row to the appropriate observable property for the column:
for (String group : groups) {
TableColumn<AttributeRow, Boolean> groupColumn = new TableColumn<>(group);
groupColumn.setCellFactory(CheckBoxTableCell.forTableColumn(groupColumn));
groupColumn.setCellValueFactory(cellData -> cellData.getValue().activeProperty(group));
attributeTable.getColumns().add(groupColumn);
}
and of course to update values you just update the model:
Button selectAll = new Button("Select all");
selectAll.setOnAction(e -> {
for (AttributeRow row : attributeTable.getItems()) {
for (String group : groups) {
row.setActive(group, true);
}
}
});
Here is a SSCCE:
import java.util.Arrays;
import java.util.List;
import java.util.stream.Collectors;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.CheckBoxTableCell;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
public class TableWithMappedBooleans extends Application {
private static final List<String> groups = Arrays.asList("Group 1", "Group 2", "Group 3", "Group 4");
#Override
public void start(Stage primaryStage) {
TableView<AttributeRow> attributeTable = new TableView<>();
attributeTable.setEditable(true);
TableColumn<AttributeRow, String> attributeColumn = new TableColumn<>("Attribute");
attributeColumn.setCellValueFactory(cellData -> cellData.getValue().nameProperty());
attributeTable.getColumns().add(attributeColumn);
for (String group : groups) {
TableColumn<AttributeRow, Boolean> groupColumn = new TableColumn<>(group);
groupColumn.setCellFactory(CheckBoxTableCell.forTableColumn(groupColumn));
groupColumn.setCellValueFactory(cellData -> cellData.getValue().activeProperty(group));
attributeTable.getColumns().add(groupColumn);
}
// generate data:
for (int i = 1 ; i <= 10; i++) {
AttributeRow row = new AttributeRow(groups);
row.setName("Attribute "+i);
attributeTable.getItems().add(row);
}
// button to select everything:
Button selectAll = new Button("Select all");
selectAll.setOnAction(e -> {
for (AttributeRow row : attributeTable.getItems()) {
for (String group : groups) {
row.setActive(group, true);
}
}
});
// for debugging, to check data are updated from check boxes:
Button dumpDataButton = new Button("Dump data");
dumpDataButton.setOnAction(e -> {
for (AttributeRow row : attributeTable.getItems()) {
String groupList = groups.stream()
.filter(group -> row.isActive(group))
.collect(Collectors.joining(", "));
System.out.println(row.getName() + " : " + groupList);
}
System.out.println();
});
HBox buttons = new HBox(5, selectAll, dumpDataButton);
buttons.setAlignment(Pos.CENTER);
buttons.setPadding(new Insets(5));
BorderPane root = new BorderPane(attributeTable, null, null, buttons, null);
Scene scene = new Scene(root);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}

TableVew - Edit cell when KeyEvent is thrown

I have an event listener on a TableView that listens for keyboard event.
// Add event listener to table
table.setOnKeyTyped(event -> {
TablePosition<SimpleStringProperty, String> focusedCell = table.getFocusModel().getFocusedCell();
if (focusedCell != null)
{
table.getItems().get(focusedCell.getRow()).set(event.getCharacter());
table.edit(focusedCell.getRow(), focusedCell.getTableColumn());
}
});
I am having problems with updating the cell with the new data when a user clicks enter or changes focus to another cell. When you click enter or change focus, the cell becomes empty. I'm not sure why. How can I save the data and update the cell with the new data.
// Here is the full code.
import javafx.application.Application;
import javafx.beans.property.SimpleStringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.TableCell;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TablePosition;
import javafx.scene.control.TableView;
import javafx.scene.control.TextField;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class TableViewEdit extends Application
{
#Override
public void start(Stage primaryStage)
{
TableView<SimpleStringProperty> table = new TableView<SimpleStringProperty>();
table.getSelectionModel().setCellSelectionEnabled(true);
table.setEditable(true);
table.getColumns().add(this.createColumn());
ObservableList<SimpleStringProperty> rowData = FXCollections.observableArrayList();
//table.getItems().addAll(rowData);
for (int j = 0; j < 10; j++)
{
rowData.add(new SimpleStringProperty(String.format("Cell [%d", j)));
}
table.setItems(rowData);
table.setOnKeyTyped(event -> {
TablePosition<SimpleStringProperty, String> focusedCell = table.getFocusModel().getFocusedCell();
if (focusedCell != null)
{
table.getItems().get(focusedCell.getRow()).set(event.getCharacter());
table.edit(focusedCell.getRow(), focusedCell.getTableColumn());
}
});
Scene scene = new Scene(new BorderPane(table), 880, 600);
primaryStage.setScene(scene);
primaryStage.show();
}
private TableColumn<SimpleStringProperty, String> createColumn()
{
TableColumn<SimpleStringProperty, String> col = new TableColumn<>("Column ");
col.setCellValueFactory(cellData -> cellData.getValue());
col.setCellFactory(column -> new EditCell());
return col;
}
private static class EditCell extends TableCell<SimpleStringProperty, String>
{
private final TextField textField = new TextField();
EditCell()
{
this.textProperty().bind(this.itemProperty());
this.setGraphic(this.textField);
this.setContentDisplay(ContentDisplay.TEXT_ONLY);
this.textField.setOnAction(evt -> this.commitEdit(this.textField.getText()));
this.textField.focusedProperty().addListener((obs, wasFocused, isNowFocused) -> {
if (!isNowFocused)
{
this.commitEdit(this.textField.getText());
}
});
}
#Override
public void startEdit()
{
super.startEdit();
this.textField.setText(this.getItem());
this.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
this.textField.requestFocus();
}
#Override
public void cancelEdit()
{
super.cancelEdit();
this.setContentDisplay(ContentDisplay.TEXT_ONLY);
}
#Override
public void commitEdit(String text)
{
super.commitEdit(text);
this.setContentDisplay(ContentDisplay.TEXT_ONLY);
}
}
public static void main(String[] args)
{
launch(args);
}
}

These get really tricky; I think anything "behavior-related" (i.e. standard controls reacting to user input) is hard to change and generally not well supported in JavaFX. Hopefully this is an area of the API that will be improved...
There seem to be a couple of different issues. I think that what is happening with the Enter key, is that although this generates an ActionEvent on the text field, which commits the edit, etc, the keyTyped event still propagates back to the table, causing it to re-enter editing mode. A fix for this seems to be to use a keyPressed handler on the table instead (though to be honest this doesn't feel very robust).
The code relies on the default onEditCommit handler on the table column to actually change the property value. The onEditCommit handler is invoked by the default table cell's commitEdit method. The problem with calling commitEdit(...) on losing focus is that the default commitEdit method first checks if the cell is in an editing state, and does nothing if it's not. It appears that when the cell loses focus, it is taken out of the editing state before the focusProperty listener is invoked, so the onEditCommit handler is never called. (As an aside, this also prevents example 13-11 "Alternative solution of cell editing" (sic) from working correctly in the JDK 8 u25 (the current version).)
The only fix I can see for this second issue is to directly update the property from the commitEdit(...) method. This requires the cell have a reference to the property, which breaks the nice separation between the cell and the cell value.
I rewrote the example using the usual Person example and incorporated these two fixes. This example works quite well, though as I said some parts feel as though they are not very robust:
import java.util.function.Function;
import javafx.application.Application;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.scene.Scene;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.TableCell;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TablePosition;
import javafx.scene.control.TableView;
import javafx.scene.control.TextField;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class TableViewEditOnType extends Application {
#Override
public void start(Stage primaryStage) {
TableView<Person> table = new TableView<>();
table.getSelectionModel().setCellSelectionEnabled(true);
table.setEditable(true);
table.getColumns().add(createColumn("First Name", Person::firstNameProperty));
table.getColumns().add(createColumn("Last Name", Person::lastNameProperty));
table.getColumns().add(createColumn("Email", Person::emailProperty));
table.getItems().addAll(
new Person("Jacob", "Smith", "jacob.smith#example.com"),
new Person("Isabella", "Johnson", "isabella.johnson#example.com"),
new Person("Ethan", "Williams", "ethan.williams#example.com"),
new Person("Emma", "Jones", "emma.jones#example.com"),
new Person("Michael", "Brown", "michael.brown#example.com")
);
table.setOnKeyPressed(event -> {
TablePosition<Person, ?> pos = table.getFocusModel().getFocusedCell() ;
if (pos != null) {
table.edit(pos.getRow(), pos.getTableColumn());
}
});
Scene scene = new Scene(new BorderPane(table), 880, 600);
primaryStage.setScene(scene);
primaryStage.show();
}
private TableColumn<Person, String> createColumn(String title, Function<Person, StringProperty> property) {
TableColumn<Person, String> col = new TableColumn<>(title);
col.setCellValueFactory(cellData -> property.apply(cellData.getValue()));
col.setCellFactory(column -> new EditCell(property));
return col ;
}
private static class EditCell extends TableCell<Person, String> {
private final TextField textField = new TextField();
private final Function<Person, StringProperty> property ;
EditCell(Function<Person, StringProperty> property) {
this.property = property ;
textProperty().bind(itemProperty());
setGraphic(textField);
setContentDisplay(ContentDisplay.TEXT_ONLY);
textField.setOnAction(evt -> {
commitEdit(textField.getText());
});
textField.focusedProperty().addListener((obs, wasFocused, isNowFocused) -> {
if (! isNowFocused) {
commitEdit(textField.getText());
}
});
}
#Override
public void startEdit() {
super.startEdit();
textField.setText(getItem());
setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
textField.requestFocus();
}
#Override
public void cancelEdit() {
super.cancelEdit();
setContentDisplay(ContentDisplay.TEXT_ONLY);
}
#Override
public void commitEdit(String text) {
super.commitEdit(text);
Person person = getTableView().getItems().get(getIndex()) ;
StringProperty cellProperty = property.apply(person);
cellProperty.set(text);
setContentDisplay(ContentDisplay.TEXT_ONLY);
}
}
public static class Person {
private final StringProperty firstName = new SimpleStringProperty();
private final StringProperty lastName = new SimpleStringProperty();
private final StringProperty email = new SimpleStringProperty();
public Person(String firstName, String lastName, String email) {
setFirstName(firstName);
setLastName(lastName);
setEmail(email);
}
public final StringProperty firstNameProperty() {
return this.firstName;
}
public final java.lang.String getFirstName() {
return this.firstNameProperty().get();
}
public final void setFirstName(final java.lang.String firstName) {
this.firstNameProperty().set(firstName);
}
public final StringProperty lastNameProperty() {
return this.lastName;
}
public final java.lang.String getLastName() {
return this.lastNameProperty().get();
}
public final void setLastName(final java.lang.String lastName) {
this.lastNameProperty().set(lastName);
}
public final StringProperty emailProperty() {
return this.email;
}
public final java.lang.String getEmail() {
return this.emailProperty().get();
}
public final void setEmail(final java.lang.String email) {
this.emailProperty().set(email);
}
}
public static void main(String[] args) {
launch(args);
}
}

JavaFX TableView use checkboxes to populate list

I'm fairly new to JavaFX and I'm trying to accomplish this principle in JavaFX: I've got a TableView populated with Student objects. I want the first column to be a checkbox with which I can select each row to perform a bulk action on the selected items (as commonly seen in for example mail applications).
I figured I shouldn't add a SimpleBooleanProperty to the Student class since it is only used in the view layer, which is why I thought I could implement it like this: when a checkbox is checked, the student gets added to a List selectedStudents; when it is unchecked, it is removed. Is this a good approach?
This is the code I've got so far (mainly based on copy-pasting from similar solutions):
voornaamKolom.setCellValueFactory(new PropertyValueFactory<Student, String>("name"));
familienaamKolom.setCellValueFactory(new PropertyValueFactory<Student, String>("fname"));
promotorKolom.setCellValueFactory(new PropertyValueFactory<Student, String>("comment"));
selectedKolom.setCellValueFactory(
new Callback<TableColumn.CellDataFeatures<Student, Boolean>, ObservableValue<Boolean>>() {
#Override
public ObservableValue<Boolean> call(TableColumn.CellDataFeatures<Student, Boolean> p) {
return new SimpleBooleanProperty(p.getValue() != null);
}
});
selectedKolom.setCellFactory(
new Callback<TableColumn<Student, Boolean>, TableCell<Student, Boolean>>() {
#Override
public TableCell<Student, Boolean> call(TableColumn<Student, Boolean> p) {
return new CheckBoxCell(studentenTabel);
}
});
studentenTabel.getItems().setAll(getModel().getStudenten());
--
private class CheckBoxCell extends TableCell<Student, Boolean> {
final CheckBox cellCheckBox = new CheckBox();
CheckBoxCell(final TableView tblView) {
cellCheckBox.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent t) {
int selectedIndex = getTableRow().getIndex();
if (!cellCheckBox.isSelected()) {
getModel().selectStudent(selectedIndex); // add to selectedStudents
} else {
getModel().deselectStudent(selectedIndex); // remove from selectedStudents
}
}
});
}
//Display button if the row is not empty
#Override
protected void updateItem(Boolean t, boolean empty) {
super.updateItem(t, empty);
if (!empty) {
setGraphic(cellCheckBox);
}
}
}
The main problem with this code is that the checkboxes are not bound to the table rows. E.g. when I select the 2nd item and change the row order by sorting on another value, the 2nd item is still selected even though it represents another object. When new rows are added to the table, some of them get randomly selected too.
I know this code is probably quite dirty, like I said: I'm new to JavaFX. Any help would be appreciated.
Thanks in advance!

The data type for your check box column seems to me it should be Student; i.e. it's a TableColumn<Student, Student>. The reason for this is that you're really presenting a view of the entire object itself: is the student contained in the collection of selected students. Sort of counter-intuitive but it makes it work.
See if this example helps. I don't have the nice separation of the data into a model that your code hints at, but you should be able to factor that in too.
import javafx.application.Application;
import javafx.beans.property.ReadOnlyObjectWrapper;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.beans.value.ObservableValue;
import javafx.collections.FXCollections;
import javafx.collections.ObservableSet;
import javafx.collections.SetChangeListener;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
import javafx.scene.control.TableCell;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.TableColumn.CellDataFeatures;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
import javafx.util.Callback;
public class SelectableTable extends Application {
#Override
public void start(Stage primaryStage) {
TableView<Item> itemTable = new TableView<>();
for (int i=1; i<=40; i++) {
itemTable.getItems().add(new Item("Item "+i));
}
TableColumn<Item, String> nameCol = new TableColumn<>("Name");
nameCol.setCellValueFactory(new PropertyValueFactory<>("name"));
TableColumn<Item, Item> selectedCol = new TableColumn<>("Select");
// Collection of items currently selected via checkboxes in the table
// This will be passed to the TableCell implementation.
ObservableSet<Item> selectedItems = FXCollections.observableSet();
selectedCol.setCellValueFactory(new Callback<TableColumn.CellDataFeatures<Item,Item>, ObservableValue<Item>>() {
#Override
public ObservableValue<Item> call(CellDataFeatures<Item, Item> data) {
return new ReadOnlyObjectWrapper<>(data.getValue());
}
});
selectedCol.setCellFactory(new Callback<TableColumn<Item, Item>, TableCell<Item, Item>>() {
#Override
public TableCell<Item, Item> call(
TableColumn<Item, Item> param) {
return new CheckBoxCell(selectedItems);
}
});
itemTable.getColumns().addAll(selectedCol, nameCol);
Button displayButton = new Button("Display selected");
displayButton.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
for (Item item : selectedItems) {
System.out.println(item.getName());
}
}
});
Button selectAllButton = new Button("Select all");
selectAllButton.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
selectedItems.addAll(itemTable.getItems());
}
});
Button selectNoneButton = new Button("Select none");
selectNoneButton.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
selectedItems.clear();
}
});
HBox buttons = new HBox(5);
buttons.getChildren().addAll(selectAllButton, selectNoneButton, displayButton);
BorderPane root = new BorderPane();
root.setCenter(itemTable);
root.setBottom(buttons);
Scene scene = new Scene(root, 400, 400);
primaryStage.setScene(scene);
primaryStage.show();
}
public static class CheckBoxCell extends TableCell<Item, Item> {
private final ObservableSet<Item> selectedItems ;
private final CheckBox checkBox ;
public CheckBoxCell(ObservableSet<Item> selectedItems) {
this.selectedItems = selectedItems ;
this.checkBox = new CheckBox() ;
// listener to update the set of selected items when the
// check box is checked or unchecked:
checkBox.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
if (checkBox.isSelected()) {
selectedItems.add(getItem());
} else {
selectedItems.remove(getItem());
}
}
});
// listener to update the check box when the collection of selected
// items changes:
selectedItems.addListener(new SetChangeListener<Item>() {
#Override
public void onChanged(Change<? extends Item> change) {
Item item = getItem();
if (item != null) {
checkBox.setSelected(selectedItems.contains(item));
}
}
});
}
#Override
public void updateItem(Item item, boolean empty) {
super.updateItem(item, empty);
if (empty) {
setGraphic(null);
} else {
checkBox.setSelected(selectedItems.contains(item));
setGraphic(checkBox);
}
}
}
public static class Item {
private final StringProperty name = new SimpleStringProperty(this, "name");
public StringProperty nameProperty() {
return name ;
}
public final String getName() {
return name.get();
}
public final void setName(String name) {
this.name.set(name);
}
public Item(String name) {
setName(name);
}
}
public static void main(String[] args) {
launch(args);
}
}

You can implement getModel().selectStudent(selectedObject);
and getModel().deselectStudent(selectedObject); instead. In here, selectedObject should be the object itself and not just the index. The model should point to the objects instead of indexes.
It's good to remember that you can make your model point to the exact objects you created. You just have to make sure the correct objects are being pointed to.

Programmatically change the TableView row appearance

After doing a Oracle tutorial about the TableView, I was wondering if there's a way to programmatically apply different CSS style to the selected TableView row. For example, user selects a certain row, clicks the "Highlight" button and the selected row gets brown background, white text fill, etc. I've read the JavaFX tableview colors, Updating TableView row appearance and Background with 2 colors in JavaFX?, but to no avail =/
Here's the source:
import javafx.application.Application;
import javafx.beans.property.SimpleStringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;
public class TableViewSample extends Application {
private TableView<Person> table = new TableView<Person>();
private final ObservableList<Person> data =
FXCollections.observableArrayList(
new Person("Jacob", "Smith", "jacob.smith#example.com"),
new Person("Isabella", "Johnson", "isabella.johnson#example.com"),
new Person("Ethan", "Williams", "ethan.williams#example.com"),
new Person("Emma", "Jones", "emma.jones#example.com"),
new Person("Michael", "Brown", "michael.brown#example.com")
);
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage stage) {
Scene scene = new Scene(new Group());
stage.setTitle("Table View Sample");
stage.setWidth(450);
stage.setHeight(600);
final Label label = new Label("Address Book");
label.setFont(new Font("Arial", 20));
TableColumn firstNameCol = new TableColumn("First Name");
firstNameCol.setMinWidth(100);
firstNameCol.setCellValueFactory(
new PropertyValueFactory<Person, String>("firstName"));
TableColumn lastNameCol = new TableColumn("Last Name");
lastNameCol.setMinWidth(100);
lastNameCol.setCellValueFactory(
new PropertyValueFactory<Person, String>("lastName"));
TableColumn emailCol = new TableColumn("Email");
emailCol.setMinWidth(200);
emailCol.setCellValueFactory(
new PropertyValueFactory<Person, String>("email"));
table.setItems(data);
table.getColumns().addAll(firstNameCol, lastNameCol, emailCol);
final Button btnHighlight = new Button("Highlight selected row");
btnHighlight.setMaxWidth(Double.MAX_VALUE);
btnHighlight.setPrefHeight(30);
btnHighlight.setOnAction(new EventHandler<ActionEvent>(){
public void handle(ActionEvent e){
// this is where the CSS should be applied
}
});
final VBox vbox = new VBox();
vbox.setSpacing(5);
vbox.setPadding(new Insets(10, 0, 0, 10));
vbox.getChildren().addAll(label, table, btnHighlight);
((Group) scene.getRoot()).getChildren().addAll(vbox);
stage.setScene(scene);
stage.show();
}
public static class Person {
private final SimpleStringProperty firstName;
private final SimpleStringProperty lastName;
private final SimpleStringProperty email;
private Person(String fName, String lName, String email) {
this.firstName = new SimpleStringProperty(fName);
this.lastName = new SimpleStringProperty(lName);
this.email = new SimpleStringProperty(email);
}
public String getFirstName() {
return firstName.get();
}
public void setFirstName(String fName) {
firstName.set(fName);
}
public String getLastName() {
return lastName.get();
}
public void setLastName(String fName) {
lastName.set(fName);
}
public String getEmail() {
return email.get();
}
public void setEmail(String fName) {
email.set(fName);
}
}
}
And the application.css from which the "Highlight selected row" button applies the highlightedRow class to the selected table row:
.highlightedRow {
-fx-background-color: brown;
-fx-background-insets: 0, 1, 2;
-fx-background: -fx-accent;
-fx-text-fill: -fx-selection-bar-text;
}
Edit:
After several hours of trying, the best thing I could come up is this using the code below:
firstNameCol.setCellFactory(new Callback<TableColumn<Person, String>, TableCell<Person, String>>() {
#Override
public TableCell<Person, String> call(TableColumn<Person, String> personStringTableColumn) {
return new TableCell<Person, String>() {
#Override
protected void updateItem(String name, boolean empty) {
super.updateItem(name, empty);
if (!empty) {
if (name.toLowerCase().startsWith("e") || name.toLowerCase().startsWith("i")) {
getStyleClass().add("highlightedRow");
}
setText(name);
} else {
setText("empty"); // for debugging purposes
}
}
};
}
});
The part I don't really understand is why I can't do that from inside the setOnAction method of the btnHighlight? I also tried refreshing the table afterwards (described here), but it didn't seem to work. Also, my "solution" only works for the firstNameCol column, so does one have to set new cell factory for each column in order to apply a certain style, or is there a smarter solution?

Edit: Updated version of this (old) post is at https://stackoverflow.com/a/73764770/2189127
If you don't want the reusability of the solution I posted here, this is really the same thing but using an anonymous inner class for the row factory instead of a standalone class. Perhaps the code is easier to follow as it's all in one place. It's kind of a hybrid between Jonathan's solution and mine, but will automatically update the highlights without forcing it with a sort.
I used a list of integers so it supports multiple selection, but if you don't need that you could obviously just use an IntegerProperty instead.
Here's the row factory:
final ObservableList<Integer> highlightRows = FXCollections.observableArrayList();
table.setRowFactory(new Callback<TableView<Person>, TableRow<Person>>() {
#Override
public TableRow<Person> call(TableView<Person> tableView) {
final TableRow<Person> row = new TableRow<Person>() {
#Override
protected void updateItem(Person person, boolean empty){
super.updateItem(person, empty);
if (highlightRows.contains(getIndex())) {
if (! getStyleClass().contains("highlightedRow")) {
getStyleClass().add("highlightedRow");
}
} else {
getStyleClass().removeAll(Collections.singleton("highlightedRow"));
}
}
};
highlightRows.addListener(new ListChangeListener<Integer>() {
#Override
public void onChanged(Change<? extends Integer> change) {
if (highlightRows.contains(row.getIndex())) {
if (! row.getStyleClass().contains("highlightedRow")) {
row.getStyleClass().add("highlightedRow");
}
} else {
row.getStyleClass().removeAll(Collections.singleton("highlightedRow"));
}
}
});
return row;
}
});
And here are what some buttons might look like:
final Button btnHighlight = new Button("Highlight");
btnHighlight.disableProperty().bind(Bindings.isEmpty(table.getSelectionModel().getSelectedIndices()));
btnHighlight.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
highlightRows.setAll(table.getSelectionModel().getSelectedIndices());
}
});
final Button btnClearHighlight = new Button("Clear Highlights");
btnClearHighlight.disableProperty().bind(Bindings.isEmpty(highlightRows));
btnClearHighlight.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
highlightRows.clear();
}
});

How about creating a row factory which exposes an observable list of the indexes of table rows which are to be highlighted? That way you can simply update the list with the indexes you need to highlight: for example by calling the getSelectedIndices() on the selection model and passing it to the list's setAll(...) method.
This could look something like:
import java.util.Collections;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.collections.FXCollections;
import javafx.collections.ListChangeListener;
import javafx.collections.ObservableList;
import javafx.scene.control.TableRow;
import javafx.scene.control.TableView;
import javafx.util.Callback;
public class StyleChangingRowFactory<T> implements
Callback<TableView<T>, TableRow<T>> {
private final String styleClass ;
private final ObservableList<Integer> styledRowIndices ;
private final Callback<TableView<T>, TableRow<T>> baseFactory ;
public StyleChangingRowFactory(String styleClass, Callback<TableView<T>, TableRow<T>> baseFactory) {
this.styleClass = styleClass ;
this.baseFactory = baseFactory ;
this.styledRowIndices = FXCollections.observableArrayList();
}
public StyleChangingRowFactory(String styleClass) {
this(styleClass, null);
}
#Override
public TableRow<T> call(TableView<T> tableView) {
final TableRow<T> row ;
if (baseFactory == null) {
row = new TableRow<>();
} else {
row = baseFactory.call(tableView);
}
row.indexProperty().addListener(new ChangeListener<Number>() {
#Override
public void changed(ObservableValue<? extends Number> obs,
Number oldValue, Number newValue) {
updateStyleClass(row);
}
});
styledRowIndices.addListener(new ListChangeListener<Integer>() {
#Override
public void onChanged(Change<? extends Integer> change) {
updateStyleClass(row);
}
});
return row;
}
public ObservableList<Integer> getStyledRowIndices() {
return styledRowIndices ;
}
private void updateStyleClass(TableRow<T> row) {
final ObservableList<String> rowStyleClasses = row.getStyleClass();
if (styledRowIndices.contains(row.getIndex()) ) {
if (! rowStyleClasses.contains(styleClass)) {
rowStyleClasses.add(styleClass);
}
} else {
// remove all occurrences of styleClass:
rowStyleClasses.removeAll(Collections.singleton(styleClass));
}
}
}
Now you can do
final StyleChangingRowFactory<Person> rowFactory = new StyleChangingRowFactory<>("highlightedRow");
table.setRowFactory(rowFactory);
And in your button's action handler do
rowFactory.getStyledRowIndices().setAll(table.getSelectionModel().getSelectedIndices());
Because StyleChangingRowFactory wraps another row factory, you can still use it if you already have a custom row factory implementation you want to use. For example:
final StyleChangingRowFactory<Person> rowFactory = new StyleChangingRowFactory<Person>(
"highlightedRow",
new Callback<TableView<Person>, TableRow<Person>>() {
#Override
public TableRow<Person> call(TableView<Person> tableView) {
final TableRow<Person> row = new TableRow<Person>();
ContextMenu menu = new ContextMenu();
MenuItem removeMenuItem = new MenuItem("Remove");
removeMenuItem.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
table.getItems().remove(row.getItem());
}
});
menu.getItems().add(removeMenuItem);
row.contextMenuProperty().bind(
Bindings.when(row.emptyProperty())
.then((ContextMenu) null)
.otherwise(menu));
return row;
}
});
table.setRowFactory(rowFactory);
Here is a complete code example.

Here's an ugly hack solution. Firstly, define an int field called highlightedRow. Then set a row factory on the TableView:
table.setRowFactory(new Callback<TableView<Person>, TableRow<Person>>() {
#Override public TableRow<Person> call(TableView<Person> param) {
return new TableRow<Person>() {
#Override protected void updateItem(Person item, boolean empty) {
super.updateItem(item, empty);
if (getIndex() == highlightedRow) {
getStyleClass().add("highlightedRow");
} else {
getStyleClass().remove("highlightedRow");
}
}
};
}
});
Then add the following code in your button on action (and this is where the ugly hack comes into play):
btnHighlight.setOnAction(new EventHandler<ActionEvent>(){
public void handle(ActionEvent e){
// set the highlightedRow integer to the selection index
highlightedRow = table.getSelectionModel().getSelectedIndex();
// force a tableview refresh - HACK
List<Person> items = new ArrayList<>(table.getItems());
table.getItems().setAll(items);
}
});
Once that is done, you get the brown highlight on the selected row. You could of course easily support multiple brown highlights by replacing the int with a list of itns.

The best way I find to do this:
In my CSS
.table-row-cell:feederChecked{
-fx-background-color: #06FF00;
}
In my table initialization with a SimpleBooleanProperty of an Object content in my ObservableList:
// The pseudo classes feederChecked that were defined in the css file.
PseudoClass feederChecked = PseudoClass.getPseudoClass("feederChecked");
// Set a rowFactory for the table view.
tableView.setRowFactory(tableView -> {
TableRow<Feeder> row = new TableRow<>();
ChangeListener<Boolean> changeListener = (obs, oldFeeder, newFeeder) -> {
row.pseudoClassStateChanged(feederChecked, newFeeder);
};
row.itemProperty().addListener((obs, previousFeeder, currentFeeder) -> {
if (previousFeeder != null) {
previousFeeder.feederCheckedProperty().removeListener(changeListener);
}
if (currentFeeder != null) {
currentFeeder.feederCheckedProperty().addListener(changeListener);
row.pseudoClassStateChanged(feederChecked, currentFeeder.getFeederChecked());
} else {
row.pseudoClassStateChanged(feederChecked, false);
}
});
return row;
});
Code adapting from this complete exemple

I might have found something that works:
With this code added, if you press the button the highlighted row changes color, when you select a different row the color changes back to default, when you press the button again, it changes the color of the new row to brown.
final String css = getClass().getResource("style.css").toExternalForm();
final Scene scene = new Scene(new Group());
btnHighlight.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent e) {
scene.getStylesheets().add(css);
}
});
table.getSelectionModel().selectedIndexProperty()
.addListener(new ChangeListener<Number>() {
#Override
public void changed(ObservableValue<? extends Number> ov, Number t, Number t1) {
scene.getStylesheets().remove(css);
}
});
css:
.table-row-cell:selected
{
-fx-background-color: brown;
-fx-text-inner-color: white;
}
Only problem with this solution is that if you press the button twice in a row, your next row selected is already brown. You would have to use a seperate css file for this, else at startup of the application no css rules would be applied untill you press the button.

I found that the best solution would be to listen for row.itemProperty() changes because when you sort for example the rows change indexes, so rows get notified automatically.