How do I position buttons that span multiple columns in JavaFX GridPane?


Question

I'm trying to position 3 buttons side-by-side across the first row, but they are all stacking on top of each other. The actual button processes seem to work fine, but the button positioning is all wrong. How do I get these buttons to space out using the GridPane features?

// Import the classes required
import java.util.Random;
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.TextField;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class EventMatrix2 extends Application 
{
    public static void main(String[] args) 
    {
        Application.launch(args);
    }

    @Override
    public void start(Stage primaryStage) 
    { 
        //Create Border Pane   
        BorderPane border = new BorderPane();

        //Add GridPane
        GridPane grid = addGridPane();
        border.setTop(grid);

        //Add Bottom HBox
        HBox bottomHBox = addBottomHBox();
        border.setBottom(bottomHBox);       

        // Title the stage
        primaryStage.setTitle("Zero/One Matrix"); 

        // Create a Scene object and set its size.
        Scene scene = new Scene(border);
        primaryStage.setScene(scene);
        primaryStage.show();
        primaryStage.setWidth(300);
        primaryStage.setHeight(400);

        scene.setOnKeyPressed(ESCAPE ->
        {
           primaryStage.close(); 
        });
    }

    public GridPane addGridPane() 
    {        
        GridPane pane = new GridPane();
        pane.setAlignment(Pos.CENTER);
        pane.setPadding(new Insets(15, 12, 15, 12));
        pane.setHgap(1);
        pane.setVgap(1); 
        pane.setStyle("-fx-background-color: #336699;");

        //Create buttons
        Button resetZeroButton = new Button("Set To 0");
        Button resetOneButton = new Button("Set To 1");
        Button resetRandomButton = new Button("Set Random");

        //Create Empty grid
        for(int i = 0; i < 10; i++) 
                { 
                    for(int j = 0; j < 10; j++) 
                    {                 
                        //Create new text field
                        TextField number = new TextField();
                        pane.add(number, i , j + 1);                 
                    }
                }

        //Reset all to 0 Button
        resetZeroButton.setPrefSize(100, 20);
        resetZeroButton.setOnAction(new EventHandler<ActionEvent>() 
        {
            // Handle the event
            public void handle(ActionEvent event) 
            { 
                //Define local variables
                String fillZero;
                fillZero = String.valueOf(0);

                for(int i = 0; i < 10; i++) 
                { 
                    for(int j = 0; j < 10; j++) 
                    {                 
                        //Create new text field
                        TextField number = new TextField(fillZero);
                        pane.add(number, i , j + 1);
                        number.setAlignment(Pos.CENTER);  
                    }
                }
            }
        });

        //Reset all to 1 Button
        resetOneButton.setPrefSize(100, 20);
        resetOneButton.setOnAction(new EventHandler<ActionEvent>() 
        {
            // Handle the event
            public void handle(ActionEvent event) 
            { 
                //Define local variables
                String fillOne;
                fillOne = String.valueOf(1);

                for(int i = 0; i < 10; i++) 
                { 
                    for(int j = 0; j < 10; j++) 
                    {                 
                        //Create new text field
                        TextField number = new TextField(fillOne);
                        pane.add(number, i, j + 1);
                        number.setAlignment(Pos.CENTER);
                    }
                }
            }
        });

        //Reset all to random Button
        resetRandomButton.setPrefSize(125, 20);
        resetRandomButton.setOnAction(new EventHandler<ActionEvent>() 
        {
            // Handle the event
            public void handle(ActionEvent event) 
            { 
                //Declare local variables
                int intZeroOrOne;
                String fillRandom;

                //Create and Fill 10 x 10 Grid
                for(int i = 0; i < 10; i++) 
                { 
                    for(int j = 0; j < 10; j++) 
                    { 
                        //Randomly generate 0 or 1 
                        Random randomNumber = new Random();
                        intZeroOrOne = randomNumber.nextInt(2);
                        fillRandom = String.valueOf(intZeroOrOne);

                        //Create new text field
                        TextField number = new TextField(fillRandom);
                        pane.add(number, i, j + 1);
                        number.setAlignment(Pos.CENTER);
                    }
                }
            }
        });

        pane.getChildren().addAll(resetZeroButton, resetOneButton, resetRandomButton);

        return pane;
    }

    public HBox addBottomHBox() 
    {
        HBox bottomHBox = new HBox();
        bottomHBox.setPadding(new Insets(15, 12, 15, 12));
        bottomHBox.setSpacing(10);
        bottomHBox.setStyle("-fx-background-color: #336699;");
        bottomHBox.setAlignment(Pos.CENTER);

        Button quitButton = new Button("Quit");
        quitButton.setPrefSize(100, 20);
        quitButton.setOnAction(new EventHandler<ActionEvent>() // Fire event on button click
        {
            // Handle the event
            public void handle(ActionEvent event) 
            { 
                System.exit(0);
            }
        });

        bottomHBox.getChildren().addAll(quitButton);        

        return bottomHBox;
    }
}
1
2
8/4/2014 4:13:38 AM

Accepted Answer

Since you are using a GridPane, you need to specify the row and column index while adding a child to the gridpane. Try to replace

pane.getChildren().addAll(resetZeroButton, resetOneButton, resetRandomButton);

with the following line's

pane.add(resetZeroButton, 0, 0);
pane.add(resetOneButton, 1, 0);
pane.add(resetRandomButton, 2, 0);

The Gridpane's add method works in the following way :

gridPane.add(child, columnIndex, rowIndex)
1
8/4/2014 6:06:28 AM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Icon