Building Dynamic UI Layouts in JavaFX - JavaFX 8: A Definitive Guide to Building Desktop, Mobile, and Embedded Java Clients - page 201

Table 5-6. Properties Available in the BorderPanel Class

Name Type Description

top Node Element placed at the top edge of the BorderPane area; will be resized to its preferred

height and extended to fill the full width

bottom Node Element placed at the bottom edge of the BorderPane area; will be resized to its

preferred height and extended to fill the full width

left Node Element placed at the left edge of the BorderPane area; will be resized to its preferred

width and extended to fill the full height between the top and bottom nodes

right Node Element placed at the right edge of the BorderPane area; will be resized to its

preferred width and extended to fill the full height between the top and bottom nodes

center Node Element placed in the center of the BorderPane area; will be extended to fill the full

space between the top, bottom, right, and left nodes

The BorderPane 's top and bottom areas get positioned first, followed by the left and right, which can extend up to
the height minus the top and bottom. Finally the center resizes to take any remaining space in the layout.
For our use in the Reversi application, we require only the top, center, and bottom content areas. The layout code
to set up the BorderPane with these three content areas is shown in Listing 5-8.

Listing 5-8. Reversi Root Stage Declaration Using a BorderPane for Layout
@Override
public void start(Stage primaryStage) {
BorderPane root = new BorderPane();
root.setCenter(createBackground());
root.setTop(createTitle());
root.setBottom(createScoreBoxes());
Scene scene = new Scene(root, 600, 400);
primaryStage.setScene(scene);
primaryStage.show();
}

We are using this to create a dock-like behavior where the title is aligned to the top with a fixed height and the
score boxes are aligned to the bottom, also with a fixed height. All remaining space in the center is occupied by the
grid. This could also have been done using bind expressions, but using a BorderPane guarantees that the layout
function will be called once per layout cycle, yielding higher performance and artifact-free layout.
Listing 5-9 shows a simple abstraction of a createScoreBoxes() function from the section “Using FlowPane and
Boxes for Directional Alignment,” earlier in this chapter. Notice that the tileWidth is dynamically bound to the parent
width using the Bindings.selectDouble() function, which breaks the dependency on the scene.

Listing 5-9. Create Score Boxes Function

private Node createScoreBoxes() {
TilePane scoreTiles = new TilePane(createScore(Owner.BLACK), createScore(Owner.WHITE));
scoreTiles.setSnapToPixel(false);
scoreTiles.setPrefColumns(2);
scoreTiles.prefTileWidthProperty().bind(Bindings.selectDouble(tiles.parentProperty(),
"width").divide(2));
return scoreTiles;
}