JavaFX - GridPane Layout

GridPane Layout in JavaFX

The GridPane is a type of layout container in which all the nodes are arranged in such a way that they form a grid of rows and columns. This layout comes handy while creating forms, charts, media galleries and so on.

In JavaFX, the class named GridPane of the package javafx.scene.layout represents the GridPane layout. Instantiating this class using its default constructor will create a grid pane layout in our JavaFX application. This class provides the following properties −

• alignment − This property represents the alignment of the pane and you can set value of this property using the setAlignment() method.

• hgap − This property is of the type double and it represents the horizontal gap between columns.

• vgap − This property is of the type double and it represents the vertical gap between rows.

• gridLinesVisible − This property is of Boolean type. On true, the lines of the pane are set to be visible.

Following table illustrates the cell positions in the grid pane of JavaFX. The first value of each cell represents row and second one column.

Example

The following program is an example of the grid pane layout. In this, we are creating a form using a Grid Pane. Save this code in a file with the name GridPaneExample.java.

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

public class GridPaneExample extends Application { 
   @Override 
   public void start(Stage stage) {      
      //creating label email 
      Text text1 = new Text("Email");       
      
      //creating label password 
      Text text2 = new Text("Password"); 
	  
      //Creating Text Filed for email        
      TextField textField1 = new TextField();       
      
      //Creating Text Filed for password        
      TextField textField2 = new TextField();  
       
      //Creating Buttons 
      Button button1 = new Button("Submit"); 
      Button button2 = new Button("Clear");  
      
      //Creating a Grid Pane 
      GridPane gridPane = new GridPane();    
      
      //Setting size for the pane  
      gridPane.setMinSize(400, 200); 
       
      //Setting the padding  
      gridPane.setPadding(new Insets(10, 10, 10, 10)); 
      
      //Setting the vertical and horizontal gaps between the columns 
      gridPane.setVgap(5); 
      gridPane.setHgap(5);       
      
      //Setting the Grid alignment 
      gridPane.setAlignment(Pos.CENTER); 
       
      //Arranging all the nodes in the grid 
      gridPane.add(text1, 0, 0); 
      gridPane.add(textField1, 1, 0); 
      gridPane.add(text2, 0, 1);       
      gridPane.add(textField2, 1, 1); 
      gridPane.add(button1, 0, 2); 
      gridPane.add(button2, 1, 2);  
      
      //Creating a scene object 
      Scene scene = new Scene(gridPane, 400, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Grid Pane Example in JavaFX"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   } 
   public static void main(String args[]){ 
      launch(args); 
   } 
}

To compile and execute the saved java file from the command prompt, use the following commands −

javac --module-path %PATH_TO_FX% --add-modules javafx.controls GridPaneExample.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls GridPaneExample

Output

On executing, the above program will generate a JavaFX window displaying a form built using GridPane layout.