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

Some points to highlight about Listing 5-5 include the following:

getScore and getTurnsRemaining return bindings that will automatically recalculate
their values when the turn and board state change.
The

• Both

•

getScore method uses a SimpleIntegerProperty as a bound aggregator to sum the total
number of cells belonging to the owner.

getTurnsRemainingMethod uses a conditional binding and bound arithmetic to calculate
the number of remaining turns for a given owner.

• The

Now that we have the model functions created, we can use them to build a JavaFX UI class that shows each player's
score. Because we need to create the same UI components twice, this is a good time to raise the abstraction level of the
UI by creating functions that create portions of the UI. This lets us reuse the same score box for both players.
Listing 5-6 has the first half of the code and shows how to set up a simple two-column TilePane layout that
contains the player score boxes.

Listing 5-6. First Half of Player Score Implementation

@Override
public void start(Stage primaryStage) {
TilePane tiles = new TilePane(createScore(Owner.BLACK), createScore(Owner.WHITE));
tiles.setSnapToPixel(false);
Scene scene = new Scene(tiles, 600, 120);
primaryStage.setScene(scene);
tiles.prefTileWidthProperty().bind(scene.widthProperty().divide(2));
tiles.prefTileHeightProperty().bind(scene.heightProperty());
primaryStage.show();

}

Notice that we have explicitly bound the tileWidth and tileHeight . This ensures that the tiles resize together
with the window. Also notice that we have bound against the scene's width and height rather than the tile's
dimensions. Binding against the parent's width works properly, because the bind update happens synchronously,
whereas binding against your own width and height will happen after layout is complete and produce artifacts.
For the second half, you need to use the HBox , VBox , and FlowPane classes. Table 5-5 shows a list of all the
variables available, and to which layouts they apply.

Table 5-5. List of Variables for HBox , VBox , and FlowPane

Name Type Default Found in Description

hpos HBox, VBox, FlowPane Horizontal position of the entire layout HPos HPos.LEFT

vpos HBox, VBox, FlowPane Vertical position of the entire layout

VPos VPos.TOP

nodeHPos HPos HPos.LEFT, HPos.CENTER VBox, FlowPane Default horizontal alignment of nodes

nodeVPos VPos HPos.TOP, HPos.CENTER HBox, FlowPane Default vertical alignment of nodes

spacing HBox, VBox Number 0 Space between nodes in the direction

of layout

hgap FlowPane

Number 0 Horizontal gap between the rows

vgap FlowPane Number 0 Vertical gap between the columns

vertical Boolean FlowPane True if this FlowPane runs top-to-

bottom, false for left-to-right

false