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

Table 5-11. Layout Functions of the Region Class

Name Access Returns Description

layoutChildren()

Protected Void Method that is called to perform layout on the child nodes.

Can be overridden to supply a custom algorithm.

layoutInArea(node, x, y,
width, height, baseline,
halign, valign)

Protected Void Helper method that will position the given Node at the

specified coordinates and scale resizable nodes to fit the
given width and height. If the node is resizable or the node's
maximum dimensions prevent it from being resized, it will
be positioned according to the given baseline, halign , and
valign .

layoutInArea(node, x, y,
width, height, baseline,
margin, halign, valign)

Protected Void Same as the previous layoutInArea method, except that the

given margin will be applied to the edges of the node.

layoutInArea(node, x, y,
width, height, baseline,
margin, fillWidth,
fillHeight, halign, valign)

Protected Void Same as the previous layoutInArea method, except that if

fillWidth or fillHeight are set to false, the node will only
scale up to the preferred width or height, respectively.

layoutInArea(node, x, y,
width, height, baseline,
margin, fillWidth,
fillHeight, halign,
valign, isSnapToPixel)

Public Void Utility method that lays out the child within an area of its

parent defined by areaX,areaY, areaWidth x areaHeight ,
with a baseline offset relative to that area.

To make sure the size and position of the contained region match the parent, we are going to override the
layoutChildren method and supply our own algorithm. The first variant of the layoutInArea helper method allows
us to position and scale in one shot, which is ideal for our use case:

@Override
protected void layoutChildren() {
layoutInArea(highlight, 0, 0, getWidth(), getHeight(), getBaselineOffset(), HPos.CENTER, VPos.CENTER);
}

To create the animation highlight, we make use of a FadeTransition that animates the opacity of the highlight
created in Listing 5-16 from 0.0 to 1.0. This is used to produce a fade-in effect when the user mouses over the Node and
a fade-out effect when the user mouses out. The following code shows the FadeTransition to accomplish this.

private FadeTransition highlightTransition = FadeTransitionBuilder.create()
.node(highlight)
.duration(Duration.millis(200))
.fromValue(0)
.toValue(1)
.build();