JavaFX Layout BorderPane Example

BorderPane lays out children in top, left, right, bottom, and center positions. It can be used to create the classic looking application layouts.

BorderPane 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 Layout Example

This example places five labels into five BorderPane's 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);
    }
}

Output

Run above program will provide the below output:

Let's understand the above example in detail. 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());

References

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


Comments