Comfortable mappings - javafx

Question

I have a grid in which I show different images. When the user clicks on an image, an event should be fired. My code now looks like this:
<GridPane alignment="center" hgap="10" vgap="10">
<ImageView
fx:id="cell1" fitHeight="90" fitWidth="70"
GridPane.columnIndex="0" GridPane.rowIndex="0"
onMouseClicked="#previewClicked1" />
<ImageView
fx:id="cell2" fitHeight="90" fitWidth="
GridPane.columnIndex="1" GridPane.rowIndex="0"
onMouseClicked="#previewClicked2"/>
[...]
</GridPane>
I have like 20 of these cells. Do I really need to create an ImageView object and an event method for every one of these objects? E.g. isn't there a way to object has been clicked?

Answer 1

The best option is simply to do this in Java, rather than in FXML. So your FXML will just be
<GridPane fx:id="imagePane" alignment="center" ... >
</GridPane>
Now in your controller's initialize() method define the ImageViews:
public class MyController {
#FXML
private GridPane imagePane ;
public void initialize() {
int numColumns = ... ;
int numRows = ... ;
for (int col = 0; col < numColumns; col++) {
for (int row = 0; row < numRows; row++) {
ImageView imageView = new ImageView();
imagePane.add(imageView, col, row);
imageView.setOnMouseClicked(e -> {
// handle click for this image...
});
}
}
}
}
This is likely way less code in total anyway (since the FXML will be much smaller), and you can readily organize the image views into an array if you need, etc.
If you really want to define all the image views in FXML, one by one, then you can get the source of the event in the event handler. I don't really like this approach because of the necessary downcast, which can potentially make it brittle if you change things at a later stage. However:
#FXML
private void previewClicked(MouseEvent event) {
ImageView clickedImage = (ImageView) event.getSource();
// ...
}
and then just set onMouseClicked="#previewClicked" for all the ImageViews. You still have to laboriously define all the ImageViews in FXML, one by one, though.