Make JavaFX / TableView editable
environment
- JDK 1.8.0_131
- JavaFX Scene Builder 8.3.0
Overview
The basic usage of table view is to associate a row with a user-defined class (data model). The explanation around here is easy to understand by referring to the following.
AOE Diary: How to Customize ListView and TableView Cells ORACLE: JavaFX UI Component Operations 13 Table View
In this entry, we'll look at how the tableviews created in this way are editable and their variations.
Sample code
Controller.java Entity.java Main.fxml
Text-editable cell
You can use TextFieldTableCell to make a cell text editable.
When using TextFieldTableCell, change CellFactory of TableColumn from the default. Note that ** cannot be edited unless both the TableView and TableColumn editable properties are set to true **. (It can also be editable in Scene Builder)
Controller.java
tableView.setEditable(true);
column1.setEditable(true);
column1.setCellFactory(TextFieldTableCell.forTableColumn());
TextFieldTableCell has a mechanism to switch the displayed component to TextField by ** ON / OFF ** in the editing state.
StringConverter StringConverter provides a mechanism for converting strings to other classes.
This StringConverter is required if the property type is other than String. StringConverter has many implementations for each type to be converted, so you can choose from them to use. Package javafx.util.converter
//When editing a Boolean column as text
column3.setCellFactory(TextFieldTableCell.forTableColumn(new BooleanStringConverter()));
Selectable editable cells
You can use ChoiceBoxTableCell, ComboBoxTableCell to make a cell selectable and editable. ChoiceBox does not provide scrolling function for choices, so it is not suitable when there are many choices.
ChoiceBox
ComboBox
Controller.java
// ChoiceBox
column2.setCellFactory(ChoiceBoxTableCell.forTableColumn("Item1", "Item2", "Item3"));
// ComboBox
column2.setCellFactory(ComboBoxTableCell.forTableColumn("Item1", "Item2", "Item3"));
Similarly, these also have a mechanism to switch the component to be displayed by ON / OFF of the editing state to ChoiceBox, ComboBox.
Toggle editable cell
You can make cells toggle editable using CheckBoxTableCell. This cell has no edit state and you can change its value with a single click.
Controller.java
column3.setCellFactory(CheckBoxTableCell.forTableColumn(column3));
Editable custom cell
Let's create a custom cell that displays the JavaFX standard ColorPicker when editing. When not edited, the empty Pane is filled in.
column4.setCellFactory(ColorPickerTableCell.forTableColumn());
The rough transition image is as follows. If you can understand the timing when the display control is switched by setGraphic and the mechanism that commitEdit is called in ʻOnAction` of the color picker, I think that it can be applied to other controls.
Custom cells that do not use edit state
I will also try to display the color picker by placing the control directly without using the edit state. I think this pattern is more commonly implemented as a custom cell. It's similar to the checkbox above.
DirectColorPickerTableCell.java
column4.setCellFactory(DirectColorPickerTableCell.forTableColumn());
Since the edit state is not used, the value of the data model is rewritten directly from ʻOnAction` of the color picker.
It's good because the mechanism is simple and it is easy for the user to know that it can be edited, but it should be noted that heavy controls line up on the screen will increase the load.
Built-in cell list
There are various types of built-in cells introduced at the beginning, not only for tables but also for trees and lists. It's a good idea to check before creating a custom cell. Package javafx.scene.control.cell
reference
[Light Lab: JavaFX Cell Customization](http://krr.blog.shinobi.jp/javafx/javafx%20%E3%82%BB%E3%83%AB%E3%81%AE%E3%82% AB% E3% 82% B9% E3% 82% BF% E3% 83% 9E% E3% 82% A4% E3% 82% BA) Source: GitHub FXML: GitHub
Recommended Posts