Kickin', rockin', jammin' FX for Swing

SwingLabs provides a variety of awesome components and frameworks. It now brings cool eye-candy effects for your Swing apps.

Special Effects?

SwingX[2], one of the SwingLabs projects, offers a very interesting set of components sitting on top of Swing. Just before JavaOne, Richard Bair and I came up with a new Swing border you can use to cast shadows around your components. Creating this simple graphical effect gave us a lot of weird ideas and we decided it would be great to have a separate incubator dedicated to that kind of special effects.

Enter FX, a new SwingX module you can check out today in the incubator[3]. If you have a java.net login, you can follow the instructions[4] to get the source code from the CVS. You'll find the FX module in the directory src/fx/. Don't forget to edit the file build.properties to be able to build and generate the documentation with Ant.

FX Components

FX aims to become a playground for developer to try out new graphical effects for Swing user interfaces. To start this new project we picked a few things I did for previous demos, cleaned them and, best of all, documented them. As of today, FX offers the following components:

CheckboardPanel: A panel with a checkboard pattern in the background. You can see this kind of panel in photo editing applications like Photoshop or The GIMP. This panel is useful to debug transparency issues or drop shadows.

DropShadowPanel: A panel which cast a drop shadow for all its children. If you want to add nice shadow borders to your UI, just slam your components in this panel and forget about custom painting code or special borders.

StackLayout: This layout manager can be used to stack up components, as you would do with the layers stack of your favorite photo editing application. This manager avoid to put containers into other containers when you want to create complicated drawings and keep elements separated.

ShadowFactory: This utility class generates a shadow from a specified picture. The drop shadow panel uses this class to cast its children shadows.

While those components are not very fancy themselves, they help you create fancier UI. For instance, I used the stack layout at JavaOne to create the following login screen:

[5]

Here is a detailled view showing how the stack layout is used to build this UI:

In this demo, a stack layout contains a checkboard panel and a drop shadow panel which contains all the Swing widgets. You can change the shadows appearance by using the controls on the right. You can even change the displayed picture. The two buttons at the bottom do not work, they are just here to desmontrate how well this panel works with Swing components.

If you ignore the clutter and concentrate on the FX API, you'll see you need one line to create a stacked panel, one line to create a drop shadow panel and one line to create the checkboard panel. Please refer to DropShadowPanel and ShadowFactory javadocs to see how you can tweak the shadows appearance. Here is how, for instance, to change the shadow's angle and color: