Layout Panes

As we've seen before, layout panes are JavaFX's way of organizing the various GUI elements of your application inside the window. For example, we've used HBox to arrange elements beside each other, and BorderPane to organize elements in specific areas of the window. We will be focusing on four layout panes:

We'll look at each of these panes individually, but there are a few aspects of layout panes we need to examine first.

The javafx.geometry.Pos enumeration

Pos allows us to set the alignment of Nodes within HBoxes and VBoxes. It is an enumeration, which is an ordered set of constants. You may remember the enum declaration from C, like so:

typedef enum {
    HEARTS,
    DIAMONDS,
    CLUBS,
    SPADES
} CARD_SUIT;

Java enumerations work very much the same way:

public enum CARD_SUIT {
    HEARTS, DIAMONDS, CLUBS, SPADES
}

CARD_SUIT suit = HEARTS;

They provide an easy interface to define types that are useful for categorization (like the suit of a playing card), but don't really need any data or methods defined on them. Additionally, they can be used to programmatically define a set of options, both those selected by a user or used only internally. Pos defines various alignments within a layout pane, which fits both definitions!

javafx.geometry.Insets

Let's see what this code produces:

import javafx.application.*;
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.layout.*;

public class BadDesign extends Application
{
    private static void main(String[] args) 
    {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage)
    {
        // Making three buttons
        Button btn1 = new Button();
        btn1.setText("Button 1");
        Button btn2 = new Button();
        btn2.setText("Button 2");
        Button btn3 = new Button();
        btn3.setText("Button 3");

        // We want an HBox with 10 pixels between the buttons!
        // It will look great!
        HBox hbox = new HBox(10, btn1, btn2, btn3);

        Scene scene = new Scene(hbox);

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

It's alright, but really want we want in addition is 10px of spacing around the entirety of each button. To do so, we can use the Insets class to set the padding of the layout pane, or the spacing between the edges of the pane (in this case an HBox), and the elements inside.

We can create Insets in two ways:

// For uniform padding
hbox.setPadding(new Insets(10));

// To set the padding for each edge
// The order is Top/Right/Bottom/Left. To remember this, I use the mnemonic:
// TRouBLe
hbox.setPadding(new Insets(20, 10, 20, 10));

If we update our code from before:

import javafx.application.*;
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.geometry.*;

public class BetterDesign extends Application
{
    private static void main(String[] args) 
    {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage)
    {
        // Making three buttons
        Button btn1 = new Button();
        btn1.setText("Button 1");
        Button btn2 = new Button();
        btn2.setText("Button 2");
        Button btn3 = new Button();
        btn3.setText("Button 3");

        // We want an HBox with 10 pixels between the buttons!
        // It will look great!
        HBox hbox = new HBox(10, btn1, btn2, btn3);
        hbox.setPadding(new Insets(10));

        Scene scene = new Scene(hbox);

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

That's looking better! If we wanted, we could also use Insets to set a margin around an individual element, like this:

hbox.setMargin(btn1, new Insets(10));

javafx.scene.control.Region and javafx.scene.layout.Priority

Region allows us to create empty spaces in our application between elements. Let's say we wanted an application with three buttons, but we wanted two on the left side of the window, and the third on the right. By placing a Region element between the second and third buttons, and configuring it to grow to fill extra space, we can in essence model this behavior.

The Priority enumeration is used to configure a node to grow to fill available space, either with HBox's setHgrow() or VBox's setVgrow() methods. By default, elements are configured to Priority.NEVER, or never to grow to fill available space. There are two more options used:

import javafx.application.*;
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.geometry.*;

public class FloatingButtons extends Application
{
    public static void main(String[] args)
    {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage)
    {
        // Create the buttons
        Button btn1 = new Button();
        btn1.setText("Button 1");
        Button btn2 = new Button();
        btn2.setText("Button 2");
        Button btn3 = new Button();
        btn3.setText("Button 3");

        // Create the spacer
        Region spcr = new Region();

        // Create the layout pane
        HBox hbox = new HBox(10, btn1, btn2, spcr, btn3);

        // Set margins around the buttons, since we only want extra space 
        // around them, not the spacer
        hbox.setMargin(btn1, new Insets(10));
        hbox.setMargin(btn2, new Insets(10));
        hbox.setMargin(btn3, new Insets(10));

        // Set the spacer to always grow horizontally.
        hbox.setHgrow(spcr, Priority.ALWAYS);

        Scene scene = new Scene(hbox);

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

BorderPane

import javafx.application.*;
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.geometry.*;

public class BorderPaneExample extends Application
{
    // We'll show where all of the panes show up.
    private static Button topBtn;
    private static Button leftBtn;
    private static Button ctrBtn;
    private static Button rightBtn;
    private static Button btmBtn;

    public static void main(String[] args)
    {
        launch(args);
    }
    
    @Override
    public void start(Stage primaryStage)
    {
        topBtn = new Button("Top Button");
        leftBtn = new Button("Left Button");
        ctrBtn = new Button("Center Button");
        rightBtn = new Button("Right Button");
        btmBtn = new Button("Bottom Button");

        BorderPane pane = new BorderPane(ctrBtn, topBtn, rightBtn, btmBtn, leftBtn);
        Scene scene = new Scene(pane);

        primaryStage.setScene(scene);
        primaryStage.setTitle("BorderPane Example");
        primaryStage.show();
    }
}

javafx.scene.layout.FlowPane

FlowPanes, whether in their horizontal or vertical flavors, arrange elements beside each other in a row or column until a specified width/height, then wraps around to the next row/column.

javafx.scene.layout.HBox

HBoxes arrange elements horizontally next to each other. Whenever you want a definite row, without wrapping, you should use an HBox.

javafx.scene.layout.VBox

VBoxes arrange vertically on top of each other. You should use a VBox to position elements you want in a column.