Extremely basic JavaFX

A tiny bit of background

Why JavaFX? Short answer: I'm doing an MSc in Computer Science and this is what we are learning. There are pros and cons to all frameworks see for example this discussion on Reddit. However, I need to know this one so there's no real benefit to me, at this moment, in shopping around.

JavaFX was bundled with Java from 8-10 so if you're using one of those you're golden, however, starting from Java 11 JavaFX is its own project and will need to be imported. This can be a bit faffy, and how exactly you do it depends on your setup, so I'm not going into this bit at all.

There are quite a few technical tutorials out there which talk you through all the detail of the hows and whys of the way things are done in JavaFX, this, is not one of them. This is (probably) going to be a series of tutorials written purely for my own benefit working through learning JavaFX from the bottom up. There will be links to more in depth information (often the official docs) throughout.

Hello World!

All JavaFX Applications:

• extend the Application class and as a result are required either to be abstract or to implement the abstract method start(stage).
• require:
• a stage
• a scene and
• a scene graph consisting of, at a minimum, a root node.

Doing, almost the absolute minimum results in the following:

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class HelloWorld extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        Group root = new Group();
        Scene scene = new Scene(root, 600, 300);
        stage.setTitle("Hello World!");
        stage.setScene(scene);
        stage.show();
    }
}

If you run this, you will get a blank window 600px wide by 300px tall with the title bar set to "Hello World!".

Component breakdown

Stage:

There are 5 types of stage:

• Decorated - solid white background with platform decorations
• Undecorated - solid white background, no platform decorations
• Transparent - transparent background, no platform decorations
• Utility - solid white background minimal platform decorations
• Unified - solid white background with platform decorations but without a border between the client area and decorations.

The default is decorated, it can be changed by adding the following line at any before stage.show() is called: stage.initStyle(StageStyle.UNDECORATED);. Once the stage has been shown however, it is no longer possible to change this.

More details: JavaFX API Class Stage.

Scene

In order to display anything in JavaFX you need to put it in a scene, a stage can only display one scene at a time but it is possible to exchange the scene at runtime^[1].

When you instantiate a scene you can optionally tell it how big you want it to be (as I did earlier), however if you don't set the width and height the scene will set it's initial size based on the preferred size of its content JavaFX API: Class Scene. You can also set the background colour of the scene when you instantiate it: Scene scene = new Scene(root, Color.RED).

The only non-optional parameter here is that of the root node.

Scene Graph and nodes

A scene graph is a hierarchal tree-like data structure containing nodes.

The base or root node has no parents, subsequent nodes are termed branches if they have both parents and children and leaves if they have no children. Both root and branch nodes are Parent nodes.

Branch or Parent nodes can be of the following types:

• Group: which we used in our extremely minimalist example. It is a collective node that contains a list of child nodes. The children will be rendered in order. Any transformation, effect or state enacted on a group will be applied to all of the child nodes.
• Region: the base class of all JavaFX Node-based UI Controls, and all layout containers
• WebView: this is a Node that manages a WebEngine and displays its content.

There are two ways of laying out applications using JavaFX, the simplest (in the sense that it requires the least infrastructure) is to add components programatically as we have done up to now. However, it is more intuitive (particularly for those of us who are used to web development) is to use XML. I'm going to write my XML by hand (at least initially) as I find this is a better way to get my head around how everything fits together. If this isn't your bag then go ahead and use the graphical scene builder.

Most basic tutorials will tell you you need a scene without ever really explaining why, or that you can swap them out. Many thanks to Jenkov: JavaFX Overview for an actual explanation of the point of this extra box. ↩︎