How to add action listeners to individual elements in a Tile Pane

Question

Is it possible to add action listeners to the indiviadual elements in a Tile or Flow Pane?

For example, in the example below, if a user clicked on an image, the the system would print out the location/ file path.

Thank You All.

public class FlowTileExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        VBox root = new VBox(30);

        //loading images
        Image[] im = new Image[8];
        im[0] = new Image(getClass().getResourceAsStream("facebook.png"));
        im[1] = new Image(getClass().getResourceAsStream("faviicon.png"));
        im[2] = new Image(getClass().getResourceAsStream("jquery-logo.png"));
        im[3] = new Image(getClass().getResourceAsStream("linkedin_32.png"));
        im[4] = new Image(getClass().getResourceAsStream("loading1.png"));
        im[5] = new Image(getClass().getResourceAsStream("twitter.png"));
        im[6] = new Image(getClass().getResourceAsStream("twitter_32.png"));
        im[7] = new Image(getClass().getResourceAsStream("wp.png"));

        VBox up = new VBox(20);
        Text text4flow = new Text("Images in FlowPane");
        text4flow.setFont(Font.font("Calibri", FontWeight.BOLD, 30));
        text4flow.setUnderline(true);
        VBox.setMargin(text4flow, new Insets(10, 0, 0, 10));
        //creating Flow Pane
        FlowPane flowpane = new FlowPane();
        flowpane.setHgap(5);
        flowpane.setVgap(5);
        for (int i = 0; i < 8; i++) {
            flowpane.getChildren().add(new ImageView(im[i]));
        }

        up.getChildren().addAll(text4flow, flowpane);

        VBox down = new VBox(20);
        Text text4tile = new Text("Images in TilePane");
        text4tile.setFont(Font.font("Calibri", FontWeight.BOLD, 30));
        text4tile.setUnderline(true);
        VBox.setMargin(text4tile, new Insets(10, 0, 0, 10));

        //creating Tile Pane
        TilePane tilepane = new TilePane();
        tilepane.setHgap(5);
        flowpane.setVgap(5);
        for (int i = 0; i < 8; i++) {
            tilepane.getChildren().add(new ImageView(im[i]));
        }
        down.getChildren().addAll(text4tile, tilepane);
        root.getChildren().addAll(up, down);
        primaryStage.setTitle("Flow And Tile Panes Example");
        Scene scene = new Scene(root, 500, 600);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Answer 1

You need to add some kind of handler to the ImageView instance, for example...

ImageView imageView = new ImageView(im[i]);
imageView.setOnMouseClicked(new EventHandler<MouseEvent>() {
    @Override
    public void handle(MouseEvent t) {
        System.out.println("Oh dear lord, they clicked me!?");
    }
});

Or you could create a generic handler...

EventHandler mouseHandler = new EventHandler<MouseEvent>() {
    @Override
    public void handle(MouseEvent t) {
        ImageView imageView = (ImageView) t.getSource();
        System.out.println("You clicked " + imageView.getImage());
    }
};

for (int i = 0; i < 8; i++) {
    ImageView imageView = new ImageView(im[i]);
    imageView.setOnMouseClicked(mouseHandler);
    flowpane.getChildren().add(imageView);
}

For example...

You should take a closer look at Handling JavaFX Events for more details

Answer 2

As an addition to MadProgrammer, for the quick managing the custom data you can utilize node's userData property, instead of constructing your own data model. The userData can be used in different situations like attaching some context data with the related node:

VBox root = new VBox();
final Glow glow = new Glow();

EventHandler<MouseEvent> handlerMouseClicked = (MouseEvent t) -> {
    System.out.println("url = " + ((ImageView) t.getSource()).getUserData());
};

EventHandler<MouseEvent> handlerMouseEntered = (MouseEvent t) -> {
    ((ImageView) t.getSource()).setEffect(glow);
};

EventHandler<MouseEvent> handlerMouseExited = (MouseEvent t) -> {
    ((ImageView) t.getSource()).setEffect(null);
};

String[] imageNames = {"rere.png", "rere_1.png", "rere_2.png"};
for (String imageName : imageNames) {
    String url = getClass().getResource(imageName).toExternalForm();
    ImageView iv = new ImageView(new Image(url));
    iv.setUserData(url);
    iv.setOnMouseEntered(handlerMouseEntered);
    iv.setOnMouseExited(handlerMouseExited);
    iv.setOnMouseClicked(handlerMouseClicked);
    root.getChildren().add(iv);
}