JavaFx : Handle ImageView click inside TableCell - javafx

Question

I have the following custom table cell implementation
package controllers;
import javafx.beans.property.BooleanProperty;
import javafx.beans.property.SimpleBooleanProperty;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.TableCell;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
public class TableCellWithImage<T> extends TableCell<T, String> {
private final ImageView image;
BooleanProperty is_image_visible_ = new SimpleBooleanProperty( false );
public TableCellWithImage() {
// add ImageView as graphic to display it in addition
// to the text in the cell
image = new ImageView( new Image( getClass().getResourceAsStream("/eyes.png")));
image.setFitWidth(32);
image.setFitHeight(32);
image.setPreserveRatio(true);
setGraphic(image);
setMinHeight(70);
setGraphicTextGap(10);
setContentDisplay(ContentDisplay.RIGHT);
setOnMouseEntered(mouseEvent -> {
is_image_visible_.set(true);
});
setOnMouseExited(mouseEvent -> {
is_image_visible_.set(false);
});
image.visibleProperty().bind(is_image_visible_);
setOnMouseClicked(mouseEvent -> {
System.out.println("cell clicked!");
});
image.setOnMouseClicked(mouseEvent -> {
System.out.println("Image clicked"); // not called ?
});
}
#Override
protected void updateItem(String item, boolean empty) {
super.updateItem(item, empty);
if (empty || item == null) {
// set back to look of empty cell
setText(null);
setGraphic(null);
} else {
setText(item);
setGraphic(image);
}
}
}
I want to handle a click event for the ImageView. But I get only cell event handler being called. What is wrong here?

Answer 1

I got it work, wrapping ImageView inside a Button. Here is the final solution :
package controllers;
import javafx.beans.property.BooleanProperty;
import javafx.beans.property.SimpleBooleanProperty;
import javafx.scene.control.Button;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.TableCell;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
public class TableCellWithImage<T> extends TableCell<T, String> {
private final ImageView image;
private final Button image_btn_;
BooleanProperty is_image_visible_ = new SimpleBooleanProperty( false );
public TableCellWithImage() {
// add ImageView as graphic to display it in addition
// to the text in the cell
image = new ImageView( new Image( getClass().getResourceAsStream("/eyes.png")));
image.setFitWidth(32);
image.setFitHeight(32);
image.setPreserveRatio(true);
image_btn_ = new Button();
image_btn_.setGraphic(image);
image_btn_.setStyle("-fx-background-color: transparent;");
image_btn_.setOnMouseClicked(mouseEvent -> {
System.out.println("image clicked");
});
setMinHeight(70);
setGraphicTextGap(10);
setContentDisplay(ContentDisplay.RIGHT);
setOnMouseEntered(mouseEvent -> {
is_image_visible_.set(true);
});
setOnMouseExited(mouseEvent -> {
is_image_visible_.set(false);
});
image_btn_.visibleProperty().bind(is_image_visible_);
setOnMouseClicked(mouseEvent -> {
System.out.println("cell clicked! " + image.isHover());
});
}
#Override
protected void updateItem(String item, boolean empty) {
super.updateItem(item, empty);
if (empty || item == null) {
// set back to look of empty cell
setText(null);
setGraphic(null);
} else {
setText(item);
setGraphic(image_btn_);
}
}
}