What does BorderPane do in JavaFX?

This is a tutorial on the JavaFX BorderPane layout.

The JavaFX BorderPane layout is unique because unlike the (most) others it has pre-defined locations for where the components are to be set. Your 5 choices are the Top, Bottom, Center, Left and Right.

The slight disadvantage here is that you only get 5 slots in total to place your components. However, a smart way to get around this is create another layout manager (Like HBox), insert multiple components into it and then insert the layout manager into the BorderPane layout. This way it will only count as one.

JavaFX BorderPane Example

An image describing the BorderPane layout from the documentation.

What does BorderPane do in JavaFX?

Passing a single child component into the BorderPane class will automatically center it. When you pass all 5 components (or nodes), they get set in the following order, center, top, right, bottom and left.

Alternatively , you can set each component into the layout individually using the following 5 methods.

  • setBottom(node)
  • setCenter(node)
  • setLeft(node)
  • setRight(node)
  • setTop(node)

package application; import javafx.application.Application; import javafx.geometry.Insets; import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.control.Label; import javafx.scene.layout.BorderPane; public class Tutorial extends Application { public static void main(String args[]){ launch(args); } @Override public void start(Stage primaryStage) throws Exception { Label label1 = new Label("This is the Center section"); Label label2 = new Label("This is the Top-most section"); Label label3 = new Label("This is the Right section"); Label label4 = new Label("This is the Bottom section"); Label label5 = new Label("This is the Left section"); BorderPane layout = new BorderPane(label1, label2, label3, label4, label5); layout.setPadding(new Insets(20, 20, 20, 20)); Scene scene = new Scene(layout, 500, 300); primaryStage.setTitle("CodersLegacy"); primaryStage.setScene(scene); primaryStage.show(); } }

The GUI output of the above example:

What does BorderPane do in JavaFX?

Both the Top and Bottom section labels appear to be in the left column because by default, they are left-aligned. You can change this using the setAlignment(Node, Pos) method though.

BorderPane Alignment and Position

A small section focused alignment and positions.

Adding these four lines to our code will center all the labels in their respective sections. We don’t need to try to center the center-section label.

layout.setAlignment(label2, Pos.CENTER); layout.setAlignment(label3, Pos.CENTER); layout.setAlignment(label4, Pos.CENTER); layout.setAlignment(label5, Pos.CENTER);

The output:

What does BorderPane do in JavaFX?

Using the following 5 methods, you can return the component/node at the section of your choice.

  • getCenter()
  • getTop()
  • getRight()
  • getBottom()
  • getLeft()

Be sure to take a look at the other amazing layout managers in JavaFX:

This marks the end of the JavaFX BorderPane layout tutorial. Any suggestions or contributions for CodersLegacy are more than welcome. Questions regarding the article content can be asked in the comments section below.

The BorderPane layouts child nodes in a top, bottom, left, right, or center region. Each region can only have one node.

A BorderPane's top and bottom region allows a resizable node to take up all of the available width.

The left and right border regions take up the available vertical space between the top and bottom borders.

All of the bordering regions honor the children's preferred width and height by default.

The default alignment of nodes when placed in the top, bottom, left, right, and center regions is as follows:

  • Top: Pos.TOP_LEFT
  • Bottom: Pos.BOTTOM_LEFT
  • Left: Pos.TOP_LEFT
  • Right: Pos.TOP_RIGHT
  • Center: Pos.CENTER

Example

Add Button to BorderPane

import javafx.application.Application; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.BorderPane; import javafx.stage.Stage; /*from w ww .ja va2 s . com*/ public class Main extends Application { public static void main(String[] args) { Application.launch(args); } @Override public void start(Stage primaryStage) { primaryStage.setTitle("BorderPane Test"); BorderPane bp = new BorderPane(); bp.setPadding(new Insets(10, 20, 10, 20)); Button btnTop = new Button("Top"); bp.setTop(btnTop); Button btnLeft = new Button("Left"); bp.setLeft(btnLeft); Button btnCenter = new Button("Center"); bp.setCenter(btnCenter); Button btnRight = new Button("Right"); bp.setRight(btnRight); Button btnBottom = new Button("Bottom"); bp.setBottom(btnBottom); Scene scene = new Scene(bp, 300, 200); primaryStage.setScene(scene); primaryStage.show(); } }

The code above generates the following result.


Example 2

Bind BorderPane width and height with Scene

import javafx.application.Application; import javafx.event.ActionEvent; import javafx.event.EventHandler; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.control.Menu; import javafx.scene.control.MenuBar; import javafx.scene.control.MenuItem; import javafx.scene.layout.BorderPane; import javafx.scene.paint.Color; import javafx.stage.Stage; /*from ww w .j a v a 2 s . c o m*/ public class Main extends Application { public static void main(String[] args) { Application.launch(args); } @Override public void start(Stage primaryStage) { primaryStage.setTitle("Title"); Group root = new Group(); Scene scene = new Scene(root, 400, 250, Color.WHITE); MenuBar menuBar = new MenuBar(); EventHandler<ActionEvent> action = changeTabPlacement(); Menu menu = new Menu("Direction"); MenuItem left = new MenuItem("Left"); left.setOnAction(action); menu.getItems().add(left); MenuItem right = new MenuItem("Right"); right.setOnAction(action); menu.getItems().add(right); MenuItem top = new MenuItem("Top"); top.setOnAction(action); menu.getItems().add(top); MenuItem bottom = new MenuItem("Bottom"); bottom.setOnAction(action); menu.getItems().add(bottom); menuBar.getMenus().add(menu); BorderPane borderPane = new BorderPane(); borderPane.prefHeightProperty().bind(scene.heightProperty()); borderPane.prefWidthProperty().bind(scene.widthProperty()); borderPane.setTop(menuBar); root.getChildren().add(borderPane); primaryStage.setScene(scene); primaryStage.show(); } private EventHandler<ActionEvent> changeTabPlacement() { return new EventHandler<ActionEvent>() { public void handle(ActionEvent event) { MenuItem mItem = (MenuItem) event.getSource(); String side = mItem.getText(); if ("left".equalsIgnoreCase(side)) { System.out.println("left"); } else if ("right".equalsIgnoreCase(side)) { System.out.println("right"); } else if ("top".equalsIgnoreCase(side)) { System.out.println("top"); } else if ("bottom".equalsIgnoreCase(side)) { System.out.println("bottom"); } } }; } }

The code above generates the following result.