JavaFX - Layout Panes(Containers)

After constructing all the required nodes in a scene, we generally arrange them in the desired order. The container in which we arrange the components is called the Layout of the container. We can also say that we followed a layout as it helps in placing all the components at a particular position within the container. Below is a diagram illustrating the positioning of JavaFX nodes in vertical and horizontal layout.

In this tutorial, we are going to discuss various predefined layouts provided by JavaFX including HBox, VBox, Border Pane, Stack Pane, Text Flow, Anchor Pane, Title Pane, Grid Pane, Flow Panel, and so on. Each of the above mentioned layout is represented by a class and all these classes belongs to the package named javafx.layout. The class named Pane is the base class of all the layouts in JavaFX.

Creating a Layout

To create a layout, we need to follow the given steps −

• Create node.
• Instantiate the respective class of the required layout.
• Set the properties of the layout.
• Add all the created nodes to the layout.

Creating Nodes

First of all, create the required nodes of the JavaFX application by instantiating their respective classes. For example, if we want to have a text field and two buttons namely, play and stop in a HBox layout, we will have to initially create those nodes as shown in the following code block −

//Creating a text field 
TextField textField = new TextField();       

//Creating the play button 
Button playButton = new Button("Play");       

//Creating the stop button 
Button stopButton = new Button("stop");

Instantiating the Respective Class

After creating the nodes (and completing all the operations on them), instantiate the class of the required layout. For example, if we want to create a Hbox layout, we need to instantiate this class as follows −

HBox hbox = new HBox();

Setting the Properties of the Layout

After instantiating the class, we need to set the properties of the layout using their respective setter methods. For instance − If we want to set space between the created nodes in the HBox layout, then we need to set value to the property named spacing. This can be done by using the setter method setSpacing() as shown below −

hbox.setSpacing(10);

Adding the node Objects to the Layout Pane

Finally, we need to add the objects of the created nodes to the layout pane by passing them as a parameter value as shown below −

//Creating a Group object  
hbox.getChildren().addAll(textField, playButton, stopButton);

Layout Panes in JavaFX

Following are the various Layout panes (classes) provided by JavaFX. These classes exist in the package javafx.scene.layout.