[FIXED] How to prevent my gridpane from resizing differently?

Issue

package com.example.project;

import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.ComboBox;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Region;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import java.net.URL;
import java.util.ResourceBundle;

public class Scene2Controller implements Initializable {

    @FXML
    private ComboBox boardSizeCombo;
    @FXML
    private GridPane grid;
    @FXML
    private ComboBox colourCombo;

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        colourCombo.getItems().add("Red and White");
        colourCombo.getItems().add("Orange and White");

        boardSizeCombo.getItems().add("9x9");
        boardSizeCombo.getItems().add("10x10");

    boardSizeCombo.setOnAction((actionEvent ->{
        int selectedIndex = boardSizeCombo.getSelectionModel().getSelectedIndex();
        if (selectedIndex == 0){
        int count = 0;
        double s = 100; // side of rectangle
        for (int i = 0; i < 8; i++) {
            count++;
            for (int j = 0; j < 8; j++) {
                Rectangle r = new Rectangle(s, s, s, s);
                if (count % 2 == 0)
                    r.setFill(Color.WHITE);
                grid.add(r, j, i);
                count++;
            }
        }
        }
        if (selectedIndex == 1){
            int count = 0;
            double s = 100; // side of rectangle
            for (int i = 0; i < 8; i++) {
                count++;
                for (int j = 0; j < 8; j++) {
                    Rectangle r = new Rectangle(s, s, s, s);
                    if (count % 2 == 0)
                        r.setFill(Color.BLUE);
                    grid.add(r, j, i);
                    count++;
                }
            }
        }

    }
    ));
}

}

The user selects a option from the comboBox. In this case, the user selects a size for the board and then whatever size the user has selected, the outcome will be displayed on the gridpane. However, it is doing what is screenshotted. Can someone help with the constraints please. Thanks

Solution

You need to fix your loops.

E.g. for a 9x9 grid

for (int i = 0; i < 8; i++) {

That loops from 0 to 7 ... a total of 8 iterations, not 9. For the 10x10 grid you seem to have the same loop.

Here is a basic solution:

import javafx.scene.control.ComboBox;
import javafx.scene.layout.GridPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.application.Application;
import javafx.event.Event;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class GridExample extends Application {
    private ComboBox boardSizeCombo;
    private GridPane grid;
    private ComboBox colourCombo;

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

    @Override
    public void start(Stage primaryStage) throws Exception {
        grid = new GridPane();
        colourCombo = new ComboBox();
        boardSizeCombo = new ComboBox();

        colourCombo.getItems().add("Red and White");
        colourCombo.getItems().add("Orange and White");
        colourCombo.getSelectionModel().select(0);
        colourCombo.setOnAction(this::createBoard);

        boardSizeCombo.getItems().add("9x9");
        boardSizeCombo.getItems().add("10x10");
        boardSizeCombo.getSelectionModel().select(0);
        boardSizeCombo.setOnAction(this::createBoard);

        createBoard(null);
        
        HBox topPane = new HBox(new Label("Try it..."));
        VBox sidePane = new VBox(8, colourCombo, boardSizeCombo);
        BorderPane root = new BorderPane(grid, topPane, null, null, sidePane);
        root.setPadding(new Insets(8));
        Scene scene = new Scene(root);
        primaryStage.setScene(scene);
        primaryStage.setMinWidth(700);
        primaryStage.setMinHeight(600);
        primaryStage.show();
    }

    void createBoard(Event e) {
        int colourIndex = colourCombo.getSelectionModel().getSelectedIndex();
        int sizeIndex = boardSizeCombo.getSelectionModel().getSelectedIndex();

        int n = sizeIndex == 0 ? 9 : 10;
        Color baseColour = colourIndex == 0 ? Color.RED : Color.ORANGE;

        grid.getChildren().clear();
        double s = 50; // side of rectangle
        for (int i = 0; i < n; i++) {
            for (int j = 0; j < n; j++) {
                Rectangle r = new Rectangle(s, s, s, s);
                r.setFill((((i ^ j) & 1) == 0) ? Color.WHITE : baseColour);
                grid.add(r, j, i);
            }
        }
    }
}

Answered By - swpalmer