In this tutorial, we will learn how to use the BorderPane layout in the JavaFX application.

Complete JavaFX tutorial at https://www.javaguides.net/p/javafx-tutorial.html.

The JavaFX BorderPane component is a layout component that lays out children in the top, left, right, bottom, and center positions. 

It is represented by javafx.scene.layout.BorderPane class. This class provides various methods like setRight(), setLeft(), setCenter(), setBottom() and setTop() which are used to set the position for the specified nodes. We need to instantiate BorderPane class to create the BorderPane layout.

JavaFX BorderPane Example

The following example places five labels into five BorderPane areas:

package com.javafx.examples.layout;

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

/**
 * This class demonstrates the usage of BorderPane layout.
 * @author RAMESH FADATARE
 *
 */
public class BorderPaneExample extends Application {

    private BorderPane root;
    private final int SIZE = 60;

    @Override
    public void start(Stage stage) {

        initUI(stage);
    }

    private void initUI(Stage stage) {

        root = new BorderPane();

        root.setTop(getTopLabel());
        root.setBottom(getBottomLabel());
        root.setLeft(getLeftLabel());
        root.setRight(getRightLabel());
        root.setCenter(getCenterLabel());

        Scene scene = new Scene(root, 350, 300);

        stage.setTitle("BorderPane");
        stage.setScene(scene);
        stage.show();
    }

    private Label getTopLabel() {

        Label lbl = new Label("Top");
        lbl.setAlignment(Pos.BASELINE_CENTER);
        lbl.setPrefHeight(SIZE);
        lbl.prefWidthProperty().bind(root.widthProperty());
        lbl.setStyle("-fx-border-style: dotted; -fx-border-width: 0 0 1 0;" +
            "-fx-border-color: gray; -fx-font-weight: bold");

        return lbl;
    }

    private Label getBottomLabel() {

        Label lbl = new Label("Bottom");
        lbl.setAlignment(Pos.BASELINE_CENTER);
        lbl.setPrefHeight(SIZE);
        lbl.prefWidthProperty().bind(root.widthProperty());
        lbl.setStyle("-fx-border-style: dotted; -fx-border-width: 1 0 0 0;" +
            "-fx-border-color: gray; -fx-font-weight: bold");

        return lbl;
    }

    private Label getLeftLabel() {

        Label lbl = new Label("Left");
        lbl.setAlignment(Pos.BASELINE_CENTER);
        lbl.setPrefWidth(SIZE);
        lbl.prefHeightProperty().bind(root.heightProperty().subtract(2 * SIZE));
        lbl.setStyle("-fx-border-style: dotted; -fx-border-width: 0 1 0 0;" +
            "-fx-border-color: gray; -fx-font-weight: bold");

        return lbl;
    }


    private Label getRightLabel() {

        Label lbl = new Label("Right");
        lbl.setAlignment(Pos.BASELINE_CENTER);
        lbl.setPrefWidth(SIZE);
        lbl.prefHeightProperty().bind(root.heightProperty().subtract(2 * SIZE));
        lbl.setStyle("-fx-border-style: dotted; -fx-border-width: 0 0 0 1;" +
            "-fx-border-color: gray; -fx-font-weight: bold");

        return lbl;
    }

    private Label getCenterLabel() {

        Label lbl = new Label("Center");
        lbl.setAlignment(Pos.BASELINE_CENTER);
        lbl.setStyle("-fx-font-weight: bold");
        lbl.prefHeightProperty().bind(root.heightProperty().subtract(2 * SIZE));
        lbl.prefWidthProperty().bind(root.widthProperty().subtract(2 * SIZE));

        return lbl;
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Let's understand the above JavaFX program.

The nodes are positioned using the setTop(), setBottom(), setLeft(), setRight(), and setCenter() methods:

root.setTop(getTopLabel());
root.setBottom(getBottomLabel());
root.setLeft(getLeftLabel());
root.setRight(getRightLabel());
root.setCenter(getCenterLabel());

Here we increase the preferred height of the top label with the setPrefHeight() method:

Label lbl = new MyLabel("Top");
lbl.setPrefHeight(SIZE);

We change the style of the label in order to see its boundaries clearly:

lbl.setStyle("-fx-border-style: dotted; -fx-border-width: 0 0 1 0;"
        + "-fx-border-color: gray; -fx-font-weight: bold");

Output

References

https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BorderPane.html.

Related JavaFX Examples

• JavaFX Hello World Example Tutorial - In this tutorial, we will learn how to create our first JavaFX application.

• Registration Form Using JavaFX with MySQL Database - In this tutorial, we will learn how to create a Registration Form using JavaFX with database connectivity. Here we will use the MySQL database to store user data via JDBC API.

• Login Form Using JavaFX with MySQL Database - In this tutorial, we will learn how to create a Login Form using JavaFX with database connectivity.

• JavaFX Quit Button Example - Terminate Application - In this tutorial, we will learn how to stop or terminate the JavaFX application.

Free Spring Boot Tutorial | Full In-depth Course | Learn Spring Boot in 10 Hours

---

Watch this course on YouTube at Spring Boot Tutorial | Fee 10 Hours Full Course