LiveStream Summary: JavaFX, the Cross-platform UI Development in Java

Mala Gupta

On January 20, 2021, we hosted the live stream ‘JavaFX: Cross-platform UI Development in Java’ by Johan Vos, Java Champion, co-lead for OpenJFX, lead of OpenJDK Mobile, published author, and co-founder of Gluon.

You can find the slides from this presentation here.

Session details

In this live stream, Johan covered what JavaFX is, how to use it in IntelliJ IDEA, its ecosystem, specification, and architecture, how it is being developed, and the JavaFX roadmap.

What is JavaFX

Johan defines JavaFX as a Java API for general client development that is especially suited for UI development. JavaFX is developed under the OpenJDK umbrella as part of the OpenJFX project.

To eliminate confusion, Johan explains that JavaFX code is not integrated in the OpenJDK code base. JavaFX uses the javafx namespace and can be considered a successor to Java AWT or Swing, the first UI toolkits in Java (which are still in use).

It was interesting to learn that JavaFX combines hardware acceleration, which wasn’t widely available in the initial days of Java when the AWT and Swing UI toolkits were created. JavaFX can not only take advantage of GPUs, which now seem to be omnipresent, but also the general characteristics of Java like security, maturity, performance, and a large ecosystem.

Johan describes a typical JavaFX stack as being composed of your JavaFX application built on top of open or commercial JavaFX libraries. These libraries are built on the Java FX platform, which are integrated with the hardware.

The JavaFX stack has UI components like containers or controls. Developers can use these components to create the UI in their applications or their own libraries and frameworks. Developers can use the Java APIs to create UI components, like initializing a Button using its constructor. Developers can also choose to use FXML for declarative UI development, and in this case Scene Builder comes in handy (which Johan demonstrates later in his session). If you are used to working with CSS to style your components, you can use that to style JavaFX components too.

Relation between JavaFX and Java

JavaFX was removed from the OpenJDK Code base starting from Java 11. This has resulted in a lot of confusion about the relation between JavaFX and Java, how to use it, the best build tools, and much more. I’m glad that Johan addressed this question in the beginning of his live stream.

Johan mentions that OpenJFX and OpenJDK are separate projects under the same umbrella. This implies that both JavaFX and Java share some of the same infrastructure like issue tracker, and most of the policies and structure regarding the different roles like committer, contributor, reviewer, and project lead. However, the Java code base and the JavaFX code base are completely separate now.

Johan mentions that in earlier Java versions, like Java 8, Java FX was distributed as jfxrt.jar with Oracle JDK in its ‘ext’ folder. Starting with Java 11, JavaFX is no longer a part of OpenJDK. JavaFX has its own set of modules, and developers can take a call on bundling it in their applications, create their own JRE or bundled in an SDK. So, it would be incorrect to assume that JavaFX would be included in your Java SDK. Also, it is interesting to note that JavaFX assumes that it would be loaded via a module, so it is important for your runtime to know JavaFX libraries. But don’t let this worry you. Johan mentions that they have created Maven and Gradle plugins that take care of configuring the module path for your JavaFX applications. Developers can also visit https://openjfx.io which includes lots of information on JavaFX – what it is, downloading it, documentation, code samples and steps to get started, community contribution (including links to the amazing possibilities with JavaFX).

Code demonstration – Getting started with JavaFX in IntelliJ IDEA

Johan demonstrated how to create a ‘HelloWorld’ JavaFX application in IntelliJ IDEA using Maven (please refer to the video for all the details). He pointed out that if developers are attempting this step for the first time, they might need to add the archetype ‘org.openjfx:javafx-maven-archetypes’, else they can just select it {{how?}}.

After filling in the project name and other fields in the project wizard, Johan talked a bit about configuring the properties. He edited the value for the ‘archetypeArtifactId’ property and added another property, javafx-version, which he set to 15.0.1. This lets developers create a basic JavaFX project.

Addressing developers’ concerns about running JavaFX applications on classpath instead of the module paths, which might or might not work, Johan re-emphasized the benefit of using plugins that would configure the module path and classpath. Johan also modified this basic application.

You can use this link to download IntelliJ IDEA today.

What can you do with JavaFX

Johan shares four examples of amazing JavaFX applications that are used in science and industry. Please refer to the recorded session to view the screenshots.

He started with a screenshot of ‘Deep Space Trajectory Explorer’, a JavaFX application which is developed by a.i.solutions, and is currently being used by NASA to visualize orbits. This is a resource- and computation-intensive application, and hardware-accelerated rendering of JavaFX is crucial for its operation.

In the next example, Johan shared a screenshot of a medical application that is created and being used by Carl Zeiss. The next screenshot showed examples of JavaFX applications running on a mobile (Devoxx conference scheduler) and another on an embedded device – a Raspberry PI with a touchscreen, running the ‘Mary had a little lamb’ application from Stephen Chin.

The last screenshot showed a JavaFX application using maps, which would use a high frame rate.

JavaFX ecosystem and development

Johan stated that the JavaFX ecosystem consists of JavaFX libraries created by companies and individuals. He mentioned that the JavaFX ecosystem leverages the JavaFX Platform to create all kinds of libraries – open source, commercial, and others. Developers use these libraries and OpenJFX distribution to create their JavaFX applications.

The OpenJFX code base is mainly developed by Gluon and Oracle, with help from a lot of passionate individuals and developers. Gluon provides long term support for JavaFX 11.

