Preview the UI

Use the following steps to preview the GUI work that you have done so far:

1. From the Menu bar, select Preview, and then select Show Preview in Window.

2. 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

3. 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.

1. 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.css style 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

   

2. Use a style class for one of the elements in the Content panel.

   1. In the Hierarchy panel, select the row for the ListView element.

   2. 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

      

3. 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.