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

Take a look at this example:

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();
        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.