Romain Guy's Blog

August 2005 Archives

Kickin', rockin', jammin' FX for Swing

Special Effects?

SwingX, 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. If you have a java.net login, you can follow the instructions 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.

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

FX Demo (run it)

But enough about the past, what can we build today with FX? The CVS repository contains a demo called DropShadowDemo showing how to use all the available components to produce the following UI:

You can also run this demo right now.

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.

Despite the complex visual result, building this UI is very easy:

JPanel panel = new JPanel(new StackLayout());

ImageIcon icon = new ImageIcon(getClass().getResource("images/subject.png"));
picture = new JLabel(icon); 

dropShadowPanel = new DropShadowPanel(new BorderLayout());
dropShadowPanel.setDistance(10);
dropShadowPanel.add(picture);

JPanel buttons = new JPanel();
buttons.setOpaque(false);
buttons.add(new JButton("About"));
buttons.add(new JButton("Exit"));
dropShadowPanel.add(buttons, BorderLayout.SOUTH);

JPanel debugPane = buildDebugPane();
debugPane.setOpaque(false);
dropShadowPanel.add(debugPane, BorderLayout.EAST);

panel.add(new CheckboardPanel(), StackLayout.BOTTOM);
panel.add(dropShadowPanel, StackLayout.TOP);

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:

dropShadowPanel.setAngle(90);
dropShadowPanel.getShadowFactory().setColor(Color.GREEN);

This is just the beginning and we have a lot of ideas for FX as well as (almost) ready to roll code. Don't be shy and come join us :)

Is an Open Source effort transferable?

Get to love web development

<web-app>
  <display-name>Hello World Wicket</display-name>
  <servlet>
    <servlet-name>HelloWorldApplication</servlet-name>
    <servlet-class>wicket.protocol.http.WicketServlet</servlet-class>
    <init-param>
      <param-name>applicationClassName</param-name>
      <param-value>HelloWorldApplication</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>

  <servlet-mapping>
    <servlet-name>HelloWorldApplication</servlet-name>
    <url-pattern>/helloworld/*</url-pattern>
  </servlet-mapping>

import wicket.protocol.http.WebApplication;

public class HelloWorldApplication extends WebApplication {
  public HelloWorldApplication() {
    getPages().setHomePage(HelloWorldPage.class);
  }
}

<html>
  <head>
    <title>Hello World Wicket</title>
  </head>
  <body>
    <span wicket:id="message">Message placeholder</span>
  </body>
</html>

import wicket.markup.html.WebPage;
import wicket.markup.html.basic.Label;

public class HelloWorldPage extends WebPage {
  public HelloWorldPage() {
    add(new Label("message", "Hello World !"));
  }
}

This work is licensed under a Creative Commons License.