Home » Java » Desktop Java » JavaFX 2.0 Layout Panes – BorderPane

About Sebastian Damm

JavaFX 2.0 Layout Panes – BorderPane

A BorderPane is very well suited to develop more complex layouts. In general the BorderPane provides five different regions: Top, Right, Bottom, Left and Center. You can set a Node to each of these areas by calling the setTop/setBottom/set… methods. This approach makes it very easy to develop “website-like” application windows where you have a menubar or toolbar at the top, a navigation on the left, some kind of footer at the bottom, your main content in the center area and possibly some additional information at the right.

It is important to know, that each of these areas resizes differently:

  • The top and bottom areas will resize to their children preferred height and take all space available for their width.
  • The left and right areas will resize to their children preferred width and take all space available for their height.
  • The center area takes all space available for its height and its width.

Following graphic demonstrates the behavior of a BorderPane when resizing your application window:

Source: own illustration

BorderPane – Example

 * Created on: 29.03.2012
 * @author Sebastian Damm
public class BorderPaneExample extends Application
    private BorderPane root;
    public void start(Stage primaryStage) throws Exception
        root = new BorderPane();        
        Scene scene = new Scene(root, 900, 500);        
        primaryStage.setTitle("BorderPane Example");
    private MenuBar getMenu()
        MenuBar menuBar = new MenuBar();
        Menu menuFile = new Menu("File");                
        Menu menuEdit = new Menu("Edit");
        Menu menuHelp = new Menu("Help");        
        menuBar.getMenus().addAll(menuFile, menuEdit, menuHelp);
        return menuBar;
    private HBox getRightHBox()
        HBox hbox = new HBox();
        VBox vbox = new VBox(50);
        vbox.setPadding(new Insets(0, 20, 0, 20));
        vbox.getChildren().addAll(new Text("Additional Info 1"), 
                new Text("Additional Info 2"), new Text("Additional Info 3"));    
        hbox.getChildren().addAll(new Separator(Orientation.VERTICAL), vbox);     

        return hbox;
    private HBox getLeftHBox()
        HBox hbox = new HBox();
        VBox vbox = new VBox(10);
        vbox.setPadding(new Insets(10));
        Text text = new Text("Navigation");
        text.setFont(Font.font("Helvetica", FontWeight.BOLD, 20));
        VBox vboxText = new VBox(10);
        for (int i = 1; i >= 10; i++)
            vboxText.getChildren().add(new Text("Category " + i));
        vbox.getChildren().addAll(text, vboxText);        
        hbox.getChildren().addAll(vbox, new Separator(Orientation.VERTICAL));
        return hbox;
    private VBox getFooter()
        VBox vbox = new VBox();
        HBox hbox = new HBox(20);
        hbox.setPadding(new Insets(5));
        hbox.getChildren().addAll(new Text("Footer Item 1")
                , new Text("Footer Item 2"), new Text("Footer Item 3"));        
        vbox.getChildren().addAll(new Separator(), hbox);
        return vbox;
    private StackPane getCenterPane()
        StackPane stackPane = new StackPane();
        Rectangle rec = new Rectangle(200, 200);
        return stackPane;
    public static void main(String[] args)

This little application shows how to use a BorderPane. In the start method we only use the various set… methods of the BorderPane class in order to populate each area with a Node.

The top area is filled with a MenuBar. Here I simply create a MenuBar with three different Menus. In one of my next posts I will cover the creation of menus in JavaFX in depth.

Besides the menu there should only be one aspect of the code, that may be new to you. Please take a look at line 100:

The center area of our BorderPane is populated with a StackPane that holds a Rectangle. Because a Rectangle doesn´t resize directly with its parent (like all Shape objects), we have to go for a different approach when we want to resize the Rectangle. This is why I binded the width and the height of the Rectangle to the width and the height of the StackPane (substracted by 50 pixels). When the size of the StackPanes is changed, the Rectangle will automatically be resized accordingly.

Here are three pictures of how your application should look like and how it should resize:

As you can see the different areas of the BorderPane resize accordingly to the rules I illustrated at the top of this post.

Reference: JavaFX 2.0 Layout Panes – BorderPane from our JCG partner Sebastian Damm at the Just my 2 cents about Java blog.

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

1. JPA Mini Book

2. JVM Troubleshooting Guide

3. JUnit Tutorial for Unit Testing

4. Java Annotations Tutorial

5. Java Interview Questions

6. Spring Interview Questions

7. Android UI Design

and many more ....


  1. This is great. Thanks a lot!!

  2. please remove the numbers in left side.it takes too time to remove from code.but program is nice.

Leave a Reply

Your email address will not be published. Required fields are marked *


× 7 = seven

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Do you want to know how to develop your skillset and become a ...

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!
Get ready to Rock!
To download the books, please verify your email address by following the instructions found on the email we just sent you.