creating user input grid-- JavaFX
<p>The goal is to allow user to enter a number <code>N</code>, and from that the program will create an N x N layout of buttons. The buttons don't have to do anything. </p>

<p>I'm trying to determine how to add all the objects to the GUI.  I've tried two approaches (shown below), without success. Any help would be appreciated. </p>

<p><strong>Unsuccessful Attempt 1:</strong></p>

<pre><code>import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;


public class CheckerBoard extends Application {

    @Override
    public void start(Stage primaryStage)
    {
        GridPane gridPane = new GridPane();
        gridPane.setHgap(0);
        gridPane.setVgap(0);
        HBox pane = new HBox(15);
        Scene scene = new Scene(pane, 800, 650);
        Scene sceneGrid = new Scene(gridPane, 444, 444);
        Label layoutInput = new Label("Input number to create graph size:");
        TextField number = new TextField();


        Button createGraph = new Button("Create Board");


        createGraph.setOnAction((ActionEvent event) -&gt; 
        {
            int size = Integer.parseInt(number.getText());
            //GridPane.setRowSpan(rowX, numb);
            //GridPane.setColumnSpan(colY, numb);
            Button [][] board = new Button [size][size];


            for (int row = 1; row &lt; size; row++)
            {
                for (int col = 1; col &lt; size; col++)
                {
                   Button fill = new Button();
                   Button button = new Button();
                   GridPane.setConstraints(button, 3, 1); 
                   board[row][col] = fill;



                    GridPane.setRowIndex(board[row][col], row);

                    //GridPane.setColumnIndex(button, col);

                    if ( row + col % 2 == 0 ) { //creates color pattern
                        button.setStyle("-fx-background-color: red;");
                    } else if (row + col % 2 == 1) {
                        button.setStyle("-fx-background-color: black;");
                    }

                    gridPane.getChildren().add(board[row][col]); 
                    gridPane.add(button, col, row);
                    pane.getChildren().add(gridPane);


                }
            }
        });
    ScrollPane scrollPane = new ScrollPane(gridPane);
    pane.setAlignment(Pos.CENTER);
    pane.getChildren().addAll(layoutInput,number,createGraph);
    //pane.setPadding (top, right, bottom, left));

    pane.setPadding(new Insets(150, 0, 700, 0));


    primaryStage.setTitle("Checker grid");
    primaryStage.setScene(scene);
    primaryStage.show();
    //displays contents

}
</code></pre>

<p><strong>Unsuccessful Attempt 2:</strong></p>

<pre><code>import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;


public class gridfix extends Application {

    @Override
    public void start(Stage stage){
        GridPane grid = new GridPane();

        Label layoutInput = new Label("Input number to create graph size:");
        TextField number = new TextField();


        Button createGraph = new Button("Create Board");
        createGraph.setOnAction((ActionEvent event) -&gt; 
        {
            int size = Integer.parseInt(number.getText());
            int BUTTON_PADDING = 0;
            int row = size;
            int col = size;


            grid.setPadding(new Insets(BUTTON_PADDING));
            grid.setHgap(BUTTON_PADDING);
            grid.setVgap(BUTTON_PADDING);

            for (int r = 0; r &lt; row; r++) {
                for (int c = 0; c &lt; col; c++) {
                    int numbers = row * r + c;
                    Button button = new Button(String.valueOf(numbers));
                    grid.add(button, c, r);

                    if ( row + col % 2 == 1 ) 
                    { //creates color pattern
                            button.setStyle("-fx-background-color: red;");
                    } 
                    else if (row + col % 2 == 1) 
                    {
                            button.setStyle("-fx-background-color: white;");
                    }
                }
            }
        });

        ScrollPane scrollPane = new ScrollPane(grid);


        stage.setScene(new Scene(scrollPane));
        stage.show();
    }       

}
</code></pre>