Develop Reference

How to set individual cell tooltip/bind property to the tooltip for TableColumn in JavaFX

I have a table where I want to display a tooltip for a specific column that correlates to a different value than the cell that the user is hovering over. I know normally, tooltips are set for the exact cell object value or another string. But I want to display a different value that correlates with each
Like in the image shown, I'm displaying a "type" and I want the user to be able to hover over the individual "type" cell to view the "subtype" string as a tooltip. (Like in the image, but I want this to display the actual type and not a dummy string.) Both are defined in the IDisplayLayer Interface.
I need to display the specific subtypeProperty in the tooltip, instead of a string. This subtype needs to be binded like how the normal PropertyValueFactory's bind the data. How can I bind this? Thanks in advance for any help/guidance.
TableColumn<IDisplayLayer, String> type = new TableColumn<>("Type");
PropertyValueFactory<IDisplayLayer, String> pvf2 = new PropertyValueFactory<IDisplayLayer, String>("layerType");
type.setCellFactory
(
column ->
{
return new TableCell<IDisplayLayer, String>()
{
#Override
protected void updateItem(String item, boolean empty)
{
Tooltip tip = new Tooltip("This is a tooltip"); //where I need to set the value here
super.updateItem(item, empty);
setText(item);
setTooltip(tip);
}
};
});
Where both are defined:
public interface IDisplayLayer {
String getLayerType();
void setLayerType(String s);
StringProperty layerTypeProperty();
String getLayerSubtype();
void setLayerSubtype(String s);
StringProperty layerSubtypeProperty();
}

Since your cell effectively depends on two properties in the model object, you probably need a table column configuration something like this:
TableColumn<IDisplayLayer, IDisplayLayer> type = new TableColumn<>("Type");
type.setCellValueFactory(cellData -> new SimpleObjectProperty<>(cellData.getValue()));
type.setCellFactory(col -> new TableCell<>() {
private final Tooltip tooltip = new Tooltip();
#Override
protected void updateItem(IDisplayLayer row, boolean empty) {
super.updateItem(row, empty);
textProperty().unbind();
tooltip.textProperty().unbind();
if (row == null || empty) {
setText(null);
setTooltip(null);
} else {
textProperty().bind(row.layerTypeProperty());
tooltip.textProperty().bind(row.layerSubtypeProperty());
setTooltip(tooltip);
}
}
});

JavaFx: Formatting Table Column Data

This is my first time working on JavaFx and I'm following this tutorial just as a template: http://code.makery.ch/library/javafx-8-tutorial/part3/.
For my application, I'm working with 2 columns on the left side, telephone number and the call start date/time. I'm wanting to change the formatting of the data in the table as it's currently coming through as yyyy-MM-ddThh:mm.
I can't seem to figure out where to place the formatting piece at. I have a date formatter function that you can find at the link above, but it's returning a string and giving me errors. Thanks for any help you can give. Here are some code snippets of what I'm working with.
Controller:
#FXML
private void initialize() {
// Initialize the person table with the two columns.
billingNumberColumn.setCellValueFactory(cellData -> cellData.getValue().billingNumberProperty());
callStartColumn.setCellValueFactory(cellData -> cellData.getValue().callStartProperty());
}
Model:
public LocalDateTime getCallStart() {
return callStart.get();
}
public void setCallStart(LocalDateTime callStart) {
this.callStart.set(callStart);
}
public ObjectProperty<LocalDateTime> callStartProperty() {
return callStart;
}
Date Format:
public static String format(ObjectProperty<LocalDateTime> callStart) {
if (callStart == null) {
return null;
}
return DATE_FORMATTER.format((TemporalAccessor) callStart);
}

Use a cellFactory. TextFieldTableCell provides a method to create a cell factory given a converter. As converter a LocalDateTimeStringConverter can be used:
callStartColumn.setCellValueFactory(cellData -> cellData.getValue().callStartProperty());
callStartColumn.setCellFactory(TextFieldTableCell.forTableColumn(new LocalDateTimeStringConverter(DATE_FORMATTER, DATE_FORMATTER)));

