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

Figure 5-15. Reversi application highlighting the available moves for black's first turn
Highlighting the Active Cell
The simplest example of board interaction is to highlight the current cell that the user has moused over. Rather than
highlighting cells that are not playable, you can take advantage of the legalMove() function you defined in the last
section to highlight only cells that are active.
For the highlight, we are going to use a nested Region with a blue stroke to outline the cell the cursor is over.
Although we could simply add a stroke to our existing Region , creating a separate Region makes it easier to isolate the
highlight and animate it independently.
The highlight region can be quickly created as a variable in the ReversiSquare class using CSS styling and the
builder pattern shown in Listing 5-16.
Listing 5-16. Additions to the ReversiSquare create() Method to Enable Highlighting
private Region highlight = RegionBuilder.create()
.opacity(0)
.style("-fx-border-width: 3; -fx-border-color: dodgerblue")
.build();
Then to add it in to the scenegraph, you can append the following line in the constructor.
getChildren().add(highlight);
The default layout of the Region class simply sets children to their preferred size, but does not position them or
allow them to fill the content area. We want the highlight to match the size of the square, therefore we need to override
the layout algorithm and supply our own. Table 5-12 lists several additional functions of Region that allow us to
override the layout algorithm and help with sizing and positioning of child nodes.