JavaFX Scene Builder User Guide

Previous
Next

9 Style Sheet Support

JavaFX Scene Builder provides Cascading Style Sheets (CSS) support, which gives you the ability to define the look and formatting to be used in the GUI layout that you build.

By using the Stylesheets list view in the Properties panel, you can assign a CSS to a selected UI element in your FXML layout if that UI element is either a container or a UI control. You can attach a style sheet to any part of your FXML layout, from the topmost parent UI element to the lowest. The left side of Figure 9-1 shows the Properties panel with the IssueTracking.css assigned to the topmost Anchor Pane. The right side of the figure shows the RoundedButton style class, which is defined in the IssueTracking.css style sheet and assigned to the New button. CSS rules that are defined on a parent element can be used to style the parent element itself and all of its child elements. You can define the specific style class to use with a UI element by adding it to the Style Class list view in the Properties panel. The CSS files referenced from the Stylesheets properties are referenced from within the FXML file and so they are deployed with the FXML file.

Figure 9-1 Properties Panel with Style Class and Style Sheet List Views Displayed

Description of Figure 9-1 follows
Description of "Figure 9-1 Properties Panel with Style Class and Style Sheet List Views Displayed"

Previous
Next