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

Listing 5-14. Changes to the Reversi Application to Overlay a List of Tiles (Highlighted in Bold)
@Override
public void start(Stage primaryStage) {
BorderPane borderPane = new BorderPane();
borderPane.setTop(createTitle());
borderPane.setCenter(new StackPane(createBackground(), tiles());
borderPane.setBottom(createScoreBoxes());
Scene scene = new Scene(borderPane, 600, 400);
primaryStage.setScene(scene);
primaryStage.show();
}
The implementation of the tiles method is a direct application of what we have learned about the GridPane
layout. We simply create a new GridPane using the default constructor, and then go in a couple of loops across
columns and then rows to populate each of the game cells as shown in Listing 5-15.
Listing 5-15. Implementation of the Tiles Method Using a GridPane
private Node tiles() {
GridPane board = new GridPane();
for (int i = 0; i < ReversiModel.BOARD_SIZE; i++) {
for (int j = 0; j < ReversiModel.BOARD_SIZE; j++) {
ReversiSquare square = new ReversiSquare();
ReversiPiece piece = new ReversiPiece();
piece.ownerProperty().bind(model.board[i][j]);
board.add(new StackPane(square, piece), i, j);
}
}
return board;
}
Notice that we are using the GridPane add method that takes a node first, and then the x, y coordinates second
for convenience. Also, we are making use of a nested StackPane to hold the ReversiSquare on the bottom and the
ReversiPiece on top.
The single binding from model.board to each playing piece is all that is needed to have the UI reflect the current
board state and update whenever the model is changed. With these simple changes, the Reversi application shows us
our starting position with two black and two white pieces played, as shown in Figure 5-12 .