NetBeans Project

Getting set up to use Scene Builder

In our first JavaFX examples I showed you how to use Java code to construct a GUI application. This approach is fine for demonstrating the basics of JavaFX, but will not work well for building larger applications.

To build larger applications we will be using an alternative system called FXML. To make and edit FXML GUI applications we will be using Scene Builder. You can download an installer for Scene Builder from Gluon.

The Scene Builder installer should also take care of automatically integrating Scene Builder into NetBeans. You can verify this by using NetBeans to make a JavaFX FXML project and double-clicking on an fxml file in the project. This should automatically launch Scene Builder.

If Scene Builder does not launch automatically, select Options from the Tools menu in NetBeans for Windows or Preferences from the Apple menu in NetBeans for Mac. This will bring up the NetBeans options dialog. Click the Java button at the top of the dialog, followed by the JavaFX tab to bring up the pane for Scene Builder integration. If a path to Scene Builder does not appear there, select the Browse option in the pull down menu to browse to the location where Scene Builder is installed.

A first example

The FXML Example button at the top of these lecture notes links to an archive containing our first FXML project.

The App class in this example contains just enough code to set up the user interface:

public class App extends Application {

    @Override
    public void start(Stage stage) throws IOException {
        FXMLLoader fxmlLoader = new FXMLLoader(App.class.getResource("primary.fxml"));
        Scene scene = new Scene(fxmlLoader.load(), 480,160);
        stage.setScene(scene);
        stage.setTitle("First FXML Example");
        stage.show();
    }

    public static void main(String[] args) {
        launch();
    }

}

The code that is necessary to set up the scene and the stage will look familiar from our earlier examples. The difference in this application is in how the contents of the scene get set up. In this example all of the details of the scene contents are stored in an FXML file that the application reads and loads at the start of the start() method.

The FXML file primary.fxml contains all of the information about the contents and structure of the user interface. You can find that file in the project in the Other Sources folder in src/main/resources and edu.lawrence.hellofxml. Double-clicking on that file in NetBeans will automatically launch Scene Builder.

The Scene Builder window has several important sections:

• The center section shows a visual representation of the scene you are working on.
• On the top left you will find several sections containing user interface elements. You can drag and drop elements from these lists onto your interface.
• On the bottom left you will see a navigation pane that lists all of the components in your scene. This makes it easy to quickly select any one element you would like to work on.
• On the right you will see a list of properties for the currently selected element. This will give you considerable control over the contents and visual appearance of the components in your scene.

Your project also contains a third file, a java file that implements a controller class. The controller class contains action methods that you will link to various controls in the interface.

public class PrimaryController {
    @FXML TextField nameText;
    @FXML Label greeting;
    
    @FXML
    void doGreeting(ActionEvent event) {
        String name = nameText.getText();
        String message = "Hello, "+name+". Welcome to JavaFX!";
        greeting.setText(message);
    }
}

The controller class contains a single action method that is linked to the sole button in the interface. Two things are necessary to link the method to the button. The first is that the method needs to have the @FXML annotation attached to it to identify the method as an FXML action method. The second requirement is that the button needs to identify this particular method as the action method for the button. You do that in Scene Builder by selecting the button and going to the code inspector on the right hand side of Scene Builder window:

There is a section in the code inspector view where you can type the name of an action method. This specifies which method in the controller class to call in response to clicks on the button. If you expand the controller view on the bottom left of the window you can see how Scene Builder links the scene to its controller class.

Looking back at the code for the action method, you see that the action method for the button sets the text content of a label in the scene. The label itself is accessible via the Label label member variable in the controller class. That member variable is annotated with @FXML to indicate that this member variable is linked to a Label component in the scene. For this link to work correctly, we have to make sure that the id property for that Label is set in the code section in Scene builder. Selecting the Label component and opening the code inspector for that component shows that this is the case:

The code section shows that this Label component has an id value of 'greeting', which corresponds exactly to the name of the member variable in the controller class.

Similarly, you can see that the code in the controller class links to a TextField in the scene via the nameField member variable. The action method reads the text from the TextField to construct a personalized greeting when you click the button.