Get Object from Collection

Question

I'm building a grid out of rectangles.

I want to click one of the rectangles and its color should change.

However, I dont know how to access the rectangles in Main AFTER they've been created.

Main:

import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.Shape;
import javafx.stage.Stage;

public class Main extends Application{

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

    public void changeColor(Pane p) {
         p.setOnMouseClicked(me -> {
            double posX = me.getX();
            double posY = me.getY();

            int colX = (int)(posX / 30);
            int colY = (int) (posY / 30);

            ObservableList<Node> children = p.getChildren();
            for( Node d : children) {
                    if(d.getLayoutX() == colX && d.getLayoutY() == colY) {
                        // how can i access my rectangle here?
                        // basically, i want to be able to do .setFill()
                    }
            }
        });
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        Grid g = new Grid(30,30, 30);
        Pane window = g.render();
        Scene scene = new Scene(window, 500, 500);
        primaryStage.setScene(scene);
        primaryStage.show();
        this.changeColor(window);

    }
}

Grid:

import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;


public class Grid {

    Integer width, height, squareSize; 
    Color fill = Color.ALICEBLUE, 
        stroke = Color.BLACK;

    public Grid(int x, int y, int squareSize){
        this.width = x; 
        this.height = y;
        this.squareSize = squareSize;
    }

    public Pane render() {
        Pane p = new Pane();
        Rectangle [][] rect = new Rectangle[this.width][this.height];
        for(int i = 0; i < this.width; i++) {
            for(int j = 0; j < this.height; j++) {
                rect[i][j] = new Rectangle();
                rect[i][j].setX(i * width);
                rect[i][j].setY(j * height);
                rect[i][j].setWidth(this.squareSize);
                rect[i][j].setHeight(this.squareSize);
                rect[i][j].setFill(this.fill);
                rect[i][j].setStroke(this.stroke);              
                p.getChildren().add(rect[i][j]);
            }
        }
        return p;
    }
}

Can someone please help me to figure out how I can access my rectangles again in the main file?

score 1 · Accepted Answer · answered Apr 08 '19 at 02:39

Keeping with your current design, you simply need to test if the mouse clicked within a child and if that child is an instance of Rectangle; then you can cast and call setFill. However, I recommend changing the name of changeColor as that name does not represent what that method is doing.

public void installChangeColorHandler(Pane pane) {
    pane.setOnMouseClicked(event -> {
        for (Node child : pane.getChildren()) {
            if (child instanceof Rectangle 
                    && child.contains(child.parentToLocal(event.getX(), event.getY()))) {
                ((Rectangle) child).setFill(/* YOUR COLOR */);
                event.consume();
                break;
            }
        }
    });
}

Since the event handler is added to Pane the x and y mouse coordinates are relative to said Pane. But since your Rectangles are direct children of Pane we can call Node.parentToLocal to transform those coordinates into the Rectangle's space¹. We then need to test if the bounds of the Rectangle contain those coordinates using Node.contains; if it does, change the fill.

That said, you may want to modify your code so that you're adding an/the EventHandler directly to the Rectangles. That way you can use Event.getSource(). For instance²:

public Pane render(EventHandler<MouseEvent> onClick) {
    // outer loop...
        // inner loop...
            Rectangle r = new Rectangle();
            // configure r...
            r.setOnMouseClicked(onClick);
        // end inner loop...
    // end outer loop...
}

...

// may want to consume event
Pane window = new Grid(30, 30, 30).render(event ->
        ((Rectangle) event.getSource()).setFill(/* YOUR COLOR */));

^{1. Even if they weren't direct children you can still transform the coordinates into the local space. For example, you can use Node.sceneToLocal and the scene coordinates provided by the MouseEvent (i.e. getSceneX()/getSceneY()).}
^{2. This is still staying close to your design. You may want to rethink things, however, into a proper MVC (or other) architecture. Applying MVC With JavaFx}

Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/191490/discussion-between-slaw-and-joel). — Slaw, Apr 09 '19 at 03:55

Get Object from Collection

1 Answers1