Put your user interface on a diet

Replace those heavyweight components with leaner, meaner lightweight components

By Todd Sundsted, JavaWorld.com, 03/01/98

One of the key factors contributing to Swing's importance is that each user interface component in the Swing set is a lightweight component.

The user interface components supplied with early versions of Java -- which are still present in the java.awt package -- are called heavyweight components. They are called heavyweight components because a native user interface component is used to display each Java component -- a technique that gives Java applications the same look and feel as other applications written for a particular platform. These components are considered heavy because they require twice as many classes to implement -- a Java class plus its associated native class. They also have the unfortunate side effect of being opaque, which means that they can't be used to implement components with transparent regions, or components of non-rectangular shapes.

Lightweight components, on the other hand, have no native twin -- they are free to implement their own look and feel. Consequently, lightweight components were used as the basis for the Swing components in the JFC.

To better understand the technology behind the Swing set of user interface components and to help you see just how powerful lightweight components are, we'll build a lightweight component of our own. Because buttons are ubiquitous user interface components and are easy to understand in terms of their behavior, we'll implement a circular button. I'll assume you know how the Java UI model works as defined by the AWT and that you understand the new Java 1.1 event model.

Now, let's go to work!

Building a simple lightweight button component

We begin by creating a subclass of class java.awt.Component. Both heavyweight components and lightweight components share this common ancestor. By default, subclasses of class Component aren't associated with a native component, so they are "light" by default.

Because lightweight components lack an associated native class, they have no visual representation. Therefore, they must handle their own presentation, which they do by redefining their paint() method.

The following paint() method draws a circular button with a label. The label value (in _strLable) is set in the constructor.

   public void paint(Graphics g)

   {

      Dimension dim = getSize();

      int n = (dim.width < dim.height ? dim.width : dim.height) - 1;





      // fill the interior of the button

      g.setColor(getBackground());

      g.fillArc(6, 6, n - 12, n - 12, 0, 360);





      // draw a thin border around the button's interior

      g.setColor(getBackground().darker().darker().darker().darker());

      g.drawArc(6, 6, n - 12, n - 12, 0, 360);





      // draw a thin ring around the entire button

      g.drawArc(0, 0, n, n, 0, 360);





      // draw the button's label

      Font font = getFont();

      if (font != null)

      {

         FontMetrics fontmetrics = getFontMetrics(font);

         g.setColor(getForeground());

         g.drawString(_strLabel,

                      n/2 - fontmetrics.stringWidth(_strLabel)/2,

                      n/2 + fontmetrics.getMaxDescent());

      }

Here's what the circular buttons look like so far. Go ahead and try them out.