Example 1-3 Create a VBox Pane

public VBox addVBox(); { VBox vbox = new VBox(); vbox.setPadding(new Insets(10)); vbox.setSpacing(8);   Text title = new Text("Data"); title.setFont(Font.font("Arial", FontWeight.BOLD, 14)); vbox.getChildren().add(title);   Hyperlink options[] = new Hyperlink[] {    new Hyperlink("Sales"),    new Hyperlink("Marketing"),    new Hyperlink("Distribution"),    new Hyperlink("Costs")};   for (int i=0; i<4; i++) {    VBox.setMargin(options[i], new Insets(0, 0, 0, 8));    vbox.getChildren().add(options[i]); }   return vbox; }

The setLeft() method in Example 1-1 adds the VBox pane to the left region of the border pane. The result is shown in Figure 1-5.

Figure 1-5 VBox Pane in a Border Pane

Description of "Figure 1-5 VBox Pane in a Border Pane"

 

StackPane

The StackPane layout pane places all of the nodes within a single stack with each new node added on top of the previous node. This layout model provides an easy way to overlay text on a shape or image or to overlap common shapes to create a complex shape. Figure 1-6 shows a help icon that is created by stacking a question mark on top of a rectangle with a gradient background.

Figure 1-6 Sample Stack Pane

Description of "Figure 1-6 Sample Stack Pane"

The alignment property can be set to manage how children are positioned in the stack pane. This property affects all children, so margins can be set to adjust the position of individual children in the stack.

Example 1-4 creates a stack pane for a help icon.

Example 1-4 Create a Stack Pane

public void addStackPane(HBox hb) { StackPane stack = new StackPane(); Rectangle helpIcon = new Rectangle(30.0, 25.0); helpIcon.setFill(new LinearGradient(0,0,0,1, true, CycleMethod.NO_CYCLE,    new Stop[]{    new Stop(0,Color.web("#4977A3")),    new Stop(0.5, Color.web("#B0C6DA")),    new Stop(1,Color.web("#9CB6CF")),})); helpIcon.setStroke(Color.web("#D0E6FA")); helpIcon.setArcHeight(3.5); helpIcon.setArcWidth(3.5);   Text helpText = new Text("?"); helpText.setFont(Font.font("Verdana", FontWeight.BOLD, 18)); helpText.setFill(Color.WHITE); helpText.setStroke(Color.web("#7080A0"));   stack.getChildren().addAll(helpIcon, helpText); stack.setAlignment(Pos.CENTER_RIGHT); // Right-justify nodes in stack StackPane.setMargin(helpText, new Insets(0, 10, 0, 0)); // Center "?"   hb.getChildren().add(stack);       // Add to HBox from Example 1-2 HBox.setHgrow(stack, Priority.ALWAYS); // Give stack any extra space }

The last lines of code in Example 1-4 add the stack pane to the HBox pane created in Example 1-2 and position it to always be at the right-most edge of the pane. The result is shown in Figure 1-7.

Figure 1-7 Stack Pane in an HBox Pane

Description of "Figure 1-7 Stack Pane in an HBox Pane"

 

GridPane

The GridPane layout pane enables you to create a flexible grid of rows and columns in which to lay out nodes. Nodes can be placed in any cell in the grid and can span cells as needed. A grid pane is useful for creating forms or any layout that is organized in rows and columns. Figure 1-8 shows a grid pane that contains an icon, title, subtitle, text and a pie chart. In this figure, the gridLinesVisible property is set to display grid lines, which show the rows and columns and the gaps between the rows and columns. This property is useful for visually debugging your GridPane layouts.

Figure 1-8 Sample Grid Pane

Description of "Figure 1-8 Sample Grid Pane"

Gap properties can be set to manage the spacing between the rows and columns. The padding property can be set to manage the distance between the nodes and the edges of the grid pane. The vertical and horizontal alignment properties can be set to manage the alignment of individual controls in a cell.

Example 1-5 creates the grid pane shown in Figure 1-8.