Migrating From Swing To TeaVM

Swing is a fantastic, cross-platform toolkit for building rich user interfaces in Java. 5-10 years ago, when people downloaded applications with installers, and when applets could launch Swing apps in the browser, it was the best tool for building UIs. Unfortunately, in today's world few people use software that isn't a website or an app. Despite numerous valiant attempts, nobody has gotten Swing to work well in either environment.

Fortunately, much of what you like about Swing is available in TeaVM and the Flavour toolkit:

Love GridBagLayout? Learn about CSS Flexbox and CSS Grid.
Like making your own components by extending JComponent or JPanel? Learn about Flavour components.
Like styling your app with Swing Look and Feels? Learn how to use CSS to style your app.
Like easy dialogs with JDialog? Learn how to use the browser built-in dialogs, or create your own.

Note: TeaVM is for building web applications. While these applications work great in mobile web browsers, sometimes you may want to create an actual app, for distribution in an app store. For that situation you should use Codename One.

Getting Started

To get started with TeaVM and Flavour, read my article in Java Magazine: Java in the Browser with TeaVM.

Responsive UIs

One critical difference between most Swing UIs and good web UIs is responsiveness. Most Swing UIs assumed a fairly traditional range of desktop monitor resolutions in landscape orientation. Your GridBagLayout would let your components stretch to fill a larger screen, but it was uncommon to change from a 3-column layout to a 2-column or 1-column layout if the window became narrow enough.

Today it is expected that a good web app will be responsive, meaning it changes its layout and look and feel when the display is smaller or in portrait orientation, like on a cell phone.

Layout

GridBagLayout is my number one favorite part of Swing. Powerful, flexible, and fast, once you mastered it you could lay out complex layouts with ease. The web was actually lacking good standardized layout tools for apps until recently, when CSS Flexbox and CSS Grid became widely supported in browsers.

Flexbox

Flexbox lets you lay out a row or column of components. It lets you control how the components grow, how to align them, and when to wrap them. Wrapping is very useful to making a UI responsive if you have a collection of similar components. Think about a photo sharing site or a grocery wait time tracker like CoronaWait. On a desktop system, you want to show many pictures/stores side by side. On a mobile device, there isn't room for that. Instead, you want them stacked vertically. With Flexbox this is easy. In the HTML, make a div and make it a flexbox container supporting wrapping via a CSS class. Then create a std:foreach element to create child divs, each with a CSS class with a max-width. The browser will automatically place the child divs next to each other until space is exhausted, then wrap to another row. Instant responsiveness.

Here are some specific GridBagLayout features and what to look for in Flexbox:

anchor: align-items (for the container) and align-self (for the children)
weightx/wieghty: flex-grow
fill: align-items/stretch

Components

In Swing, it is easy to make a reusable component. Extend JPanel, add your own child components, and voila, a new component that can be reused.

In the wild world of the web, components aren't nearly as well standardized or reusable. However, Flavour has solved most of the difficulties with web components. You create an HTML template, containing the markup and invoking CSS for styling. Then you create a Java view class to hold logic. The Java class specifies which template it is bound to. The template can invoke methods from the view class to get single values or lists.

For example, say your Swing UI had a JPanel with 2 JLabels and a JButton. In Flavour you would use html:text elements to add dynamic text onto the template. Then you would use an input element of type button to add a button in the template.

To take action when the button is pressed, you add an event:click attribute to the input element. The value of the attribute specifies which method to invoke from the view class.

Dialogs

JDialog makes it easy to show standard dialogs. The easiest TeaVM equivalent is to use the browser's built in dialogs: Window.alert(), Window.confirm(), and Window.prompt().

If you want more attractive, CSS-styled dialogs, use the Flavour modal dialogs, designed to behave like Swing ones: Advanced Flavour Components