Java programming language

JavaFX application development

First steps with JavaFX

  

JavaFX is a set of Java packages that lets us create a wide variety of graphical user interfaces (GUI), from the classical ones with typical controls such as labels, buttons, text boxes, menus, and so on, to some advanced and modern applications, with some interesting options such as animations or perspective.

If we look backwards, we can see JavaFX as an evolution of a previous Java library, called Swing, that is still included in the official JDK, although it is becoming quite obsolete, and the possibilities that it offers are much more reduced. That is why now most of the Java desktop applications are being developed with JavaFX. At the beginning, it was distributed as an additional library that we needed to add to our projects. In Java version 8 it was included in Java core, but from version 11 it is, again, a separate library. So we need to download it and link it to our projects. However, it can be integrated with some of the most popular Java IDEs, such as Eclipse, NetBeans or IntelliJ. This allows us to:

1. Creating a JavaFX project in IntelliJ

IMPORTANT NOTE: the steps explained in this section are updated to IntelliJ version 2021.2.1. These steps are different in earlier versions, and may differ in future versions until we update the contents again. We apologize for this inconvenience, but this is one of the drawbacks of working with JavaFX in many IDEs. In this section you can find some tricks to work with previous versions, although it is harder to set up a JavaFX project this way.

The first step to deal with a JavaFX application is to create a new project of type JavaFX. You will see a dialog like this:

Some of the options in the dialog are self-explanatory, but some others may be confusing:

1.1. JavaFX project structure

After following these steps, a new JavaFX project will be created with this project structure:

1.2. Important files in the project

Let’s have a look at some of the files contained in the project structure that have a special role:

module example.myfirstjavafxproject {
    requires javafx.controls;
    requires javafx.fxml;

    opens example.myfirstjavafxproject to javafx.fxml;
    exports example.myfirstjavafxproject;
}

1.3. Running the project

If everything is properly set up, we can run the sample project that has been created. The first time we need to right click on the main class (HelloApplication) and choose Run from the context menu. From this point on, we can just click on the green arrow button in the upper right part of the window to run this same file again.

If you pay attention to this main class, it’s a subtype of JavaFX’s Application class.

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;

import java.io.IOException;

public class HelloApplication extends Application 
{
    @Override
    public void start(Stage stage) throws IOException 
    {
        FXMLLoader fxmlLoader = 
            new FXMLLoader(HelloApplication.class.getResource("hello-view.fxml"));
        Scene scene = new Scene(fxmlLoader.load(), 320, 240);
        stage.setTitle("Hello!");
        stage.setScene(scene);
        stage.show();
    }

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

As you can see, the application transforms our FXML view into a Java object (the main scene node containing all the other nodes from the scene), and puts that into a Scene object which will be shown by the Stage object (main window).

NOTE: see how the FXML file is loaded into the application through HelloApplication.class.getResource method. This instruction will be really useful to load any additional resource from resources folder into our application in later documents.

2. Understanding Scene Builder

Scene Builder is an external tool that can be integrated into IntelliJ to create our JavaFX graphical user interfaces (GUI). This tool lets us edit FXML files, making interface design much faster, and keeping the view separated from the rest of the code.

2.1. Using Scene Builder integrated with IntelliJ

In order to use Scene Builder integrated with our IntelliJ IDE, we must double click on the FXML file that we want to edit. In the main area, we can switch between the text mode (in which we will just see the FXML contents) or the graphical mode through Scene Builder tab. This is what you see from the Text tab:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.VBox?>

<?import javafx.scene.control.Button?>
<VBox alignment="CENTER" spacing="20.0" xmlns:fx="http://javafx.com/fxml"
      fx:controller="example.myfirstjavafxproject.HelloController">
    <padding>
        <Insets bottom="20.0" left="20.0" right="20.0" top="20.0"/>
    </padding>

    <Label fx:id="welcomeText"/>
    <Button text="Hello!" onAction="#onHelloButtonClick"/>
</VBox>

If you choose the Scene Builder tab, Scene Builder plugin will be opened with a default initial view. The first time that we click on this tab we may be asked to install Scene Builder kit, along with JavaFX components in IntelliJ:

After clicking in the link(s) to download the required software, you may see something like this:

2.2. Using Scene Builder as a standalone application

You can install Scene Builder as a standalone application (apart from IntelliJ) if you feel that IntelliJ plugin is not working properly. Here is the official link to install it. Make sure that you choose the appropriate version, depending on your current JDK and JavaFX versions.

If you want to use this standalone application instead of the IntelliJ plugin, you just have to right click on the FXML file from IntelliJ and choose the option Open in Scene Builder from the context menu.

The first time it may ask you to enter the path to the Scene Builder application, which is something like C:\Users\YourUserName\AppData\Local\SceneBuilder in Windows. If you choose to work with this standalone version of Scene Builder, remember to save the changes from Scene Builder (menu File > Save) so that you can see them updated in your IntelliJ project.

2.3. Scene Builder main window

At the top left part of the application, we have the JavaFX components that we can include in our application. They are divided into some categories, such as containers, controls, menus and so on. We will learn more about these categories in later documents, but with this panel we can find the element we are looking for.

At the bottom left, you’ll see the scene’s object’s hierarchy. There you can also drag the elements and control which elements are inside other elements.

At the right part of the application you’ll find the current selected object’s inspector from which you’ll be able to change its properties (visual and code).

If you want to add any component to the application, you just need to drag it over the main Scene Builder area, and place it at your desired position. In next documents you will learn about the different components that you can use in JavaFX applications, and how to arrange them properly.