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:
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.
- Love GridBagLayout? Learn about CSS Flexbox and CSS Grid.
- Like making your own components by extending JComponent or JPanel? Learn
about TeaVM 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.
To get started with TeaVM, read my article in Java Magazine: Java in the Browser with TeaVM.
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.
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 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
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
In the wild world of the web, components aren't nearly as well standardized or reusable. However, TeaVM 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 TeaVM 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.
JDialog makes it easy to show standard dialogs. The easiest TeaVM equivalent is to use the browser's built in dialogs:
If you want more attractive, CSS-styled dialogs, use the Flavour modal dialogs, designed to behave like Swing ones: Advanced Flavour Components
Last modified on 24 May 2020 by AO
Copyright © 2020 Andrew Oliver