JavaFX

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.

Child Pages

ComboBoxes

ComboBoxes

CSS Styling

CSS Styling

ListView

ListView

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):

Name	Description
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.
VBox	Arranges 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..." />