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.

Related Whitepaper:

Java Essential Training

Author David Gassner explores Java SE (Standard Edition), the language used to build mobile apps for Android devices, enterprise server applications, and more!

The course demonstrates how to install both Java and the Eclipse IDE and dives into the particulars of programming. The course also explains the fundamentals of Java, from creating simple variables, assigning values, and declaring methods to working with strings, arrays, and subclasses; reading and writing to text files; and implementing object oriented programming concepts. Exercise files are included with the course.

Get it Now!  

One Response to "JavaFX 2.0 Layout Panes – BorderPane"

  1. Rajp says:

    This is great. Thanks a lot!!

Leave a Reply


four × 4 =



Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy
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.

Sign up for our Newsletter

20,709 insiders are already enjoying weekly updates and complimentary whitepapers! Join them now to gain exclusive access to the latest news in the Java world, as well as insights about Android, Scala, Groovy and other related technologies.

As an extra bonus, by joining you will get our brand new e-books, published by Java Code Geeks and their JCG partners for your reading pleasure! Enter your info and stay on top of things,

  • Fresh trends
  • Cases and examples
  • Research and insights
  • Two complimentary e-books