JavaFx BorderPane Example

Author:

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

Comments

Post a Comment

Leave Comment