Java User Interface Development [+JavaFX]

Java is one of the most popular programming languages worldwide. Many businesses use mobile, desktop and embedded Java applications in their processes. Most of these apps have an interface that allows users to interact with the software and perform tasks. In this article, we’ll look at how to create a graphical user interface (GUI) in Java.

SaM Solutions’ seasoned and proactive Java engineering team provides end-to-end Java software development services.

Generally speaking, a user interface is a display comprising visual elements through which users can communicate with the system. Interface development should be based on the usability principle, keeping the end user in mind. Your interface should be easy to navigate and intuitive, which means that users looking at the application for the first time see familiar elements and can find or do what they need to immediately.

Traditional interface elements include:

• buttons
• checkboxes
• text fields
• dropdown lists
• dialog windows
• sidebars
• banners
• icons
• toggles
• containers
• sliders
• pagination, etc.

These and other graphical components allow users to navigate an application, search for information, select options, change settings, input data, and perform other actions to make the program operate and deliver the required result. The working principle is based on specific methods that developers add to interface elements and that handle events associated with these elements.

To implement the interface design, desktop app developers choose appropriate programming tools. There are plenty of libraries and frameworks that provide ready-made components for user interfaces, so developers don’t need to create everything from scratch. With the help of API documentation and templates, software engineers can reuse available graphical classes for creating new apps.

Most Popular Java Toolkits

There are plenty of UI development tools you can choose from. Here is a brief overview of the four most popular Java user interface toolkits.

Abstract Window Toolkit (AWT)

AWT is the first Java library for user interface development, released by Sun Microsystems with the first version of Java in 1995. Initially, it was used to support primitive animation applets for web browsers. Today, AWS is rarely used to create simple user interfaces. For instance, it’s frequently used to create embedded solutions for devices with limited resources based on Java ME support AWT.

The library has a simple architecture, a reliable event-handling model, a layout manager and all classes for creating graphics and images.

Due to the native user interface components, GUI programs written in AWT have a native look-and-feel when running on various platforms (Windows, Mac).

However, this toolkit is not sufficient for developing full-fledged interfaces. But it’s currently part of the Java Foundation Classes (JFC), a standard API for GUI implementation in Java programs, so it acts as a standard API for interface programming.

Swing

In 1998, Sun Microsystems released Swing, the next-generation lightweight UI toolkit based on AWT that enabled full-scale enterprise development in Java. Swing offered more opportunities to developers:

• A modular architecture that allows you to customize elements
• A comprehensive set of widgets and other components (twice as many as in AWS)
• Advanced components such as trees and tables
• An extended event-handling mechanism with more handlers to define more events
• Three types of containers (panel, frame, dialog), which simplify the organization of UI elements

Swing was included in Java Standard Edition in 2007 and has been widely popular among Java developers ever since. Unfortunately, the UI building process with Swing is rather complicated due to its slow speed and lack of native features.

Standard Widget Toolkit (SWT)

An alternative to AWT and Swing, SWT was developed at IBM and released in 2003. This free, open-source toolkit for developing graphical user interfaces in Java is currently maintained by the Eclipse Foundation.

SWT is not an independent library, but a cross-platform wrapper for specific graphics libraries. It is OS-agnostic and uses Java Native Interface to access native libraries for the given operating system.

With SWT, developers create more efficient apps due to the full support of native features, fast loading speed, smaller memory usage and easy programming.

JavaFX

The youngest UI framework is JavaFX. It was released by Sun Microsystems in 2008, which was then bought by Oracle Corporation in 2010. So, JavaFX gained popularity under Oracle. Swing and AWT are now supported by Oracle as well.

Since JavaFX provides a variety of opportunities to develop amazing applications with rich interfaces, we’ll look at this tool in more detail below.

JavaFX Overview

Today, it is highly recommended for Java developers to learn JavaFX because this platform provides advanced capabilities for creating modern applications. It should be said that JavaFX is an open-source platform — the result of collaborative work of numerous companies, developers and enthusiasts worldwide. The vibrant community has created and supports a fully featured set of media packages and graphics, which you can use to develop client apps for Java-based desktop, mobile and embedded systems, which will run on almost all devices.

The JavaFX library comes with Java 8, 9 and 10, so no additional installation is required to get started.

JavaFX App Architecture

The hierarchy of a JavaFX application includes Stage, Scene, Graphs and Nodes.

• Stage — the main container or the outer frame of an application that corresponds to a window. If you need more than one window for your app, you can create additional stage objects.

The javafx.stage.Stage class represents the top level JavaFX container. The primary Stage is constructed by the platform. Additional Stage objects may be constructed by the application. The Stage class has two constructors: empty and with a StageStyle style parameter.

