The Elements of JavaFX You Need to Master

#

The Nodes

#

There are large amount of classes in JavaFX arranged in a hierarchy starting with a top level class called, Node. There are a number of layout classes that all work differently, such as BorderPane, ScrollPane, HBox, VBox, GridPane and StackPane which can all be embedded inside of each other to create exactly the layout you want.

There are classes to display images, text or text and images together. ListView, TreeView and TableView allow collections of data to be displayed on screen (and edited) in highly customizable ways.

For user input, you can choose from TextField, ComboBox, ChoiceBox, Spinner, Checkbox, RadioButton, Buttons and ToggleButtons.

All of these Nodes have a large number of methods and properties for controlling their presentation and how they act. Learning how to use them and configure them can be a daunting task. Luckily, most of the tutorials on the web seem to focus on this aspect of JavaFX, so help is easy to find.

Observable Objects and Concepts

#

This is the Reactive part of JavaFX, and it’s critical to understand how this works.

There are three aspects to the observable nature of JavaFX. The first is a huge set of classes that wrap around values and implement the “Observer Design Pattern” into classes collectively called Properties. This enables you to do two important things: The first is to use Bindings to connect Properties to each other such that when value changes, the values in the connected Properties will change automatically. The second is to create ChangeListeners that watch these observable values and trigger code to run whenever they detect a change in them.

The key to using JavaFX to create Reactive applications is to establish a definitive place for the “State” of your GUI to reside, and then use Properties, Bindings and ChangeListeners to connect your GUI elements back to that “State” instead of copying the values in and out of it in your code.

But to do that, you’ll need to understand how these Properties, Bindings and ChangeListeners work.

Events and Actions

#

At its heart, JavaFX is “Event Driven Programming”, and even bindings probably boil down to event handling deep inside the JavaFX library. Events can be triggered by Property changes, through mouse move movements and clicks, by keyboard actions, and the actions on Nodes like Buttons and MenuItems. Events are captured in the code through “Handlers”, and each EventHandler specifies code that should be run when the event occurs.

It’s important to understand where actions and Events are more appropriate than State changes and Bindings. Something like a Button click is unmistakably an “Action”, and should probably be treated as such. It would be possible to configure a click handler on a Button to toggle a Property in State, which is then captured with a ChangeListener in an application logic class, but that’s probably the most complicated way to program the process.

CSS

#

All of the JavaFX Nodes can be styled with cascading style sheets. These are largely compatible with web standards for CSS, but there are some differences to learn about. How you implement CSS styling largely becomes a matter of taste. You can override the standard styling for entire classes of Nodes, or you can create custom selectors and attach them to specific Nodes in your code. Or you can do both.

Getting started with stylesheets is pretty easy. There are, as usual, some things you need to know before you get going but they’ve all been gathered together in this article:

Pseudo-Classes are the best way to represent changes in the State of your application the styling of your GUI.

Handling the GUI Thread

#

Like virtually every GUI library available, it’s really, really bad to do long or blocking operations on the same thread that is maintaining the GUI. This handled by launching a background thread to do the otherwise blocking operation, and then triggering an event at its completion which will update the GUI. The GUI thread in JavaFX is called the “FX Application Thread”, or “FXAT”

The biggest implication of this is that you cannot program linearly. Try as hard as you like, but there’s no way that you can run anything that looks like a “Function” (ie. input some data and wait for an answer) triggered from the FXAT that uses a background thread. When your application behaves weirdly and seems laggy or hangs, come back to this paragraph and read it carefully because this is what you’re probably trying to do.

JavaFX provides a handy class called “Task”, which supplies a runnable which you can pass to a Thread. When the code in the Task has been completed, it triggers a “Success” Event. You can supply an Event Handler which be invoked when the “Success” event is triggered. Just like any Event Handler, it will be run on the FXAT and can therefore update the GUI.