Having worked quite a bit with Swing JTable, I explored on how to work with JavaFX TableView. In this post, I describe differences between the two, which, I hope would help Swing developers looking to migrate to JavaFX.
The complete source code is available in my github repo.
I will attempt to build a simple table which displays a list of employees. This will display varied information of the employee, like id (int), name (String), salary (double), part time flag (boolean), doj (LocalDate).
Let us first define the Employee class which uses JavaFX property model (more on this later).
public class Employee {
private SimpleIntegerProperty id;
private SimpleStringProperty name;
private SimpleDoubleProperty salary;
private SimpleBooleanProperty partTime;
private SimpleObjectProperty<LocalDate> doj;
public Employee(int id, String name, double salary, LocalDate doj, boolean partTime) {
this.id = new SimpleIntegerProperty(id);
this.name = new SimpleStringProperty(name);
this.salary = new SimpleDoubleProperty(salary);
this.partTime = new SimpleBooleanProperty(partTime);
this.doj = new SimpleObjectProperty<>(doj);
}
public String getName() {
return name.get();
}
public void setName(String value) {
name.set(value);
}
public StringProperty nameProperty() {
return name;
}
//other setters and getters...
}
I will attempt to build a simple table which displays a list of employees. This will display varied information of the employee, like id (int), name (String), salary (double), part time flag (boolean), doj (LocalDate).
Let us first define the Employee class which uses JavaFX property model (more on this later).
private SimpleIntegerProperty id;
private SimpleStringProperty name;
private SimpleDoubleProperty salary;
private SimpleBooleanProperty partTime;
private SimpleObjectProperty<LocalDate> doj;
public Employee(int id, String name, double salary, LocalDate doj, boolean partTime) {
this.id = new SimpleIntegerProperty(id);
this.name = new SimpleStringProperty(name);
this.salary = new SimpleDoubleProperty(salary);
this.partTime = new SimpleBooleanProperty(partTime);
this.doj = new SimpleObjectProperty<>(doj);
}
public String getName() {
return name.get();
}
public void setName(String value) {
name.set(value);
}
public StringProperty nameProperty() {
return name;
}
//other setters and getters...
}
Now, let us write the JavaFX code to build the table. I am directly using the main class to build the GUI (without using FXML).
@Override
public void start(Stage stage) throws Exception {
//define sample Employee objects
final Employee emp1 = new Employee(1, "Ram", 23123.23, LocalDate.now(), false);
final Employee emp2 = new Employee(2, "Krishna", 32398.76, LocalDate.now(), true);
final ObservableList<Employee> data = FXCollections.observableArrayList(emp1, emp2);
//initialise the TableView
TableView<Employee> tableView = new TableView<>();
idCol.setCellValueFactory(new PropertyValueFactory<>("id"));
TableColumn nameCol = new TableColumn("Name");
nameCol.setPrefWidth(100);
nameCol.setCellValueFactory(new PropertyValueFactory<>("name"));
//...likewise for other columns
//add the columns to the table view
tableView.getColumns().addAll(idCol, nameCol, salaryCol, partTimeCol, dojCol);
//Load the data into the table
tableView.setItems(data);
StackPane root = new StackPane();
root.getChildren().add(tableView);
Scene scene = new Scene(root, 450, 300);
stage.setTitle("JavaFX TableView Sample");
stage.setScene(scene);
stage.show();
}
When I run this application, we get the following output:
Let me now talk about the differences between Swing JTable and JavaFX TableView (I will be numbering the differences throughout the post (I have used a 'minus' against some numbers to indicate that they are negative points)).
1) Generics
The first difference we notice is that the TableView is right-away generified, like:
private TableView<Employee> tableView = new TableView<>();
In 99% of the cases, a table displays homogeneous data, so this is actually good. The Swing components were not generified (sure, Generics came later, but even after they came, this change was done in later versions only). Without this, in Swing, there was always a kind of discomfort - a row not being openly identified with an Object. It was just a physical row.
In JavaFX, due to this, loading data to the table is easy. We basically need to set an ObservableList to the table (more on this in point 8). A convenience class FXCollections is used to build the ObservableList - we can either build this directly from separate instances or use a collection:
final ObservableList<Employee> data = FXCollections.observableArrayList(emp1, emp2);
tableView.setItems(data);
2) Scrollpane
In Swing, when we add a JTable, we will not get any scrollbars. We need to wrap the JTable within a JScrollPane and actually add the scroll pane to the view. Only then will we get the scrollbars. In JavaFX, we get this right away (you can see the horizontal scrollbar in the image). Note that the component is named TableView and not just Table (probably due to the inherent scrollbar).
3) Column names and types:
In Swing, we will usually write a TableModel class which will provide the information about column names and types (via overridden getColumnName() and getColumnClass() methods).
As we don't write a model separately in JavaFX, we add columns directly when creating the table (yes, we don't need to write a separate model - more on that later).
This is done by creating a TableColumn instance and adding the same to the table, like:
TableColumn<Employee, Integer> idCol = new TableColumn<>("ID");
This declaration of the column provides information about the type of the column and also the name of the column (display name). And then we add this to the table, like:
tableView.getColumns().add(idCol);
4) Display of values:
In Swing, the getValueAt() method defined in the TableModel is queried and is used to display the data for the cells. So, we have to write the getValueAt() usually checking the column number and returning the appropriate value (Object). The toString() method will then be invoked and displayed (by the default renderer).
In JavaFX, this is made easier. After we create a TableColumn, we need to then set a 'cellValueFactory' which will calculate the value for the cell, like:
idCol.setCellValueFactory(new PropertyValueFactory<>("id"));
This probably uses reflection to invoke the getter method and get the value. Similar to Swing JTable, the toString() is invoked on the object and the value displayed. Note that reading and displaying the values is not related to the JavaFX property model. This would work with any POJO (JavaBean model) except for the CheckBox control (which I think is a bug - JavaFX TableView does not pick the correct value of the Boolean value when a POJO is used. Even when using a JavaFX property model, the value is picked and displayed correctly only when the xxxProperty() method is present in addition to the regular getter and setter).
In our Employee class, we have a LocalDate field doj. When we add this to the table, we see that the date is displayed by it's default toString() notation.
The other alternative is to set a cell factory on our own. This is a little verbose and we will have to return an ObservableValue (the verbosity can be reduced largely with lambdas though).
5) Sorting
Sorting is supported right out-of-the-box. This is good as this was a pain point in Swing JTable.
6) Alternate Row colors and CSS:
The TableView by default uses alternate colors for rows. We can customize the colors using CSS.
-7) Alignment (Integer and Double):
In our Employee class, we have an Integer field (id) and a Double field (salary). When these are added to TableView, they are not right-aligned. This would generally be the need. In Swing JTable, this would be done automatically which was cool (achieving this in JavaFX is easy though).
8) Updating the view:
In Swing, we would usually need to write a TableModel class (that usually extends AbstractTableModel). This class will provide all information about the data of the table (including column names, row count, and the row data themselves). We can load and show the data in the JTable with this. But, what happens when the data changes?
Normally, we would need to invoke the various 'fireXXX' methods from within this class which will in turn instruct the JTable update its view. Most starters with JTable miss this out and it takes some learning curve to get this working.
JavaFX TableView handles this right from the beginning. We simply supply the table via an ObservableList and rest is taken care of. From here on, whenever the data changes, view gets updated automatically (this happens because TableView 'observes' the passed in ObservableList).
(note that this works fine with using the JavaFX property model and PropertyValueFactory. If PropertyValueFactory is used along with regular POJO, this does not work).
This is really good. Along with generified TableView, this means that we simply need to build the list and pass it by wrapping it in an ObservableList. Building the data is also more cleanly separated.
-9) Boolean values
In our Employee class, we have a Boolean field (isPartTime). When we add this to the TableView, the simple toString() representation of this value is displayed. In Swing JTable, as soon as a column type is declared as Boolean, it right-away shows the value as a check box which is really cool. In JavaFX, we need to set a cell factory to do the same (see point 11.Editing).
10) Renderers:
Writing renderers for columns is similar to that of Swing. We write an implementation separately.
11) Editing
In Swing, we need to implement the setValueAt() method where we can set the value from the edited cell to the actual object (this works in combination with isCellEditable() method which dictates which cell is editable). We can also add custom editors like JComboBox etc.
In JavaFX, we need to set a CellFactory to the column to make it editable. This is made even more easier with the ready availability of several implementations - TextFieldTableCell for String values for example.
In our example, we simply set one for the nameColumn with the call 'TextFieldTableCell.forTableColumn()'. For the ID column though, as the data type is Integer and a TextField by default deals with String, we need to use a StringConverter. We can make use of the convenience method which takes an implementation of the abstract StringConverter class as the argument. Luckily, JavaFX comes with ready implementations like NumberStringConverter (which deal with java.lang.Number from which the wrappers descend). We simply use them.
For the Boolean column, ideally we need a CheckBox which is a different control. So, we use the available CheckBoxTableCell.
Note that editing works well with the JavaFX property model with minimal code. Otherwise we would need to write custom editor code (when we use a usual POJO, the editing will still work and the table cell will also display the edited value, but, the edit will not be updated back to the object!).
Everything works including editing except for the DOJ field. For the Date, similar to the Double field, we need to use a converter. JavaFX comes with a DateStringFormatter, but unfortunately, it works with the older java.util.Date and not the LocalDate which is what we want to use. So, to make this work, we simply need to write a converter by extending the StringConverter, like:
dojCol.setCellFactory(TextFieldTableCell.forTableColumn(new StringConverter<LocalDate>(){
@Override
public String toString(LocalDate object)
{
if(null == object)
return "";
return object.toString();
}
@Override
public LocalDate fromString(String value)
{
if (value == null) {
return null;
}
return LocalDate.parse(value);
}
}));
This is a very simple converter which works with the default LocalDate pattern. So, while editing, the same pattern should be used. Using a DatePicker for the same would be cool, but that needs altogether an implementation of TableCell.
The complete source code used in this post is available in my github repo.
@Override
public void start(Stage stage) throws Exception {
//define sample Employee objects
final Employee emp1 = new Employee(1, "Ram", 23123.23, LocalDate.now(), false);
final Employee emp2 = new Employee(2, "Krishna", 32398.76, LocalDate.now(), true);
final ObservableList<Employee> data = FXCollections.observableArrayList(emp1, emp2);
//initialise the TableView
TableView<Employee> tableView = new TableView<>();
//define the columns in the table
TableColumn idCol = new TableColumn("ID");idCol.setCellValueFactory(new PropertyValueFactory<>("id"));
TableColumn nameCol = new TableColumn("Name");
nameCol.setPrefWidth(100);
nameCol.setCellValueFactory(new PropertyValueFactory<>("name"));
//...likewise for other columns
//add the columns to the table view
tableView.getColumns().addAll(idCol, nameCol, salaryCol, partTimeCol, dojCol);
//Load the data into the table
tableView.setItems(data);
StackPane root = new StackPane();
root.getChildren().add(tableView);
Scene scene = new Scene(root, 450, 300);
stage.setTitle("JavaFX TableView Sample");
stage.setScene(scene);
stage.show();
}
When I run this application, we get the following output:
Let me now talk about the differences between Swing JTable and JavaFX TableView (I will be numbering the differences throughout the post (I have used a 'minus' against some numbers to indicate that they are negative points)).
1) Generics
The first difference we notice is that the TableView is right-away generified, like:
private TableView<Employee> tableView = new TableView<>();
In 99% of the cases, a table displays homogeneous data, so this is actually good. The Swing components were not generified (sure, Generics came later, but even after they came, this change was done in later versions only). Without this, in Swing, there was always a kind of discomfort - a row not being openly identified with an Object. It was just a physical row.
In JavaFX, due to this, loading data to the table is easy. We basically need to set an ObservableList to the table (more on this in point 8). A convenience class FXCollections is used to build the ObservableList - we can either build this directly from separate instances or use a collection:
final ObservableList<Employee> data = FXCollections.observableArrayList(emp1, emp2);
tableView.setItems(data);
2) Scrollpane
In Swing, when we add a JTable, we will not get any scrollbars. We need to wrap the JTable within a JScrollPane and actually add the scroll pane to the view. Only then will we get the scrollbars. In JavaFX, we get this right away (you can see the horizontal scrollbar in the image). Note that the component is named TableView and not just Table (probably due to the inherent scrollbar).
3) Column names and types:
In Swing, we will usually write a TableModel class which will provide the information about column names and types (via overridden getColumnName() and getColumnClass() methods).
As we don't write a model separately in JavaFX, we add columns directly when creating the table (yes, we don't need to write a separate model - more on that later).
This is done by creating a TableColumn instance and adding the same to the table, like:
TableColumn<Employee, Integer> idCol = new TableColumn<>("ID");
This declaration of the column provides information about the type of the column and also the name of the column (display name). And then we add this to the table, like:
tableView.getColumns().add(idCol);
4) Display of values:
In Swing, the getValueAt() method defined in the TableModel is queried and is used to display the data for the cells. So, we have to write the getValueAt() usually checking the column number and returning the appropriate value (Object). The toString() method will then be invoked and displayed (by the default renderer).
In JavaFX, this is made easier. After we create a TableColumn, we need to then set a 'cellValueFactory' which will calculate the value for the cell, like:
idCol.setCellValueFactory(new PropertyValueFactory<>("id"));
This probably uses reflection to invoke the getter method and get the value. Similar to Swing JTable, the toString() is invoked on the object and the value displayed. Note that reading and displaying the values is not related to the JavaFX property model. This would work with any POJO (JavaBean model) except for the CheckBox control (which I think is a bug - JavaFX TableView does not pick the correct value of the Boolean value when a POJO is used. Even when using a JavaFX property model, the value is picked and displayed correctly only when the xxxProperty() method is present in addition to the regular getter and setter).
In our Employee class, we have a LocalDate field doj. When we add this to the table, we see that the date is displayed by it's default toString() notation.
The other alternative is to set a cell factory on our own. This is a little verbose and we will have to return an ObservableValue (the verbosity can be reduced largely with lambdas though).
5) Sorting
Sorting is supported right out-of-the-box. This is good as this was a pain point in Swing JTable.
6) Alternate Row colors and CSS:
The TableView by default uses alternate colors for rows. We can customize the colors using CSS.
-7) Alignment (Integer and Double):
In our Employee class, we have an Integer field (id) and a Double field (salary). When these are added to TableView, they are not right-aligned. This would generally be the need. In Swing JTable, this would be done automatically which was cool (achieving this in JavaFX is easy though).
8) Updating the view:
In Swing, we would usually need to write a TableModel class (that usually extends AbstractTableModel). This class will provide all information about the data of the table (including column names, row count, and the row data themselves). We can load and show the data in the JTable with this. But, what happens when the data changes?
Normally, we would need to invoke the various 'fireXXX' methods from within this class which will in turn instruct the JTable update its view. Most starters with JTable miss this out and it takes some learning curve to get this working.
JavaFX TableView handles this right from the beginning. We simply supply the table via an ObservableList and rest is taken care of. From here on, whenever the data changes, view gets updated automatically (this happens because TableView 'observes' the passed in ObservableList).
(note that this works fine with using the JavaFX property model and PropertyValueFactory. If PropertyValueFactory is used along with regular POJO, this does not work).
This is really good. Along with generified TableView, this means that we simply need to build the list and pass it by wrapping it in an ObservableList. Building the data is also more cleanly separated.
-9) Boolean values
In our Employee class, we have a Boolean field (isPartTime). When we add this to the TableView, the simple toString() representation of this value is displayed. In Swing JTable, as soon as a column type is declared as Boolean, it right-away shows the value as a check box which is really cool. In JavaFX, we need to set a cell factory to do the same (see point 11.Editing).
10) Renderers:
Writing renderers for columns is similar to that of Swing. We write an implementation separately.
11) Editing
In Swing, we need to implement the setValueAt() method where we can set the value from the edited cell to the actual object (this works in combination with isCellEditable() method which dictates which cell is editable). We can also add custom editors like JComboBox etc.
In JavaFX, we need to set a CellFactory to the column to make it editable. This is made even more easier with the ready availability of several implementations - TextFieldTableCell for String values for example.
In our example, we simply set one for the nameColumn with the call 'TextFieldTableCell.forTableColumn()'. For the ID column though, as the data type is Integer and a TextField by default deals with String, we need to use a StringConverter. We can make use of the convenience method which takes an implementation of the abstract StringConverter class as the argument. Luckily, JavaFX comes with ready implementations like NumberStringConverter (which deal with java.lang.Number from which the wrappers descend). We simply use them.
For the Boolean column, ideally we need a CheckBox which is a different control. So, we use the available CheckBoxTableCell.
Note that editing works well with the JavaFX property model with minimal code. Otherwise we would need to write custom editor code (when we use a usual POJO, the editing will still work and the table cell will also display the edited value, but, the edit will not be updated back to the object!).
Everything works including editing except for the DOJ field. For the Date, similar to the Double field, we need to use a converter. JavaFX comes with a DateStringFormatter, but unfortunately, it works with the older java.util.Date and not the LocalDate which is what we want to use. So, to make this work, we simply need to write a converter by extending the StringConverter, like:
dojCol.setCellFactory(TextFieldTableCell.forTableColumn(new StringConverter<LocalDate>(){
@Override
public String toString(LocalDate object)
{
if(null == object)
return "";
return object.toString();
}
@Override
public LocalDate fromString(String value)
{
if (value == null) {
return null;
}
return LocalDate.parse(value);
}
}));
This is a very simple converter which works with the default LocalDate pattern. So, while editing, the same pattern should be used. Using a DatePicker for the same would be cool, but that needs altogether an implementation of TableCell.
The complete source code used in this post is available in my github repo.
