I have been using a custom cell factory to display a ChoiceBox inside a TableView's TableColumn's cell, i.e.
someColumn.setCellFactory(new DayCellFactory());
with DayCellFactory implementing Callback (with the call and updateItem methods), and the ChoiceBox's (and thus the cell's) value being bound to the value of a property. The ChoiceBox shows the potential values of the enum Day.
class DayCellFactory implements Callback<TableColumn<DayPeriod, Day>, TableCell<DayPeriod, Day>> {
private final static ObservableList<Day> list = FXCollections.observableArrayList();
static {
for (Day day : Day.values()) {
list.add(day);
}
}
#Override
public TableCell<DayPeriod, Day> call (TableColumn<DayPeriod, Day> column) {
return new TableCell<DayPeriod, Day>() {
#Override
public void updateItem (Day item, boolean empty) {
super.updateItem(item, empty);
if (!empty) {
ObservableValue<Day> obsVal = getTableColumn().getCellObservableValue(getIndex());
ObjectProperty<Day> objProp = (ObjectProperty<Day>) obsVal;
ChoiceBox<Day> choice = new ChoiceBox<>(list);
choice.valueProperty().bindBidirectional(objProp);
setGraphic(choice);
}
}
};
}
}
I thought I could reduce the code by simply using
someColumn.setCellFactory(ChoiceBoxTableCell.forTableColumn(list));
(with the list defined and filled as required) but the resulting cell looks (and behaves) like a simple label showing the property's toString() value - yes, I did click there, but no ChoiceBox appears. And removing this line makes no difference. Removing the cell value factory results in no value being displayed.
I guess that there is no binding taking place with this simple approach, but this can probably be taken care of as well. It just seems strange that there is no ChoiceBox appearing.
Related
This question already has an answer here:
How to get row value inside updateItem() of CellFactory
(1 answer)
Closed 4 years ago.
Assume a:
TableView<ResultType, String> table = new TableView<> ();
table.setItems(myItems);
In TableColumn we have the setCellValueFactory method which very nicely gives you access to the ResultType object of the respective cell value. So you can use it to extract the values like that:
aColumnFromTableView.setCellValueFactory(data -> new SimpleStringProperty(data.getValue));
Now each cell from aColumnFromTableView will be populated with a value from all ResultType objects which are set as items for the table.
The question is: can we also change the cell's style in a similar way? I had a look at the setCellFactory method, but it does not seem as friendly as setCellValueFactory though (= it does not provide me the respective ResultType).
Here's what you can do with setCellFactory:
aColumnFromTableView.setCellValueFactory(data -> ???? ); // data is actually aColumnFromTableView itself??
So I am wondering of a way to set the cell style individually similar to what I described with "setCellValueFactory". I hope it exists.
Note: I also tried
aColumnFromTableView.setCellValueFactory(data -> {
aColumnFromTableView.setStyle("my style");
return new SimpleStringProperty(data.getValue);
})
But that sets it for the entire column and not individually.
Thanks!!!!
If you want to customize the style of the TableCell based on the value of the cell you'll need to use a cellFactory and return your own TableCell.
For instance, if you wanted a TableCell<?, Double> that displayed the number in red if it was negative you could do:
column.setCellFactory(col -> new TableCell<>() {
#Override
protected void updateItem(Double item, boolean empty) {
super.updateItem(item, empty);
if (empty || item == null) {
setText(null);
setGraphic(null);
} else {
setText(item.toString());
if (item < 0.0) {
setTextFill(Color.RED); // or use setStyle(String)
} else {
setTextFill(Color.BLACK); // or use setStyle(String)
}
}
}
});
When creating a custom TableCell you'll more than likely want to override the updateItem(Object,boolean) method. It's important you override it correctly, however, if you want it to work right. Read the javadoc for information:
The updateItem method should not be called by developers, but it is the best method for developers to override to allow for them to customise the visuals of the cell. To clarify, developers should never call this method in their code (they should leave it up to the UI control, such as the ListView control) to call this method. However, the purpose of having the updateItem method is so that developers, when specifying custom cell factories (again, like the ListView cell factory), the updateItem method can be overridden to allow for complete customisation of the cell.
It is very important that subclasses of Cell override the updateItem method properly, as failure to do so will lead to issues such as blank cells or cells with unexpected content appearing within them. Here is an example of how to properly override the updateItem method:
protected void updateItem(T item, boolean empty) {
super.updateItem(item, empty);
if (empty || item == null) {
setText(null);
setGraphic(null);
} else {
setText(item.toString());
}
}
Note in this code sample two important points:
We call the super.updateItem(T, boolean) method. If this is not done, the item and empty properties are not correctly set, and you are likely to end up with graphical issues.
We test for the empty condition, and if true, we set the text and graphic properties to null. If we do not do this, it is almost guaranteed that end users will see graphical artifacts in cells unexpectedly.
Instead of setting properties or calling setStyle you could use things like PseudoClass states to make it easier to style from an external CSS stylesheet.
import javafx.css.PseudoClass;
import javafx.scene.control.TableCell;
public class CustomCell<S> extends TableCell<S, Double> {
private static final PseudoClass POSITIVE = PseudoClass.getPseudoClass("positive");
private static final PseudoClass NEGATIVE = PseudoClass.getPseudoClass("negative");
public CustomCell() {
getStyleClass().add("custom-cell");
}
#Override
protected void updateItem(Double item, boolean empty) {
super.updateItem(item, empty);
if (empty || item == null) {
setText(null);
setGraphic(null);
pseudoClassStateChanged(POSITIVE, false);
pseudoClassStateChanged(NEGATIVE, false);
} else {
setText(item.toString()); // you might want to format the number for display
pseudoClassStateChanged(POSITIVE, item >= 0.0);
pseudoClassStateChanged(NEGATIVE, item < 0.0);
}
}
}
Then use:
column.setCellFactory(col -> new CustomCell<>());
And in a stylesheet:
.custom-cell:positive {
-fx-text-fill: black;
}
.custom-cell:negative {
-fx-text-fill: red;
}
I want to create a treetableview which can show for every tree item a sub tree with a row which contains custom nodes (in this case a button).
In the end i want to make it look like that.
In order to achieve that i probably need a custom row factory.
//set custom row factory
treeTableView.setRowFactory(new Callback<TreeTableView<Struct>, TreeTableRow<Struct>>() {
#Override
public TreeTableRow<Struct> call(TreeTableView<Struct> param) {
return new TreeTableRow<Struct>(){
#Override
protected void updateItem(Struct item, boolean empty) {
super.updateItem(item, empty);
//check if row has values
if (!empty) {
//override the row cell graphics if boolean is set
if (item.isCustomRow()) {
setGraphic(new StackPane(new Button("Button")));
}
} else {
setGraphic(null);
}
}
};
}
});
My idea was to override the updateItem() method and use the setGraphic() method to display the button. To indicate whether the tree item shows my own graphic node or the default, i added a boolean to my tableview structure class (Struct).
//Struct contains treetable data
class Struct {
...
//the boolean defines if the row graphics should be overridden
Boolean customRow;
...
public Boolean isCustomRow() {
return customRow;
}}
The result which i got can you see here. I looks like the empty column cells inside the row blocks my own node.
I suspect that i also need a custom TreeTableRowSkin but i didnt find any examples how to implement this. Is there anyone who can help me to solve this?
The full code example can be found here.
I am writing a JavaFX app where a series of messages appear in a TableView. When a new message appears, its row in the table should be highlighted, meaning its background color should be orange or something. Once the user clicks it, the background color should clear, acknowledging the message was read. Should be simple.
I've done enough research to realize that I need to use a rowFactory to set or clear a row's background. But I'm struggling with the mechanics of setRowFactory(). The documentation on Oracle is over my head, and every example I pull up online seems radically different than the last one.
Here's what I have:
public class Message {
private boolean readOnce;
private int date;
private String msg;
public Message(int date, String msg, String msg2){
this.readOnce = false;
this.date = date;
this.msg = msg;
}
public boolean isReadOnce() {
return readOnce;
}
public void setReadOnce(){
readOnce = true;
}
// ...and more standard getters & setters here...
}
The TableView is set up in the main controller:
#FXML TableView<Message> messageTable;
#FXML TableColumn<Message, Integer> Col1;
#FXML TableColumn<Message, String> Col2;
ObservableList<Message> tableItems;
// ...
// Setting up the Table:
PropertyValueFactory<Message, Integer> dateProperty = new PropertyValueFactory<Message, Integer>("date");
PropertyValueFactory<Message, String> msgProperty = new PropertyValueFactory<Message, String>("msg");
Col1.setCellValueFactory( dateProperty );
Col2.setCellValueFactory( msgProperty );
messageTable.setItems( tableItems );
// If we click an item in the table: messageTable.getSelectionModel().selectedItemProperty().addListener((obs, oldSelection, newSelection) -> {
if (newSelection != null) {
System.out.println("Troubleshoot: You clicked: "+newSelection.getMsg());
newSelection.setReadOnce(true);
}
});
And if I want to add a new message to the table, I just add it into the observable list:
public void addMsg(int num, String msg){
tableItems.add(new Message(num, msg));
}
So far, pretty easy. But I'm all thumbs when it comes to the rowFactory:
messageTable.setRowFactory(messageTable -> {
TableRow<Message> row = new TableRow<>();
ObjectProperty<Message> opMsg = row.itemProperty();
Message tmpMsg = opMsg.get();
if(!tmpMsg.isReadOnce()){
row.getStyleClass().add("highlight-message"); // defined in CSS
} else {
row.getStyleClass().add("clear-message"); // defined in CSS
}
return row;
});
To be very honest, I have no idea what I'm doing here. I understand that the rowFactory takes in the entire table and regenerates each row one-by-one. What I don't understand is how does the RowFactory code examine each Message in the table and how can I access them? Originally I thought these line might allow me to see the Message within the row:
TableRow<Message> row = new TableRow<>();
ObjectProperty<Message> opMsg = row.itemProperty();
Message tmpMsg = opMsg.get();
But when I debug the code, tmpMsg == NULL. So that's a big fat dead end.
Anyone see what I'm doing wrong? I've been researching this for about a week, getting absolutely no-where. Any help anyone can offer is wildly appreciated.
Many thanks,
-RAO
TableRows are created by TableView to fill it's viewport and contain TableCells. At the time they are created the item property still contains the default value null. You could register a listener to that property but usually I prefer overriding the updateItem method of a cell.
Also using PseudoClass is simpler than using style classes. New items can be assigned to a row; this could result in the same style class being added multiple times and even both style classes could be added to the same cell. PseudoClasses however can be switched on/of without the need to take care of removing other classes.
final PseudoClass highlightMessage = PseudoClass.getPseudoClass("highlight-message");
messageTable.setRowFactory(messageTable -> new TableRow<Message>() {
{
selectedProperty().addListener((o, oldVal, newVal) -> {
if (newVal) {
Message item = getItem();
if (item != null) {
item.setReadOnce();
pseudoClassStateChanged(highlightMessage, false);
}
}
});
}
#Override
protected void updateItem(Message item, boolean empty) {
super.updateItem(item, empty);
pseudoClassStateChanged(highlightMessage, item != null && !item.isReadOnce());
}
});
In a CSS stylesheet you could use rules like this:
.table-row-cell:filled {
/* style for non-highlighted rows */
}
.table-row-cell:filled:highlight-message {
/* style for highlighted rows */
}
Note that this does not allow you to programmatically alter the read state. It updates the state on selecting a cell. You could add a BooleanProperty to Message or use a ObservableSet to store the highlighted messages and update the state of cells from a listener if you need to programmatically update the readOnce property. In the latter case you do not need to store a readOnce property in the Message itself...
How can I prevent column width resizing? I have a table, and I'm wondering if I can simply disable the option to drag to resize width of the columns. Is there any way to do this, or will I have to manually set the max and min width of each column just so that it can't be manipulated by the user? The problem with this is that the text in the title/header of my table is smaller than what's in the row underneath it. Setting the width to the column width forces it smaller, and then you can't see the info in the cell underneath.
Also, if there's a way to disable rearranging the columns, that'd be nice too. I basically want what I have set to not be changed at all. If this can't be done, I might just replace each table with an image of itself, so that it can't be manipulated at all.
Prevent Resizing Columns
From here, we can know that setResizable(boolean) allows you to choose whether the user can resize a column. Setting the max and min width to the same value does prevents the user from resizing the column, but not a preferred method. Also, the user will see the resizing cursor but not the default cursor when attempting to resize the column.
Prevent Reordering Columns
JavaFX 9
For preventing the user from reordering the columns, there isn't a straight-forward solution until JavaFX 9, which introduces setReorderable(boolean), isReorderable(), reorderableProperty methods, and the reorderable field in the TableColumnBase class. Here is a snippet of the source code:
package javafx.scene.control;
//some imports and JavaDoc comments
#IDProperty("id")
public abstract class TableColumnBase<S,T> implements EventTarget, Styleable {
//some code
// --- Reorderable
/**
* A boolean property to toggle on and off the 'reorderability' of this column
* (with drag and drop - reordering by modifying the appropriate <code>columns</code>
* list is always allowed). When this property is true, this column can be reordered by
* users simply by dragging and dropping the columns into their desired positions.
* When this property is false, this ability to drag and drop columns is not available.
*
* #since 9
*/
private BooleanProperty reorderable;
public final BooleanProperty reorderableProperty() {
if (reorderable == null) {
reorderable = new SimpleBooleanProperty(this, "reorderable", true);
}
return reorderable;
}
public final void setReorderable(boolean value) {
reorderableProperty().set(value);
}
public final boolean isReorderable() {
return reorderable == null ? true : reorderable.get();
}
//some code
}
If your application bases on JavaFX 9, then you are lucky. Simply invoke setReorderable(false) on your desired table column and there you go.
JavaFX 8
If your application bases on JavaFX 8 or older versions, you can use com.sun.javafx.scene.control.skin.TableHeaderRow, which has isReordering, setReordering, reorderingProperty methods, and reorderingProperty field. Here is a snippet of the source code:
package com.sun.javafx.scene.control.skin;
//some imports and JavaDoc comments
public class TableHeaderRow extends StackPane {
//some code
private BooleanProperty reorderingProperty = new BooleanPropertyBase() {
#Override protected void invalidated() {
TableColumnHeader r = getReorderingRegion();
if (r != null) {
double dragHeaderHeight = r.getNestedColumnHeader() != null ?
r.getNestedColumnHeader().getHeight() :
getReorderingRegion().getHeight();
dragHeader.resize(dragHeader.getWidth(), dragHeaderHeight);
dragHeader.setTranslateY(getHeight() - dragHeaderHeight);
}
dragHeader.setVisible(isReordering());
}
#Override
public Object getBean() {
return TableHeaderRow.this;
}
#Override
public String getName() {
return "reordering";
}
};
public final void setReordering(boolean value) { reorderingProperty().set(value); }
public final boolean isReordering() { return reorderingProperty.get(); }
public final BooleanProperty reorderingProperty() { return reorderingProperty; }
//some code
}
The methods and fields work the same as the one in TableColumnBase in JavaFX 9, just with different names.
You want to obtain the TableHeaderRow object as a children of the skin of the TableView:
TableView<MyType> table = new TableView<MyType>();
//some code
//DISPLAY THE TABLE OR GETSKIN WILL RETURN NULL
com.sun.javafx.scene.control.skin.TableHeaderRow header = null;
for (Node node : table.getSkin().getChildren())
if (node instanceof com.sun.javafx.scene.control.skin.TableHeaderRow)
header = (com.sun.javafx.scene.control.skin.TableHeaderRow) node;
if (header == null); //Table not rendered
header.setReorderable(false);
You must have the TableView rendered before accessing the skin, because the TableViewSkin obtained from TableView.getSkin() is a visual representation of user interface controls. As the official JavaFx JavaDoc says, Skin is a
Base class for defining the visual representation of user interface
controls by defining a scene graph of nodes to represent the skin. A
user interface control is abstracted behind the Skinnable interface.
Therefore, the Skin will be null if the TableView is not rendered because there is nothing visual to represent.
Note that the second method cannot be used in Java 9 or later due to the modules in Java API block your access towards any sun packages.
EDIT:
In JavaFX 8 or older, there is a method called impl_setReorderable(boolean) which is deprecated, but works flawlessly, pretty much same as setReorderable(boolean) in JavaFX 9.
I've created a simple TableView that is fed with data from a database, and what I want is just to be able to easily change the value of a numeric column of that table with JavaFx.
But... since I have some mental issue or something, I can't make it work.
Below it's the "SpinnerCell" component, and the issue I've been having is that even after the commitEdit is fired, when I get the items from the TableView, no values were altered. What am I missing from this update lifecycle?
import javafx.scene.control.Spinner;
import javafx.scene.control.TableCell;
public class SpinnerTableCell<S, T extends Number> extends TableCell<S, T> {
private final Spinner<T> spinner;
public SpinnerTableCell() {
this(1);
}
public SpinnerTableCell(int step) {
this.spinner = new Spinner<>(0, 100, step);
this.spinner.valueProperty().addListener((observable, oldValue, newValue) -> commitEdit(newValue));
}
#Override
protected void updateItem(T c, boolean empty) {
super.updateItem(c, empty);
if (empty || c == null) {
setText(null);
setGraphic(null);
return;
}
this.spinner.getValueFactory().setValue(c);
setGraphic(spinner);
}
}
Because your table cell is always showing the editing control (the Spinner), you bypass the usual table cell mechanism for beginning an edit. For example, in the TextFieldTableCell, if the cell is not in an editing state, then a label is shown. When the user double-clicks the cell, it enters an editing state: the cell's editingProperty() is set to true, and the enclosing TableView's editingCellProperty() is set to the position of the current cell, etc.
In your case, since this never happens, isEditing() is always false for the cell, and as a consequence, commitEdit() becomes a no-op.
Note that the CheckBoxTableCell is implemented similarly: its documentation highlights this fact. (The check box table cell implements its own direct update of properties via the selectedStateCallback.)
So there are two options here: one would be to enter an editing state when the spinner gains focus. You can do this by adding the following to the cell's constructor:
this.spinner.focusedProperty().addListener((obs, wasFocused, isNowFocused) -> {
if (isNowFocused) {
getTableView().edit(getIndex(), getTableColumn());
}
});
Another option would be to provide a callback for "direct updates". So you could do something like:
public SpinnerTableCell(BiConsumer<S,T> update, int step) {
this.spinner = new Spinner<>(0, 100, step);
this.spinner.valueProperty().addListener((observable, oldValue, newValue) ->
update.accept(getTableView().getItems().get(getIndex()), newValue));
}
and then given a model class for the table, say
public class Item {
private int value ;
public int getValue() { return value ;}
public void setValue(int value) { this.value = value ;}
// ...
}
You could do
TableView<Item> table = ... ;
TableColumn<Item, Integer> valueCol = new TableColumn<>("Value");
valueCol.setCellValueFactory(cellData -> new SimpleIntegerProperty(cellData.getValue().getValue()).asObject());
valueCol.setCellFactory(tc -> new SpinnerTableCell<>(Item::setValue, 1));