JavaFX – Layout Panes


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.

JavaFX Layout Panes

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.

S.No Layouts & Description
1 HBox

The HBox layout arranges all the nodes in our application in a single horizontal row.

The class named HBox of the package javafx.scene.layout represents the text horizontal box layout.

2 VBox

The VBox layout arranges all the nodes in our application in a single vertical column.

The class named VBox of the package javafx.scene.layout represents the text Vertical box layout.

3 BorderPane

The Border Pane layout arranges the nodes in our application in top, left, right, bottom and center positions.

The class named BorderPane of the package javafx.scene.layout represents the border pane layout.

4 StackPane

The stack pane layout arranges the nodes in our application on top of another just like in a stack. The node added first is placed at the bottom of the stack and the next node is placed on top of it.

The class named StackPane of the package javafx.scene.layout represents the stack pane layout.

5 TextFlow

The Text Flow layout arranges multiple text nodes in a single flow.

The class named TextFlow of the package javafx.scene.layout represents the text flow layout.

6 AnchorPane

The Anchor pane layout anchors the nodes in our application at a particular distance from the pane.

The class named AnchorPane of the package javafx.scene.layout represents the Anchor Pane layout.

7 TilePane

The Tile Pane layout adds all the nodes of our application in the form of uniformly sized tiles.

The class named TilePane of the package javafx.scene.layout represents the TilePane layout.

8 GridPane

The Grid Pane layout arranges the nodes in our application as a grid of rows and columns. This layout comes handy while creating forms using JavaFX.

The class named GridPane of the package javafx.scene.layout represents the GridPane layout.

9 FlowPane

The flow pane layout wraps all the nodes in a flow. A horizontal flow pane wraps the elements of the pane at its height, while a vertical flow pane wraps the elements at its width.

The class named FlowPane of the package javafx.scene.layout represents the Flow Pane layout.

Advertisements

”;

Leave a Reply

Your email address will not be published. Required fields are marked *