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.

Child Pages

ContentsAssociating With An EnumAssociating With An Enum One of the tidiest ways of populating a JavaFX ComboBox is to associate it with an enumeration. The enumeration defines the objects you can select from in the ComboBox, as well as how to display these objects (their String representations). First, we need to create an enum: Creating An Enum Suitable … Continue reading ComboBoxes
CSS Styling
ContentsOverviewHeight And WidthBackgroundBasic ColourColour GradientOverview JavaFX-based UI objects can be styled using CSS files (similar to how HTML objects can be styled). Note that the CSS attribute names are normally different to those used to style HTML. However, most are just the equivalent for HTML with an added -fx-  prefix. Height And Width Please note … Continue reading CSS Styling
Information and code examples about the ListView node in JavaFX.

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.


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:


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

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:


Posted: June 7th, 2016 at 12:03 pm
Last Updated on: November 9th, 2016 at 3:16 am