Updated March 18, 2023
Introduction to JavaFX GridPane
JavaFX GridPane is a container that lays out its children in a grid. There are certain rules on the size of cells in GridPane. That is, in a row, all cells will be having the same height whereas, in a column, all cells will have the same width. Java GridPane can be instantiated from the class javafx.scene.layout.GridPane. The count of columns and rows in this pane will be determined by the components that are added to it. Now, let us see the syntax of GridPane.
Syntax of JavaFX GridPane
The syntax of GridPane is as shown below.
GridPane gp = new GridPane();Constructor
Constructor for JavaFX GridPane is as follows:
- GridPane(): A GridPane layout will be created with TOP_LEFT alignment and an hgap or vgap equal to 0.
Properties of JavaFX GridPane
Java GridPane has several properties. They are :
- alignment: Grid alignment within the pane’s height and width.
- hgap: The horizontal gap width between the columns.
- vgap: Vertical gap height between the rows.
- gridLinesVisible: This property is mainly used for debugging purposes. That is, it controls whether lines are shown in order to show the rows and columns of Gridpane.
Methods of JavaFX GridPane
Java GridPane has several methods that perform different functionalities.
Some of the commonly used methods are explained below.
- clearConstraints(Nodechild): GridPane constraints will be removed from the child node.
- computeMinWidth(double height): The minimum width of the region will be computed using this method.
- computeMinHeight(double width): The minimum height of the region will be computed using this method.
- getAlignment(): alignment property’s value will be returned.
- setAlignment(Posvalue): alignment property’s value will be set.
- getMargin(Nodechild): margin constraints value will be returned.
- computePrefWidth(double height): The preferred width for the region that is needed for the given height will be computed.
- computePrefHeight(double width): The preferred height for the region that is needed for the given width will be computed.
Examples to Implement JavaFX GridPane
Now, let us see different JavaFX programs.
Example #1
Java program to demonstrate grid pane
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
public class JavaFXGridPaneExample extends Application {
//application starts at this point
@Override
public void start(Stage s) throws Exception {
//create label 1
Label lbl1=new Label("Name of the Guardian");
//create label 2
Label lbl2=new Label("Your name (IN CAPITALS ) ");
//create textfield 1
TextField t1=new TextField();
//create textfield 2
TextField t2=new TextField();
//create a button
Button b=new Button ("Click me ! !");
//create gridpane
GridPane gp=new GridPane();
//create scene
Scene sc = new Scene(gp,500,300);
//first row
gp.addRow(0, lbl1,t1);
//second row
gp.addRow(1, lbl2,t2);
//third row
gp.addRow(2, b);
//set scene
s.setScene(sc);
//display result
s.show();
}
//main method
public static void main(String[] args) {
launch(args);
}
}Output
Two text fields with 2 labels and a button are displayed on executing the code. These text fields and buttons are on different rows.
Example #2
Java program to demonstrate grid pane with rows and columns
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;
//class that extends application class
public class JavaFXGridPaneExample extends Application {
//application starts at this point
@Override
public void start(Stage s) throws Exception {
//set title
s.setTitle("GridPane Example");
//create buttons
Button b1 = new Button("This is Button A");
Button b2 = new Button("This is Button B");
Button b3 = new Button("This is Button C");
Button b4 = new Button("This is Button D");
Button b5 = new Button("This is Button E");
Button b6 = new Button("This is Button F");
//create grid pane
GridPane gp = new GridPane();
//add rows and columns to the pane
gp.add(b1, 0, 0, 1, 1);
gp.add(b4, 0, 1, 1, 1);
gp.add(b2, 2, 0, 1, 1);
gp.add(b6, 1, 1, 1, 1);
gp.add(b3, 1, 0, 1, 1);
gp.add(b5, 2, 1, 1, 1);
//create scene
Scene sc = new Scene(gp, 700, 100);
//set scene
s.setScene(sc);
//display the result
s.show();
}
//main method
public static void main(String[] args) {
Application.launch(args);
}
}Output
A grid pane is created with 6 buttons in a 3×3 matrix form is created. 3×3 matrix form means 6 buttons are placed in 3 rows and 3 columns.
Example #3
Java program to demonstrate grid pane
import java.awt.Color;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
//class that extends Application class
public class JavaFXGridPaneExample extends Application {
//application starts at this point
@Override
public void start(Stage s) throws Exception {
//create label 1
Label lbl1=new Label("Name of the Guardian");
//create label 2
Label lbl2=new Label("Your name (IN CAPITALS ) ");
//create textfield 1
TextField t1=new TextField();
//create textfield 2
TextField t2=new TextField();
//create a button
Button b=new Button ("Click me ! !");
//create gridpane
GridPane gp=new GridPane();
//create hbox
HBox hb = new HBox(10);
//set alignment for hbox
hb.setAlignment(Pos.BOTTOM_RIGHT);
//add the children
hb.getChildren().add(b);
gp.add(hb, 1, 4);
//create text
final Text actn = new Text();
gp.add(actn, 1, 6);
//on clicking the button
b.setOnAction(new EventHandler<ActionEvent>() {
//event that has to be triggered
@Override
public void handle(ActionEvent ev) {
//display text when the button is clicked
actn.setText("Click me button pressed");
}
});
//create scene
Scene sc = new Scene(gp,500,300);
//first row
gp.addRow(0, lbl1,t1);
//second row
gp.addRow(1, lbl2,t2);
//third row
gp.addRow(2, b);
//set scene
s.setScene(sc);
//display result
s.show();
}
//main method
public static void main(String[] args) {
launch(args);
}
}Output
A dialog box appears will appear with 2 text fields, 1 button, and two labels.
Unlike the above programs, an event handler is present to handle action on clicking the button on the third row.
It can be seen that on clicking the button, a text is displayed that the button is pressed.
Conclusion
In JavaFX, GridPane lays out the children in a grid form where the number of columns and rows will be decided by the number of components added in it. In order to use this pane, instantiate from the class javafx.scene.layout.GridPane. More details on Grid Pane is discussed in this document in detail.
Recommended Articles
This is a guide to JavaFX GridPane. Here we discuss the Constructor, Methods, and Program to implement JavaFX GridPane. You may also look at the following articles to learn more –
