Skip to main content

JavaFX

Geoffrey Hunter
Geoffrey Hunter
mbedded.ninja Author

Overview​

JavaFX is a Java-based UI platform for developing desktop applications on a variety of platforms. It is pitched as a replacement for Swing.

The JavaFX logo.

FXML Files​

JavaFX UIs can be described using FXML files (.fxml). FXML files are a special type of XML file for describing the UI in a similar way to HTML. This style of designing a UI is called a declarative style. The alternative method to create JavaFX UIs is to use a procedural style, using normal Java code.

The FXML method is great for describing static (or semi-static) JavaFX UI elements. That is, all of the UI elements which don't change (or only partially change) at run time. FXML is not good for creating the UI elements which are dynamically created at runtime.

Both design methodologies can be implemented in the same project.

Layout Controls​

JavaFX sports a number of different layout controls to arrange your UI with. These include (sorted in alphabetical order):

NameDescription
AnchorPane Allows child controls to be anchored to the top, bottom, left, right or center of the AnchorPane.
BorderPane Allows child controls to be placed and the top, bottom, left, right or center of the BorderPane.
FlowPane Arranges all of it's child controls either horizontally or vertically and then wraps once it reaches a certain size limit. Like a TilePane except each child control gets allocated a different amount of space.
GridPane Arranges it's child controls in a grid (aka table).
HBox Arranges it's child controls horizontally.
StackPane Stacks all of it's child controls on-top of each other.
TilePane Arranges all of it's child controls either horizontally or vertically and then wraps once it reaches a certain size limit. Like a FlowPane except each child control gets allocated the same amount of space.
VBoxArranges it's child controls vertically.

One thing that annoys me is that there is no row or column sub-controls (like <tr> in HTML) for table-like controls such as the GridPane. To arrange sub-controls within a GridPane, you have to manually specify the row and colomn number of each sub-control, making re-arrangement of the GridPane tedious.

Buttons​

Circular Buttons​

Circular buttons can be easily made by modifying the -fx-background-radius property.

Attaching To Button Pressed And Released Events​

Sometimes, just responding to an "on click" event is not enough, and you need to be able to determine when the user both pressed and released the mouse (or finger) on the button. Handlers for MOUSE_PRESSED and MOUSE_RELEASED events can be attached to JavaFX buttons using the following code:

button.addEventFilter(
    MouseEvent.MOUSE_PRESSED,
    (MouseEvent r) -> {
        System.out.println("Mouse was pressed.");
    }
);
button.addEventFilter(MouseEvent.MOUSE_RELEASED,
    (MouseEvent r) -> {
        System.out.println("Mouse was released.");
    }
);

Events​

Double clicks on JavaFX nodes can be found with the following code (using Java 8 lambda notation):

name.setOnMouseClicked((MouseEvent mouseEvent) -> {
            if (mouseEvent.getButton().equals(MouseButton.PRIMARY)) {
                if (mouseEvent.getClickCount() == 2) {
                    System.out.println("Node was double clicked.");
                }
            }
        });

Note that it gets slightly more difficult if you need to detect single-clicks also.

Custom Controls​

Adding Properties To Custom Controls​

Properties can be added to custom controls by providing a getter and a setter. Once this has been done, they can be set in a .fxml file in the same manner as any other property:

<MyCustomControl text="Testing..." />