JavaFX Basics

Learn about the JavaFX Framework for GUI development and methods of the JavaFX Life Cycle

JavaFX is a set of packages and APIs for developing programs with graphical user interfaces, 3D graphics, etc. A graphical user interface, or GUI, enables the user to interface with a program using graphical components, such as windows, buttons, text boxes, etc.

JavaFX was designed with the Model-View-Controller pattern in mind. In a nutshell, this pattern keeps the code that handles an application’s data separate from the UI code.

Because of this, when we are using the MVC pattern, we wouldn’t mix the code that deals with the UI and the code that manipulates the application data in the same class. The controller is a middleman between the UI and the data.

When working with JavaFX, the model corresponds to the application’s data model, the view is the FXML, and the controller is the code that determines what happens when a user interacts with the UI. The controller handles events. JavaFX doesn’t enforce the MVC pattern but it is a good practice to follow.

A JavaFX GUI uses four classes/objects, namely Application, Stage, Scene, and Pane, to display graphical components.

• Stage — is a top-level Java FX container for Scenes, it’s the main window.
• Scene — each stage requires a scene and backing each scene is a scene graph, a tree in which each node corresponds to a UI control or an area of the scene, for example, a rectangle. A Scene is a container for JavaFX controls such as buttons, text fields, layouts, etc.

All Java FX applications have at least one Stage and one Scene.

Why do we have to have a scene and a stage? Let’s look at a theater metaphor. Let’s imagine you are watching a play. The curtain rises when we watch the first scene then the curtain falls. Stage helpers run around and change the furniture and backdrop and then the curtain rises again. We may see a different-looking set of actors, but it’s still the same stage.

So if we go back to JavaFX, remember that a Stage corresponds to a top-level UI container, like a window, and a Scene is backed by a Scene graph which contains the UI nodes. If you want to change what’s shown in a Stage (the window), all we have to do is change the scene, the UI. We don’t have to construct a new Stage object. In practice, we would load a different FXML file into a new Scene and then call stage.setScene().

For example, if we had a wizard that wanted the user to step through using the previous and next buttons, we could use the same window (Stage) and just change the Scene every time they clicked next or previous. Or when we want to change parts of the UI in response to a user action, we don’t have to remove Ui components or make them invisible and add new ones, we just switch the scene. Essentially, these scenes make it easy to reuse the container.

The following outlines one approach to creating a JavaFX GUI:

1. Extend and launch the application: An Application is a JavaFX class that provides the basic functionality for a JavaFX program and is available via the import statement javafx.application.Application;.

2. Override the start() method: A JavaFX Application starts by executing the start() method, which must be overridden in the derived Application class. The start() method takes a Stage parameter, has a return type of void, as in public void start(Stage applicationStage) {…}, and is preceded by the annotation @Override. As discussed, a Stage is a JavaFX top-level container that contains all content within a window and is available via the import statement import javafx.stage.Stage;.

3. Create a pane and scene: A Scene is a JavaFX component that contains all graphical components that are displayed together and is available via the import statement import javafx.scene.Scene;. An application can have multiple scenes, but only one scene may be visible at a time. A Pane is a JavaFX component that controls the layout, i.e., position and size, of graphical components and is available via the import statement import javafx.scene.layout.Pane;. The statement pane = new Pane(); creates an empty Pane object. The statement scene = new Scene(pane); creates a new Scene containing the pane object.

4. Create and add graphical components to a pane: A TextField is a JavaFX GUI component that enables a programmer to display a line of text and is available via the import statement import javafx.scene.control.TextField;. The statement outputField = new TextField(); creates a TextField object. A TextField’s setText() method specifies the text that will be displayed. Graphical components are added to a scene by adding the components to the scene’s pane. A pane can contain numerous graphical components, which are called children. The statement pane.getChildren().add(outputField); adds a TextField object named outputField to the pane’s list of children.

5. Set and display scene: Stage’s setScene() method sets the scene that will be displayed, as in applicationStage.setScene(scene);. The setTitle() method specifies the text that will be displayed as the application’s title.

The Application Class and Life Cycle Methods

A JavaFX application is a subclass of the Application class. This class defines 3 lifecycle methods: init(), start(), and stop(), and they are called in this order.

Lifecycle methods

Init() called when the JavaFX application first launched. Here we perform initializations and set default data.

Start() we create a UI (set Scenes) when the application starts. Start references a Stage object as a parameter. The Stage object is provided at runtime and is the primary Stage for your JavaFX application. Start() is an abstract method and must be overridden.

Stop() when we close the application, the stop method runs, and the application gets terminated. We use this method for shutdown and cleanup operations.

JavaFX application is launched by calling the launch() method and launch() calls init() and then start(). The launch() method returns when the application is closed and then the stop() method is called.

Fx:controller attribute tells the runtime which class is the controller for this window.

A layout in JavaFX arranges elements/controls in a Scene. JavaFX layout classes are AnchorPane, FllowPane, GridPane, etc.

A GridPane is a JavaFX Pane component that positions graphical components in a two-dimensional grid.

A Label is a JavaFX component that displays non-editable text and is available via the import statement import javafx.scene.control.Label;. Labels are typically for describing, or labeling, other GUI components.

A Button is a JavaFX GUI component that represents a labeled button that a user can press to interact with a program. A JavaFX GUI component that supports user input generates an action event to notify the program when a user interacts with the component, such as when pressing a button. An event handler defines how the program should respond to action events.

Set and define an event handler: An ActionEvent is an object that notifies the program of the occurrence of a component-related event, such as a user pressing a button, and is available via the import statement import javafx.event.ActionEvent;. An EventHandler is an object that defines how a program should respond to specific events, such as an ActionEvent, and is available via the import statement import javafx.event.EventHandler;.

Getting Started with Your JavaFX Project

Create a new JavaFX project with IntelliJ IDEA using this step-by-step tutorial.

Explore other ways to run JavaFX here.

Exploring further:

• JavaFX overview, tutorials, and references from Oracle’s Java Documentation
• JavaFX GridPane class from Oracle’s Java Documentation
• JavaFX Label class from Oracle’s Java Documentation
• JavaFX Insets class from Oracle’s Java Documentation
• JavaFX Button class from Oracle’s Java Documentation
• JavaFX EventHandler class from Oracle’s Java Documentation
• JavaFX ActionEvent class from Oracle’s Java Documentation
• JavaFX Alert class from Oracle’s Java Documentation