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.

Example 3-3 Adding a Style Sheet   Scene scene = new Scene(border); scene.getStylesheets().add("layoutsamplecss/layoutstyles.css");

Styling the Layout Sample

The Layout Sample has examples of the built-in layout panes that are provided by the JavaFX layout package. Styling this sample provides examples of how CSS can be used with the different layout panes.

The style sheet layoutstyles.css contains the styles used for Figure 3-1.

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.

Example 3-4.pane Style Class   .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.

Example 3-5 Assigning the.pane Style to a Layout 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.

Example 3-6 Custom HBox Style   #hbox-custom { -fx-background-radius: 5.0; -fx-padding: 8; }

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

Example 3-7 Assigning the Custom HBox Style to a 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.

Example 3-8.vbox Style Class   .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.

Example 3-9 Assigning Styles 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.

Example 3-10.grid Style Class   .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.

Example 3-11 Assigning a Style 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.