Use NetBeans IDE New Wizard

Create a new empty FXML file using the NetBeans IDE New wizard.

1. From the Projects window of the IDE, right-click the issuetrackinglite node, choose New, and then Other.

2. In the New File dialog box, select the JavaFX category and select the Empty FXML file type, as shown in Figure 3-1. Click Next.

   Figure 3-1 Choose Empty FXML File Type

   
   Description of "Figure 3-1 Choose Empty FXML File Type"
   
   

3. In the New Empty FXML dialog box, enter IssueTrackingLite in the FXML Name text field. Click Next.

4. In the FXML Controller Class step, select the Use Java Controller checkbox and the Use Existing option.

5. Click Browse and in the Select Java Controller Class dialog box, open the IssueTrackingLiteController.java file, as shown in Figure 3-2. Click Next.

   Figure 3-2 Use the Existing Java Controller Class File

   
   Description of "Figure 3-2 Use the Existing Java Controller Class File"
   
   

6. Select the Use Cascading Style Sheet checkbox and the Use Existing option.

7. Click Browse and in the Select CSS File dialog box, open the IssueTrackingLite.css file. Click Finish.

   The IssueTrackingLite.fxml file is opened in the IDE source editor. This new FXML file is in the same folder as the provided controller source code, IssueTrackingLiteController.java, that will connect with the user interface that you build with this tutorial.

8. In the Projects window, double-click the IssueTrackingLite.fxml node to open the file in the JavaFX Scene Builder tool.

The main window for the JavaFX Scene Builder tool appears with an empty FXML file opened in the Content panel, as shown in Figure 3-3. The initial AnchorPane element shown in the Content panel will contain the GUI layout that you build. Click the image to see a larger version.

Figure 3-3 JavaFX Scene Builder Main Window at Startup (Click image to enlarge.)

Description of "Figure 3-3 JavaFX Scene Builder Main Window at StartUp"

Use JavaFX Scene Builder New Command

If you chose not to use NetBeans IDE to complete this tutorial, use the following steps to create a new empty FXML file using the Scene Builder New command.

1. From the Menu bar, choose File and then New.

   A new JavaFX Scene Builder window appears with an empty FXML file opened in the Content panel, as shown in Figure 3-3. Click the image to see a larger version. The initial AnchorPane element shown in the Content panel will contain the GUI layout that you build.

2. Set the CSS file to use for your new FXML layout.

   1. In the Hierarchy panel, select the root AnchorPane element and click the Properties section of the Inspector panel.

   2. Go to the JavaFX CSS section and locate the Stylesheets list view. Click the button with the plus sign (+) symbol.

   3. In the Add Style Sheet dialog box, navigate to the issuetrackinglite folder and select the IssueTrackingLite.css file. Click Open.

3. Save the new FXML file before you continue with the rest of the tutorial.

   1. From the main menu bar, choose File and then Save As.

   2. In the Save FXML File As dialog window, navigate to the IssueTrackingLite folder, and then to the src and issuetrackinglite folders.

   3. Enter IssueTrackingLite.fxml in the File name text field and click Save.

   4. Select Yes when asked if you want to replace the existing IssueTrackingLite.fxml file.

Set the Style Class File

Set the style class to use for the entire layout.

1. In the JavaFX Scene Builder Hierarchy panel, select the row for the top AnchorPane container, if it is not already selected.

2. In the Properties section of the Inspector panel, locate the Style Class list view and click the button with the plus sign (+). The list of style classes is retrieved from the IssueTrackingLite.css file. Select theme, as shown in Figure 3-4.

   Figure 3-4 Set the Style Class for the Layout

   
   Description of "Figure 3-4 Set the Style Class for the Layout"
   
   

Create the Base Panes

Define the base layout panes to define the different sections of your UI layout.

1. From the Library panel, select Split Pane (Horizontal Flow). Drag it to the Content panel and drop it inside the Anchor Pane element, as shown in Figure 3-5.

   After you drop the Split Pane object, the Hierarchy panel is updated to show the Split Pane (Horizontal Flow) element containing the two AnchorPane sub-elements.

   Figure 3-5 Add Split Pane (Horizontal Flow)

   
   Description of "Figure 3-5 Add Split Pane (Horizontal Flow)"
   
   

2. With the Split Pane (Horizontal Flow) selected in the Hierarchy panel, select Modify and then Fit to Parent from the Menu bar. This action resizes the node to fill the space occupied by its container parent, the topmost AnchorPane element.

3. From the Menu bar, choose File and then Save. Alternatively, you can press Ctrl-S (for Windows or Linux platforms) or Cmd-S (for Mac OS platform).
   This action saves your work in the src folder for the IssueTrackingLite sample NetBeans project, <install-dir>/IssueTrackingLite/src/issuetrackinglite/IssueTrackingLite.fxml. Perform this Save action frequently to preserve your work.

4. With Split Pane (Horizontal Flow) selected in the Hierarchy panel, drag the vertical divider until the percentage displays about 25%, as illustrated in Figure 3-6. Alternatively, in the Properties section of the Inspector panel, enter 0.25 in the Divider Positions field.

   Figure 3-6 Move Vertical Divider

   
   Description of "Figure 3-6 Move Vertical Divider"
   
   
   
   

   Note: From the Menu bar, choose Edit and then Undo to undo actions when necessary.

   
   

5. To add the Split Pane (Vertical Flow) sections, drag Split Pane (Vertical Flow) from the Library panel and drop it to the Hierarchy panel. Ensure that you make the drop when the second AnchorPane element inside the Split Pane (Horizontal Flow) shows an orange highlight, as shown in Figure 3-7.

   Figure 3-7 Add Split Pane (Vertical Flow)

   
   Description of "Figure 3-7 Add Split Pane (Vertical Flow) "
   
   

   Notice that after the Split Pane (Vertical Flow) element is dropped, it is added to the Hierarchy panel with its AnchorPane children.

6. In the Hierarchy panel, right-click the newly added row for the Split Pane (Vertical Flow) element and choose Fit to Parent from the contextual menu.

7. With the Split Pane: (Vertical Flow) selected in the Content panel, drag the horizontal divider until the percentage displays about 35%. Alternatively, click the Properties section of the Inspector panel, enter 0.35 in the Divider Positions field.