Style Properties for Layout Panes

You can use CSS to set the background, border, and padding properties for all types of layout panes. Some types of layout panes have additional properties that can be set. For example, you can set the spacing and alignment properties for HBox and VBox panes, and you can set the orientation, preferred number of rows, preferred number of columns, and other properties for tile panes. Images can be used for the background and border of a pane.

See the JavaFX CSS Reference Guide for a list of the properties that are available for each type of layout pane. Properties listed for the Region class can be used by all layout panes, which are descendents of the Region class.

Assigning a Style Sheet to the Scene

After you have your style sheet prepared, you must add the style sheet to the scene for your application. All nodes then have access to the styles defined in the style sheet. Example 3-3 shows how to add the style sheet for the Layout Sample. In this sample, the style sheet is in the same directory as the class file for the application.

Scene scene = new Scene(border);
scene.getStylesheets().add("layoutsamplecss/layoutstyles.css");

Defining a Style for Shared Properties

All layout panes have a set of basic properties that can be managed with CSS. These include properties for the background, border, padding, and shape of the pane. If you have several panes that share common styling for these properties, you can define a single style class and assign that class to each of the panes.

In the customized Layout Sample, several of the layout panes use the same background color. The .pane style class shown in Example 3-4 is used to set this color.

.pane {
    -fx-background-color: #8fbc8f;
}

If setting the background color is all that is needed for a pane, then only the .pane style needs to be assigned. If additional styling is desired, more than one style can be assigned to a pane. Example 3-5 shows just the .pane style added to an anchor pane and the .pane and .grid styles added to a grid pane.

AnchorPane anchorpane = new AnchorPane();
anchorpane.getStyleClass().add("pane");

GridPane grid = new GridPane();
grid.getStyleClass().addAll("pane","grid");

Styling the Border Pane

Border panes do not have any additional properties beyond the basic set mentioned in Defining a Style for Shared Properties. In the Layout Sample, the border pane is not styled. However, to style a border pane, define a style class and assign it to the pane in the same way that is done for other panes.

Styling the HBox Panes

In addition to the basic set of properties for all layout panes, HBox panes have properties for alignment, spacing, and fill height.

The Layout Sample shown in Figure 3-1 contains two HBox panes. The first HBox pane is at the top and contains the Current and Projected buttons. The second HBox pane is near the bottom and contains the Save and Cancel buttons.

For the customized Layout Sample, both HBox panes have the same background color and spacing. These properties are set in the style definition shown in Example 3-1.

The second HBox, which contains the Save and Cancel buttons, also has rounded corners and less padding as shown in Figure 3-2.

Figure 3-2 Styled HBox Pane

Description of "Figure 3-2 Styled HBox Pane"

To use the defined styling for HBox panes, the .hbox style is assigned to the pane. To override the padding and set the additional property for rounding the corners, the style definition shown in Example 3-6 is used and an ID is set for the second HBox pane.

#hbox-custom {
    -fx-background-radius: 5.0; 
    -fx-padding: 8;
}

Example 3-7 shows how the styles are assigned to the second HBox pane.

HBox hb = new HBox();
hb.getStyleClass().add("hbox");
hb.setId("hbox-custom");

Styling the VBox Pane

In addition to the basic set of properties for all layout panes, VBox panes have properties for alignment, spacing, and fill width.

The VBox pane in the left region of Figure 3-1 uses the background from the .pane style class. The border, padding, and spacing are set in the .vbox style class shown in Example 3-8.

.vbox {
    -fx-border-color: #2e8b57;
    -fx-border-width: 2px;
    -fx-padding: 10;
    -fx-spacing: 8;
}

Example 3-9 shows how the styles are assigned to the VBox pane.

VBox vbox = new VBox();
vbox.getStyleClass().addAll("pane", "vbox");

Styling the Stack Pane

In addition to the basic set of properties for all layout panes, stack panes have a property for alignment. In the Layout Sample, the stack pane is not styled. However, to style a stack pane, define a style class and assign it to the pane in the same way that is done for other panes.

Styling the Grid Pane

In addition to the basic set of properties for all layout panes, grid panes have properties for spacing between the rows and columns, alignment of the grid, and visibility of the grid lines.

The grid in the center region of Figure 3-1 has rounded corners and a white background that is slightly smaller than the grid itself. The .grid style class shown in Example 3-10 provides this styling and sets the properties for padding and for spacing between the rows and columns.

.grid {
    -fx-background-color: white;
    -fx-background-radius: 5.0;
    -fx-background-insets: 0.0 5.0 0.0 5.0;
    -fx-padding: 10;
    -fx-hgap: 10;
    -fx-vgap: 10;
}

Example 3-11 shows how the style is assigned to the grid.

GridPane grid = new GridPane();
grid.getStyleClass().add("grid");

Note that the grid does not have the background color that is used by other layout panes in the sample. However, the anchor pane that contains the grid uses the background color. To prevent the grid from having the background color of its parent, you must to set the background for the grid to the desired color.

Styling the Flow Pane or Tile Pane

In addition to the basic set of properties for all layout panes, flow panes have properties for alignment, orientation, and spacing between the rows and columns. Tile panes have properties for alignment, orientation, spacing between the rows and columns, preferred number of rows and columns, and preferred width and height.

In the Layout Sample, either a flow pane or a tile pane can be used for the right region of Figure 3-1. The properties set in the style class are common to both types of panes, so the same style class is used in the sample. The .flow-tile style class shown in Example 3-12 sets the properties for padding and for spacing between the rows and columns.

.flow-tile {
    -fx-padding: 10.0 3.0 5.0 0.0;
    -fx-hgap: 4;
    -fx-vgap: 4;
}

The flow pane and tile pane also use the .pane style class for the background color. Example 3-13 shows how the styles are assigned to the flow pane and tile pane.

FlowPane flow = new FlowPane();
flow.getStyleClass().addAll("pane", "flow-tile");

TilePane tile = new TilePane();
tile.getStyleClass().addAll("pane", "flow-tile");

Styling the Anchor Pane

Anchor panes do not have any additional properties beyond the basic set of properties for all layout panes.

The anchor pane in the center region of Figure 3-1 contains a grid and an HBox pane, each of which has its own styling. The only styling applied to the anchor pane is the background color set by the .pane style class shown in Example 3-4.

Example 3-14 shows how the style is assigned to the anchor pane.

AnchorPane anchorpane = new AnchorPane();
anchorpane.getStyleClass().add("pane");