FXML/JavaFX How to make an ImageView Clickable? - javafx

Question

I want to change the Image in the Image View using FXML and to change the Image I open the fileChooser to pick an image that should replace the old one , I have 2 issues right now :
How to make the ImageView Clickable this is the code I'm using for this
public void imagePicker(){
Defaultview.setPickOnBounds(true); // allows click on transparent areas
Defaultview.setOnMouseClicked((MouseEvent e) -> {
FileChooser fileChooser = new FileChooser();
fileChooser.setTitle("Open Resource File");
fileChooser.showOpenDialog(new Stage());
});
}
in my FXML file I have:
<ImageView fx:id="Defaultview" fitHeight="93" fitWidth="93"
pickOnBounds="true" preserveRatio="true" onAction='#imagePicker'>
and for the image change I'd like to change it from
Image url="#../images/default.png"
to the Image Chosen .

Answer 1

ImageView doesn't have an onAction property (so I think you should get a runtime error when you load your FXML file). If you want to respond to mouse clicks, then you should use onMouseClicked:
<ImageView fx:id="Defaultview" fitHeight="93" fitWidth="93"
pickOnBounds="true" preserveRatio="true" onMouseClicked='#imagePicker'>
Registering the event handler in FXML means that the imagePicker() method will be invoked when the event occurs (i.e. when the user clicks on the image view). There is no need (and it's incorrect) to set the onClicked handler from inside the method that is invoked when the onClick event occurs. All you need is
public void imagePicker(){
FileChooser fileChooser = new FileChooser();
fileChooser.setTitle("Open Resource File");
// use existing window here, don't create a new one:
File file = fileChooser.showOpenDialog(Defaultview.getScene().getWindow());
if (file != null) {
Defaultview.setImage(new Image(file.toURI().toString()));
}
}

Answer 2

In JavaFx ImageView has setOnMouseClicked property,so if you want to import an image from your PC using fileChooser ,you need to add an extension to your FileChooser to define only images and skip other files
public void imagePicker(){
FileChooser fileChooser = new FileChooser();
FileChooser.ExtensionFilter extFilterJPG = new FileChooser.ExtensionFilter("JPG files (*.jpg)", "*.JPG");
FileChooser.ExtensionFilter extFilterPNG = new FileChooser.ExtensionFilter("PNG files (*.png)", "*.PNG");
fileChooser.getExtensionFilters().addAll(extFilterJPG, extFilterPNG);
File ChooserFile = fileChooser.showOpenDialog(Defaultview.getScene().getWindow());//your owner
if (ChooserFile != null) {
Image image = new Image(ChooserFile.toURI().toString());
Defaultview.setImage(image);
}
}
and add MouseEvent (setOnMouseClicked) to your ImageView :
Defaultview.setOnMouseClicked(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent event) {
imagePicker();
}
});