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;
    
    @Override
    public void start(Stage primaryStage) throws Exception
    {
        root = new BorderPane();        
        root.setTop(getMenu());
        root.setRight(getRightHBox());
        root.setBottom(getFooter());
        root.setLeft(getLeftHBox());
        root.setCenter(getCenterPane());
        
        Scene scene = new Scene(root, 900, 500);        
        primaryStage.setTitle("BorderPane Example");
        primaryStage.setScene(scene);
        primaryStage.show();    
    }
    
    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.setAlignment(Pos.CENTER);
        
        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));
        }        
        vboxText.setTranslateX(10);
        
        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.setAlignment(Pos.CENTER);
        
        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();
        stackPane.setAlignment(Pos.CENTER);
        
        Rectangle rec = new Rectangle(200, 200);
        rec.setFill(Color.DODGERBLUE);
        rec.widthProperty().bind(stackPane.widthProperty().subtract(50));
        rec.heightProperty().bind(stackPane.heightProperty().subtract(50));
        
        stackPane.getChildren().addAll(rec);
        
        return stackPane;
    }
    
    public static void main(String[] args)
    {
        Application.launch(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 two of our best selling eBooks for FREE!

JPA Mini Book

Learn how to leverage the power of JPA in order to create robust and flexible Java applications. With this Mini Book, you will get introduced to JPA and smoothly transition to more advanced concepts.

JVM Troubleshooting Guide

The Java virtual machine is really the foundation of any Java EE platform. Learn how to master it with this advanced guide!

Given email address is already subscribed, thank you!
Oops. Something went wrong. Please try again later.
Please provide a valid email address.
Thank you, your sign-up request was successful! Please check your e-mail inbox.
Please complete the CAPTCHA.
Please fill in the required fields.

3 Responses to "JavaFX 2.0 Layout Panes – BorderPane"

  1. Rajp says:

    This is great. Thanks a lot!!

  2. rajdeep singh says:

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

Leave a Reply


two + 2 =



Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy | Contact
All trademarks and registered trademarks appearing on Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.
Do you want to know how to develop your skillset and become a ...
Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

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

Get ready to Rock!
You can download the complementary eBooks using the links below:
Close