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

Implementing createTitle is a similar modification of the Scene definition from the earlier section “Aligning to
Edges Using StackPanes and TilePanes .” In this case we have also increased the preferred height of the title to give it a
little padding around the text. The additional changes required are highlighted in bold in Listing 5-10.
Listing 5-10. Changes Required to the Title Creation Code to Turn It into a Function
private Node createTitle() {
StackPane left = new StackPane();
left.setStyle("-fx-background-color: black");
Text text = new Text("JavaFX");
text.setFont(Font.font(null, FontWeight.BOLD, 18));
text.setFill(Color.WHITE);
StackPane.setAlignment(text, Pos.CENTER_RIGHT);
left.getChildren().add(text);
Text right = new Text("Reversi");
right.setFont(Font.font(null, FontWeight.BOLD, 18));
titleTiles = new TilePane();
titleTiles.setSnapToPixel(false);
TilePane.setAlignment(right, Pos.CENTER_LEFT);
titleTiles.getChildren().addAll(left, right);
titleTiles.setPrefTileHeight(40);
titleTiles.prefTileWidthProperty().bind(Bindings.selectDouble(tiles.parentProperty(),
"width").divide(2));
return titleTiles;
}
The final task is to create the board background by implementing createBackground() . In the “Laying Out the
Tiles Using a GridPane” section later in this chapter, we show you how to use a GridPane to implement the Reversi
board, but for now you can simply create a Region and fill it with a RadialGradient. RadialGradients are very
similar to the LinearGradients you have created in past exercises, but will render the colors in an ellipse from the
center outward. Because we are using the Region to create the background, we need to configure the RadialGradient
using the style property, as shown in Listing 5-11.
Listing 5-11. Bound Function to Create the Reversi Board Background
private Node createBackground() {
Region answer = new Region();
answer.setStyle("-fx-background-color: radial-gradient(radius 100%, white, gray)");
return answer;
}
When you run the complete program, you should see a window that looks like Figure 5-9 .