Johan shared the names of some of the most useful tools for JavaFX. He mentioned that for these tools developers would be able to access versions for Java 8 and beyond (9 to 15). This is due to the changes with the Java modules introduced in Java 9.

• Scenic View by Jonathan Giles is a real-time visual inspector for debugging JavaFX UI in your application.
• ControlsFX allows the creation of additional controls to create shiny JavaFX applications.
• TilesFX by Gerrit Grunwald can be very useful for JavaFX applications running on desktop and embedded devices.
• FXGL by Almas Baimagambetov is a game engine with 3D animation support to create JavaFX applications using Java and Kotlin.
• CalendarFX, another Open source library by Dirk Lemmermann lets you use or customize calendars in your JavaFX application.
• SceneBuilder by Gluon is probably the most-used tool for creating JavaFX applications. It allows you to create a UI by dragging and dropping controls and adjusting the layout on your page. It generates FXML for the JavaFX scene.

Johan mentioned that a lot of enterprises are using JavaFX applications in mission critical and security-intensive applications, even in the financial world. Due to the sensitive nature of the applications, these are not open-sourced. However, the building blocks they use to create such applications, like the JavaFX platform and various libraries, are open-source.

Code Demonstration – Using SceneBuilder in IntelliJ IDEA

To demonstrate SceneBuilder in IntelliJ IDEA, Johan started with a brand new project, using Maven archetype javafx-maven-archetypes:0.05. In the project properties he changed the value of ‘archetypeArtifactId’ to javafx-archetype-fxml. This will let the generated project create an fxml file.

Johan navigated to the App class and showed that its start method loads the FXML file (located in the resources folder) to create the scene, instead of creating the scene programmatically. An FXML file displays its UI components as text. You can modify this file to edit the UI for the FXML file. IntelliJ IDEA also lets you modify the UI using the Scene Builder tab. Johan demonstrated how simple it is to add a control to a .fxml file by dragging and dropping a color picker control to primary.fxml. The Scene Builder also displays properties for these UI components, which can be configured and changed programmatically.

Johan didn’t mention that you can just click on the ‘Scene Builder’ tab in IntelliJ IDEA to edit primary.fxml file, instead of opening it separately in the Scene Builder.

Next, Johan demonstrated how Scene Builder combines declarative development with programmatic control. He showed how Intention actions in IntelliJ IDEA (invoked using Alt+Enter on Windows and Linux or ⌥ Enter on macOS) let you create fields in your Controller class, which corresponds to the controls in your UI. He also showed how an FXML file can be bound to its Controller class, and how a button can be bound to the method that executes when the button is clicked.

You can use this link to download IntelliJ IDEA today.

Openjfx.io

Developers can visit the website openjfx.io to get started with JavaFX. It has detailed steps on using Maven, Gradle, and popular IDEs. The project welcomes contributions and pull requests.

JavaFX and OpenJFX

To remove any confusion between JavaFX and OpenJFX, Johan explained that JavaFX is the name of the product and OpenJFX is the name of the project under which it is developed. The project leads on OpenJFX are Kevin Rushforth from Oracle and Johan Vos from Gluon.

Release Cadence

JavaFX has a six-month release cadence and is usually released in the same week as Java. It has three types of builds: Regular builds, Early Access Builds, and LTS Builds. Johan also mentioned that the quality bar of OpenJFX projects is quite high, which implies that its early access builds include not experimental code, but features that will soon make it to the next regular build.

Structure of the JavaFX platform

Johan covered the structure of JavaFX platform briefly. He mentioned that the JavaFX platform contains the JavaFX API at the top, and low-level rendering of the OS at the bottom. These are connected with internal implementation. He showed how JavaFX uses retained mode, which makes it different from Swing, one of the existing UI Toolkits in Java. JavaFX Rendering Pipeline deals with control rendering, platform-dependent optimization, and hardware acceleration when possible, or falls back to software rendering.

Native apps

With JavaFX you can create native applications that run on all platforms, including mobile applications on iOS. You can use GraalVM to create native images to do so.

Links to additional resources

Here are the links to helpful JavaFX resources:

• openjfx.io – Start page for developers who want to learn how to get started with JavaFX. The maintainers plan to add links to tutorials and resources by the next release (March).

• https://github.com/openjdk/jfx – This is where the development of JavaFX takes place. Recommended for experienced developers only.

• https://fxdocs.github.io/docs/html5/index.html – Community-driven documentation project.

• https://www.youtube.com/playlist?list=PL4h6ypqTi3RR_bhBk6PtLfD83YkaJXXxw – Lots of screencasts and tutorials.

• http://tutorials.jenkov.com/javafx/index.html – A great JavaFX tutorial.

You can use this link to download IntelliJ IDEA today.

Our next live stream

Our next live stream will cover ‘Using Maven in IntelliJ IDEA‘. It is scheduled for Feb 10, 2021, 4–5 pm CET. Please refer to this blog post for details.

Follow us on Twitter and subscribe to IntelliJ IDEA’s blog posts so you don’t miss any updates.

Happy developing!

Subscribe to IntelliJ IDEA Blog updates

Subscribe form

By submitting this form, I agree to the JetBrains Privacy Policy Notification icon

By submitting this form, I agree that JetBrains s.r.o. ("JetBrains") may use my name, email address, and location data to send me newsletters, including commercial communications, and to process my personal data for this purpose. I agree that JetBrains may process said data using third-party services for this purpose in accordance with the JetBrains Privacy Policy. I understand that I can revoke this consent at any time in my profile. In addition, an unsubscribe link is included in each email.

Submit

Thanks, we've got you!