Defining the user interface

When building the user interface for a JavaFX application, you can do it in one of two ways: code or markup. To keep our code smaller and more readable, we'll build the user interface using FXML--the XML-based language created specifically for JavaFX to express user interfaces. This presents us with another binary choice--do we write the XML by hand, or do we use a graphical tool? Again, the choice is a simple one--we'll use a tool, Scene Builder, which is a WYSIWYG tool originally developed by Oracle and now maintained and supported by Gluon. We will, however, also be looking at the XML source so that we can understand what's being done, so if you don't like using a GUI tool, you won't be left out.

Installing and using Scene Builder is, as you would expect, pretty straightforward. It can be downloaded from http://gluonhq.com/labs/scene-builder/. Once installed, you need to tell NetBeans where to find it, which can be done in the Settings window, under Java | JavaFX, as you can see in the following screenshot:

We are now ready to create the FXML file. Under the resources directory in the Project View, create a new folder called fxml, and in that folder, create a file called procman.fxml, as follows:

    <BorderPane xmlns="http://javafx.com/javafx/8.0.60" 
      xmlns:fx="http://javafx.com/fxml/1"  
      fx:controller="com.steeplesoft.procman.Controller"> 
    </BorderPane> 

BorderPane is a container that defines five regions--top, bottom, left, right, and center, giving us a fairly coarsely-grained control over where on the form the controls should appear. Typically, with BorderPane, each area uses a nested container to provide the finer-grained control often necessary. For our needs, this level of control will be perfect.

The primary concern of the user interface is the list of processes, so we'll start with the controls for that. From Scene Builder, we want to click on the Controls section on the accordion on the left, then scroll down to TableView. Click on this and drag it to the CENTER region on the form, as shown here in this screenshot from Scene Builder:

The resulting FXML should look something like this:

    <center> 
        <TableView fx:id="processList" 
               BorderPane.alignment="CENTER"> 
        </TableView> 
    </center> 

With no components in the other areas, TableView will expand to fill the window's full area, which is what we want for now.