How to create a modern user interface in Java

Most software needs an interface, and unless you fancy designing your own rendering pipeline, you’ll want to tap into one of the pre-existing toolkits – a package of code that does all of that for you. In this case, it’s going to be Java, and Java has a lot of them. Here’s just four:

There are plenty more, but as of 2020, the most popular toolkits are Swing and JavaFX. Both give you access to a comprehensive package of widgets, buttons and containers. Swing’s functionality is rooted in AWT, which means it has a deeper integration with operating systems, but the downside of that history is its dated look-and-feel.

If you’re looking for a modern application, JavaFX provides amazing functionality with a CSS layer that makes design easy. Its novel modularisation separates the functionality (Java), layout (mark-up) and design (CSS) to give you more flexibility in following design rules rather potentially outdated industry expectations.

As with anything else, keep your market in mind when shopping around for your toolkit. Some users actually prefer that ‘standard’ look-and-feel for their applications, but that does seem to be a trend that’s less and less common. With more applications moving online, users are coming to expect desktop applications to reflect the same contemporary, minimal design that has become popular on the web.

A contemporary look

Separating the design elements from the core code of an application can put developers off – at first glance, it just looks like extra files to maintain, test and deploy. That being said, once you get the hang of designing an interface with markup and CSS, the hybrid mindset of designer and developer can really pay off. As with anything, there are trade-offs, so here’s what you get:

• Huge flexibility in the design
• Every component can be skinned with CSS, so you have almost complete control.
• UI design can be separated into mark-up, simplifying your controller classes
• Powerful animation framework
• Almost everything’s implemented as an observable, so your controller classes can be quite concise.
• Integrated 2D and 3D rendering
• Massively extensible and supported by a growing community.

The trade-off

They’re all worth it, but before we start coding, it’s worth noting a few limitations or trade-offs that you might notice in exchange for all that flexibility you’ve gained:

JavaFX isn’t lightweight – between observables and polymorphism the runtime performance isn’t optimised. That being said, most user interfaces aren’t doing computation that needs that sort of optimisation.
Slightly more complicated set-up

Slightly trickier set-up: From 2018 (JDK 11), JavaFX was set loose from the JDK, which has given it the boost it needed in development, but it means you’re going to need to specify some module settings to get going.

Code confusion: One of the potential pitfalls of JavaFX programming can be debugging the styles. You can set the style in the markup, the CSS and programmatically.

Getting Started

public class UserInterfaceExample extends Application {
  @Override
  public void start(Stage stage) throws Exception{
      //we'll initialize our application here
      }
  public static void main(String[] args) {
      launch(args);
  }
}

We’ve created a simple example of how you can strip back the window and add your own features. Some nifty features we’ve included here are:

• SVG text strings used to set all the button shapes
• CSS gradient used to create background

We’ve even added support for the DragBoard so it can recognize files being dropped – animation included!

And there we have it – all the code can be found here:

https://github.com/edencoding/javafx-ui