Create User Interfaces - JavaFX: Developing Rich Internet Applications - page 110

content: [
Rectangle {
width: 50
height: 20
fill: Color.NAVY
stroke: Color.YELLOW
},
...
...

VBox is shown in Figure 5.9.

Figure 5.9 VBox Layout

Notice that these two layouts are quite simple. Other than specifying the spacing
between the nodes, there is not much else you can do with these layouts. Also
notice that the HBox layout justifies the nodes at the top, or North position,
whereas VBox aligns the nodes on the left position. You have no control over this.

To get a little more interesting, let's combine the two layouts. First, we create a
VBox that contains a set of HBox es , each using the same set of colored rectangles.
This is presented in Listing 5.16.

Listing 5.16 Combined Box Layouts

scene: Scene {
content: VBox {
spacing: 10
content: [
HBox {
spacing: 20
content: [
Rectangle {
width: 50
height: 20
fill: Color.NAVY
stroke: Color.YELLOW
},