• Scene — a container with UI elements (media, images, layouts) attached to the stage. You can create several scene objects and the stage will switch between them, displaying one scene at a time.

The javafx.stage.Scene class is the container for all content in a scene graph. The background of the scene is filled as specified by the fill property. The Scene has many constructors, where parent, width, height, fill, depthBuffer, antiAliasing and other options can be customized.

• Scene graph — a set of visual elements attached to the scene.
• Node — each visual element in the scene graph. All nodes have their ID, style, effects, event handlers, state.

Key Features

Prism — a high-performance, hardware-accelerated graphics pipeline used for smooth graphics rendering.

Glass —  a windowing toolkit layer to connect JavaFX to native operating systems.

Media engine — the pipeline based on the GStreamer framework that enables multimedia content playback.

FXML — a special markup language created by Oracle that allows for design abstraction for the program logic.

Scene Builder — a bridge tool between designer and developers. It allows you to create interactive UI designs and directly add them to the app business logic.

CSS styling support — developers can customize visual components using a standard web technology CSS adjusted to JavaFX.

WebView — this component allows you to render HTML content as it supports web technologies, including HTML5, SVG, CSS, JavaScript, DOM.

2D rendering — JavaFX provides the ability to draw shapes in two dimensions (XY).

3D rendering — JavaFX provides the ability to draw shapes in three dimensions (XYZ).

Dragboard — a tool for drag-and-drop transfer of various types of data such as images, text, files, urls, etc.

TestFX — a testing tool allowing you to preview UI, simulate user interactions with elements and debug them.

Advantages

• Design flexibility due to a rich set of graphical elements
• Dynamic interfaces due to powerful animation, special effects, 2D/3D rendering
• Vast support of the growing community
• Mobile and embedded support with a combination of JavaFXPorts and Gluon Mobile
• Native packaging

Disadvantages

• Heavyweight applications
• Not an easy tool for newbies
• Hard to compete with the growing web-based technologies; for example, can be supplanted by Electron

Steps of User Interface Development

To start JavaFX development, you will definitely need JDK (from 11 to 17 or latest), IDE (IntelliJ, NetBeans, Eclipse or Visual Studio Code) and a build system (Maven or Gradle). In this section, I will show you how to build a simple desktop JavaFX app using OpenJDK 17, Maven and Eclipse. This sample app will load a corporate logo from the Internet and adjust the background color of the window.

I will omit the step with the JDK and Maven installation. Just make sure they are available via command, as follows:

c:\Work\Projects\JavaFX>mvn -version
Apache Maven 3.8.4 (9b656c72d54e5bacbed989b64718c159fe39b537)
Maven home: c:\Work\Tools\apache-maven-3.8.4
Java version: 17.0.2, vendor: Oracle Corporation, runtime: c:\JDK\jdk-17.0.2
Default locale: en_US, platform encoding: Cp1252
OS name: "windows 11", version: "10.0", arch: "amd64", family: "windows"

To eliminate the necessity to download JavaFX SDK and to use Maven, the JavaFX team has created Maven Archetypes for JavaFX. They help us create a skeleton of our future JavaFX application. Just run the following command:

mvn archetype:generate -DarchetypeGroupId=org.openjfx
-DarchetypeArtifactId=javafx-archetype-simple -DarchetypeVersion=0.0.3
-DgroupId=com.samsolutions.javafx -DartifactId=imageapp -Dversion=1.0.0
-Djavafx-version=17.0.1

Make sure your IDE is set up with the correct Maven and JDK runtimes and then import the generated project imageapp from above. Fix pom.xml with Java 17, which should look like in the screenshot below:

The following dependency is needed in order to work with rich UI controls and graphics:

<dependency>
  <groupId>org.openjfx</groupId>
  <artifactId>javafx-controls</artifactId>
  <version>17.0.1</version>
</dependency>

This is the entry point into our generated sample HelloWorld. The Static method launch() from javafx.application.Application calls internal methods that initiate stage and finally call the overridden start(Stage stage) method — the main entry point for all JavaFX applications, called after the init() method has returned, and after the system is ready for the application to begin running with all graphics initialized.

Simply run this code as a Java Application and you should see this 640×480 window:

Let’s remove this label and insert an image instead — for example, a corporate logo. As it is transparent, we will additionally set a background color as follows:

This loads the image remotely in the underlying background task (backgroundLoading = true) and adjusts the background color:

MAX_RUNNING_TASKS = 4. No more than 4 images will be loaded concurrently.

Voilà! This is the result:

We now have a simple, nice-looking image application with just a few lines of code using the power that JavaFX brings to us for creating contemporary Java desktop applications.