Article by:
Date Published:
Last Modified:

Child Pages

  • ComboBoxes
  • CSS Styling
  • ListView
  • 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.
    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):

    AnchorPaneAllows child controls to be anchored to the top, bottom, left, right or center of the AnchorPane.
    BorderPaneAllows child controls to be placed and the top, bottom, left, right or center of the BorderPane.
    FlowPaneArranges 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.
    GridPaneArranges it's child controls in a grid (aka table).
    HBoxArranges it's child controls horizontally.
    StackPaneStacks all of it's child controls on-top of each other.
    TilePaneArranges 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 (likein 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.


    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:

        (MouseEvent r) -> {
            System.out.println("Mouse was pressed.");
        (MouseEvent r) -> {
            System.out.println("Mouse was released.");


    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..." />


    Geoffrey Hunter

    Dude making stuff.

    Creative Commons License
    This work is licensed under a Creative Commons Attribution 4.0 International License .

    Related Content

    No related content found.


      comments powered by Disqus