9 Use a Style Sheet and Preview the UI
This chapter describes how you can use the JavaFX Scene Builder to preview the FXML layout that you just created and also how to apply a style sheet to customize the look and feel of the IssueTrackingLite application.
Use the following sections to preview the GUI layout that you have created and then change its look and feel by using a style sheet.
Preview the UI
Use the following steps to preview the GUI work that you have done so far:
From the Menu bar, select Preview, and then select Show Preview in Window.
Resize the window multiple times to ensure that the buttons in the toolbar and the text area resize appropriately when the window is resized. You can also make modification to the layout and the Preview window is updated
To stop viewing the preview, close the Preview window.
Use a Style Sheet
You can customize the look and feel of your GUI by applying style sheets. For this tutorial, you use a style sheet file that has been provided with the IssueTrackingLite sample.
Verify that the Cascading Style Sheet (CSS) resource file that is bundled with the IssueTrackingLite sample is already set. In the Hierarchy panel, select the root VBox container. Click the Properties section of the Inspector panel. In the Stylesheets text field of the JavaFX CSS subsection, notice that the
IssueTrackingLite.cssstyle sheet is already set, as shown in Figure 9-1. This is the style sheet that was set when you created the FXML file.
Figure 9-1 Adding a Style Sheet File
Description of "Figure 9-1 Adding a Style Sheet File"
Use a style class for one of the elements in the Content panel.
In the Hierarchy panel, select the row for the ListView element.
Click the Properties section of the Inspector panel, and click the button with the downward arrow in the Style Class list. Select darkList as shown in Figure 9-2. Notice that the appearance of the ListView element in the Content panel has changed to a dark grey color.
Figure 9-2 Adding a Style Class to the ListView Element
Description of "Figure 9-2 Adding a Style Class to the ListView Element"
From the Menu bar, select File and then Save.
You just completed building the FXML layout for a JavaFX application using JavaFX Scene Builder. Continue with the Compile and Run the Application to compile and run the IssueTrackingLite application.