JavaFX GridPane Example Tutorial

In this tutorial, we will learn how to use the JavaFX GridPane layout in the JavaFX application.

GridPane places its nodes into a grid of rows and columns. Nodes may span multiple rows or columns. GridPane is the most flexible built-in layout pane.

GridPane layout represented by javafx.scence.layout.GridPane class. We just need to instantiate this class to implement GridPane.

Complete JavaFX tutorial at https://www.javaguides.net/p/javafx-tutorial.html.

JavaFX GridPane Example

The layout of this example consists of a four label, four text field, and a submit button:

package com.javafx.examples.layout;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class GridPaneExample extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        Label firsName = new Label("First Name");
        Label lastName = new Label("Last Name");
        Label userName = new Label("User Name");
        Label emailId = new Label("Email Id");

        TextField textField1 = new TextField();
        TextField textField2 = new TextField();
        TextField textField3 = new TextField();
        TextField textField4 = new TextField();

        Button Submit = new Button("Submit");

        GridPane root = new GridPane();
        root.setHgap(8);
        root.setVgap(8);
        root.setPadding(new Insets(5));
        Scene scene = new Scene(root, 400, 200);

        root.addRow(0, firsName, textField1);
        root.addRow(1, lastName, textField2);
        root.addRow(2, userName, textField3);
        root.addRow(3, emailId, textField4);
        root.addRow(4, Submit);

        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

Let's understand the above JavaFX program.

An instance of the GridPane is created:

GridPane root = new GridPane();

These two methods create horizontal and vertical gaps between the nodes:

		root.setHgap(8);
		root.setVgap(8);

Four labels are created:

		Label firsName = new Label("First Name");
		Label lastName = new Label("Last Name");
		Label userName = new Label("User Name");
		Label emailId = new Label("Email Id");

Four text fields are created:

		TextField textField1 = new TextField();
		TextField textField2 = new TextField();
		TextField textField3 = new TextField();
		TextField textField4 = new TextField();

One submit button is created:

Button Submit = new Button("Submit");

The addRow() method for placing the specified nodes sequentially in a given row of the grid pane:

		root.addRow(0, firsName, textField1);
		root.addRow(1, lastName, textField2);
		root.addRow(2, userName, textField3);
		root.addRow(3, emailId, textField4);
		root.addRow(4, Submit);

Output

References

https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/GridPane.html