Specify column
TableColumn<Person, LocalDateTime> column = new TableColumn<>("Birth");
Code for this is quite complicated and not really good lookin.
Make sure yo utake care of empty case or / null handled when no data is in the cell
column.setCellFactory(
new Callback<TableColumn<Person, LocalDateTime>, TableCell<Person, LocalDateTime>>() {
#Override
public TableCell<Person, LocalDateTime> call(TableColumn<Person, LocalDateTime> param
) {
return new TableCell<Person, LocalDateTime>() {
#Override
protected void updateItem(LocalDateTime item, boolean empty) {
super.updateItem(item, empty);
if (item == null || empty) {
setText(null);
setStyle("");
} else {
//FORMAT HERE AND CALL setText() with formatted date string
}
}
};
}
}
);

Creating a custom tree with javafx

Basically, I wanted to know if I could create a tree and custom it on javaFX...
I tried to do it, but couldn't do anything so far with this code...
public class Main{
......
public Main() throws Exception{
......
// TreeView created
TreeView tv = (TreeView) fxmlLoader.getNamespace().get("treeview");
TreeItem<String> rootItem = new TreeItem<String>("liss");
rootItem.setExpanded(true);
tv.setRoot(rootItem);
/*for (int i = 1; i < 6; i++) {
TreeItem<String> item = new TreeItem<String> ("Message" + i);
rootItem.getChildren().add(item);
}
TreeItem<String> item = new TreeItem<String> ("MessageWoot");
rootItem.getChildren().add(item);
*/
//tv.setEditable(true);
tv.setCellFactory(new Callback<TreeView<String>, TreeCell<String>>() {
#Override
public TreeCell<String> call(TreeView<String> arg0) {
// custom tree cell that defines a context menu for the root tree item
return new MyTreeCell();
}
});
stage.show();
}
//
private static class MyTreeCell extends TextFieldTreeCell<String> {
private ContextMenu addMenu = new ContextMenu();
public boolean clickedFirstTime = false;
public MyTreeCell() {
// instantiate the root context menu
MenuItem addMenuItem = new MenuItem("Expand");
addMenu.getItems().add(addMenuItem);
addMenuItem.setOnAction(new EventHandler() {
public void handle(Event t) {
TreeItem n0 =
new TreeItem<String>("'program'");
TreeItem n1 =
new TreeItem<String>("<identifier>");
TreeItem n2 =
new TreeItem<String>("body");
getTreeItem().getChildren().add(n0);
getTreeItem().getChildren().add(n1);
getTreeItem().getChildren().add(n2);
}
});
}
#Override
public void updateItem(String item, boolean empty) {
super.updateItem(item, empty);
// if the item is not empty and is a root...
//if (!empty && getTreeItem().getParent() == null && this.clickedFirstTime) {
System.out.println("UPDATEITEM -> clickedFirstTime : "+this.clickedFirstTime);
if (!this.clickedFirstTime) {
System.out.println("WOOT");
setContextMenu(addMenu);
this.clickedFirstTime = true;
}
}
}
And I'm questioning myself if this is the right "technology" which will solve what I'm trying to do...
What's my objective in this?
Firstly, I'm looking to add or delete a treeItem. I must say that a certain treeItem may be added only once or any N times, like a restriction (for example: treeItem < 6 for a certain level scope and a certain path of the root of tree view).
Secondly, make some treeItem editable and others not editable! When it is Editable, you may pop up something for the user in order to insert some input for example!
Is it possible ?
I saw the tutorial from https://docs.oracle.com/javafx/2/ui_controls/tree-view.htm#BABJGGGF but I'm really confused with this tutorial ... I don't really understand the cell factory mechanism... The fact that he does apply to TreeView when i want only a certain TreeItem... Or how could I control that effect/behaviour ?
I mean, I'm really really lost with TreeView. Probably, TreeView isn't what I'm looking for ...
P.S.: I know that I cannot apply any visual effect or add menus to a tree items and that i use a cell factory mechanism to overcome this obstacle. Just I don't understand the idea and how could I do it !

Sure this is the right "technology", if you want to use JavaFX. You should probably use a more complex type parameter for TreeItem however. You can use your a custom TreeCell to allow the desired user interaction.
This example allows adding children and removing nodes via context menu (unless the content is "nocontext") as well as editing the content (as long as the content is not "noedit"); on the root node the delete option is disabled:
tv.setEditable(true);
tv.setCellFactory(new Callback<TreeView<String>, TreeCell<String>>() {
private final MyContextMenu contextMenu = new MyContextMenu();
private final StringConverter converter = new DefaultStringConverter();
#Override
public TreeCell<String> call(TreeView<String> param) {
return new CustomTreeCell(contextMenu, converter);
}
});
public class CustomTreeCell extends TextFieldTreeCell<String> {
private final MyContextMenu contextMenu;
public CustomTreeCell(MyContextMenu contextMenu, StringConverter<String> converter) {
super(converter);
if (contextMenu == null) {
throw new NullPointerException();
}
this.contextMenu = contextMenu;
this.setOnContextMenuRequested(evt -> {
prepareContextMenu(getTreeItem());
evt.consume();
});
}
private void prepareContextMenu(TreeItem<String> item) {
MenuItem delete = contextMenu.getDelete();
boolean root = item.getParent() == null;
if (!root) {
delete.setOnAction(evt -> {
item.getParent().getChildren().remove(item);
contextMenu.freeActionListeners();
});
}
delete.setDisable(root);
contextMenu.getAdd().setOnAction(evt -> {
item.getChildren().add(new TreeItem<>("new item"));
contextMenu.freeActionListeners();
});
}
#Override
public void updateItem(String item, boolean empty) {
super.updateItem(item, empty);
if (!empty) {
setContextMenu("nocontext".equals(item) ? null : contextMenu.getContextMenu());
setEditable(!"noedit".equals(item));
}
}
}
public class MyContextMenu {
private final ContextMenu contextMenu;
private final MenuItem add;
private final MenuItem delete;
public MyContextMenu() {
this.add = new MenuItem("add child");
this.delete = new MenuItem("delete");
this.contextMenu = new ContextMenu(add, delete);
}
public ContextMenu getContextMenu() {
return contextMenu;
}
public MenuItem getAdd() {
return add;
}
public MenuItem getDelete() {
return delete;
}
/**
* This method prevents memory leak by setting all actionListeners to null.
*/
public void freeActionListeners() {
this.add.setOnAction(null);
this.delete.setOnAction(null);
}
}
Of course more complex checks can be done in the updateItem and prepareContextMenu and different user interactions can be supported (TextFieldTreeCell may not be the appropriate superclass for you; You could use a "normal" TreeCell and show a different stage/dialog to edit the item when the user selects a MenuItem in the context menu).
Some clarification about cell factories
Cell factories are used to create the cells in a class that displays data (e.g. TableColumn, TreeView, ListView). When such a class needs to display content, it uses it's cell factory to create the Cells that it uses to display the data. The content displayed in such a cell may be changed (see updateItem method).
Example
(I'm not 100% sure this is exactly the way it's done, but it should be sufficiently close)
A TreeView is created to display a expanded root node with 2 non expanded children.
The TreeView determines that it needs to display 3 items for the root node and it's 2 children. The TreeView therefore uses it's cell factory to creates 3 cells and adds them to it's layout and assigns the displayed items.
Now the user expands the first child, which has 2 children of it's own. The TreeView determines that it needs 2 more cells to display the items. The new cells are added at the end of the layout for efficiency and the items of the cells are updated:
The cell that previously contained the last child is updated and now contains the first child of the first item.
The 2 newly added cells are updated to contain the second child of the first child and the second child of the root respecitvely.

So I decided to eliminate TreeView (because the documentation is so trash...) and, instead, I decided to implement a Webview !
Why ?
Like that, I could create an HTML document and use jstree (jquery plugin - https://www.jstree.com ) in there. It is a plugin which will create the treeview basically.
And the documentation is ten time better than treeview oracle documentation unfortunately.
Also, the possibility in creating/editing the tree with jstree is better.
Which concludes me that it was the best solution that I could figure out for me.
Also, whoever who will read me, I did a bridge with the webview and my javafx application ! It is a connection between my HTML document and the java application (Read more here - https://blogs.oracle.com/javafx/entry/communicating_between_javascript_and_javafx).
Hope It will help more people.

ComboBox.setValue(T) not calling updateItem(T,boolean) when using cell factory

I've overridden ListCell.updateItem(T, boolean) to provide a custom renderer for my ComboBox items (as per Oracle ComboBox tutorial) and this is working fine except when I programmatically set an item using ComboBox.setValue(T).
Instead the toString() method of T is being called. The item being set is already in the ObservableList which backs the ComboBox.
comboBox.setCellFactory(new Callback<ListView<MyType>, ListCell<MyType>>()
{
#Override
public ListCell<MyType> call(ListView<MyType> arg0)
{
return new ListCell<MyType>()
{
#Override
protected void updateItem(MyType item, boolean empty)
{
super.updateItem(item, empty);
if (item == null || empty)
{
setText("");
}
else
{
setText(item.myCustomRenderMethod());
}
}
};
}
});
Is there another method I need to override?
JavaFX2 on JDK1.7.0_45.
Thanks.

OK, found the answer here: JavaFx Editable ComboBox : Showing toString on item selection
You also need to override ComboBox.setConverter() to ensure that the selected object shows the correct text. This is not in the Oracle tutorial and violates the principle of least surprise for me as it duplicates some of the code from ListCell.updateItem()
comboBox.setConverter(new StringConverter<MyType>() {
#Override
public String toString(MyType obj) {
if (obj == null)
{
return "";
}
else
{
return obj.myCustomRenderMethod();
}
}
#Override
public MyType fromString(String s)
{
return null;
}
});

In my case using Platform.runLater() solved the issue:
Platform.runLater(() -> comboBox.setValue(value));
My best guess is that setting a value before the ComboBox is part of a Scene causes the problem. Also, be sure to use the setButtonCell(...) method of ComboBox.

Java method does not override

I am trying to display image fetch from database in a table view. Here is how I set up my table view with image column:
TableColumn prodImageCol = new TableColumn("IMAGES");
prodImageCol.setCellValueFactory(new PropertyValueFactory<Product, Image>("prodImage"));
prodImageCol.setMinWidth(100);
// setting cell factory for product image
prodImageCol.setCellFactory(new Callback<TableColumn<Product, Image>, TableCell<Product, Image>>() {
#Override
public TableCell<Product, Image> call(TableColumn<Product, Image> param) {
TableCell<Product, Image> cell = new TableCell<Product, Image>() {
#Override //Error here
public void updateItem(Product item, boolean empty) {
if (item != null) {
ImageView imageview = new ImageView();
imageview.setFitHeight(50);
imageview.setFitWidth(50);
imageview.setImage((Image) item.getprodImage());
setGraphic(imageview);
}
}
};
return cell;
}
});
However, I am getting method does not override or implement a method from a supertype. I have no idea why is it so because I follow the same thing from a website on how to display image in table view. Can somebody please explain to me why is it so? Thanks in advance.

UPDATE: The signature of the updateItem method is:
#Override
protected void updateItem(Image image, boolean b) {
super.updateItem(image, b);
}
I posted my original answer too quickly (before I got the same compile error you did).
You can have a method like this if you like:
public void updateItem(Product item, boolean empty);
You just can't annotate it with:
#Override
Which means you are redefining a method with the exact same signature (name and arguments) from the base class.
Alternatively, reverse the generic type arguments:
<Image, Product> vs. <Product, Image>