title: creating user input grid-- JavaFX
body: <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>