Sexy Swing App – The Unified Toolbar

The unified toolbar was introduced in Tiger, and provides a distinctive look to Mac applications. Apps written for the Mac that don’t incorporate this feature tend to look decidedly “un-Mac”. Adding this prominent user interface element to your Swing UI is an easy way to give a great first impression.

With the release of Mac OS X 10.5, and Java 1.5.0_13, we Java developers gained a number of client properties, outlined in TN-2196. We’re particularly interested in apple.awt.brushMetalLook, which previously existed and was updated to paint a unified background instead of the old brushed metal look. Using this property, and a transparent component, it’s easy to create a unified toolbar in Swing.

First, set this client property:

// set custom OS X 10.5 client property.
frame.getRootPane().putClientProperty("apple.awt.brushMetalLook", Boolean.TRUE);

Next, add a custom JPanel that looks something like this:

public class UnifiedToolbarPanel extends JPanel {

    public static final Color OS_X_UNIFIED_TOOLBAR_FOCUSED_BOTTOM_COLOR =
            new Color(64, 64, 64);
    public static final Color OS_X_UNIFIED_TOOLBAR_UNFOCUSED_BORDER_COLOR =
            new Color(135, 135, 135);    

    public UnifiedToolbarPanel() {
        // make the component transparent
        setOpaque(false);
        // create an empty border around the panel
        // note the border below is created using JGoodies Forms
        setBorder(Borders.createEmptyBorder("3dlu, 3dlu, 1dlu, 3dlu"));
    }

    @Override
    public Border getBorder() {
        Window window = SwingUtilities.getWindowAncestor(this);
        return window != null && window.isFocused()
                ? BorderFactory.createMatteBorder(0,0,1,0,
                        OS_X_UNIFIED_TOOLBAR_FOCUSED_BOTTOM_COLOR)
                : BorderFactory.createMatteBorder(0,0,1,0,
                       OS_X_UNIFIED_TOOLBAR_UNFOCUSED_BORDER_COLOR);
    }
}

The key to our unified toolbar panel is making it transparent (not opaque) so that Leopard’s frame rendering shows through. Note also that we don’t need to influence the height of the unified toolbar, as there are no strict guidelines on this.

The border is created using JGoodies Forms so that we can use dialog units (DLUs) as a unit of measure – this will ensure that our UI gracefully enters the world of resolution independence. Also notice the bottom border color changes with the focus of the window – this is subtle but key detail in making a believable unified toolbar.

To make your toolbar actually useful, you can add textured buttons with icons. Make sure your icons match the OS X look – you’ll find the guildlines pretty well spelled out in the Apple Human Interface Guidelines.

In the screen shot of the Finder unified toolbar below, you’ll notice that selected icons are white with a dark gray shadow down-shifted by a pixel. Unselected icons are the inverse – dark gray with a semi-transparent white shadow down-shifted by a pixel. Icons in textured buttons are typically monochrome (though sometimes they can have the blue backlit effect).

I created my icons (   ) following this format using Adobe Fireworks.

I used a similar shadowing style to create the button group label, “View”. It isn’t just a simple JLabel, but includes a semi-transparent white shadow down-shifted by a pixel (see the above screen shot from the Finder). You can acheive this affect with an extended JLabel that looks like this:

public class EmphasizedLabel extends JLabel {

    private boolean fUseEmphasisColor;

    public static final Color OS_X_EMPHASIZED__FONT_COLOR =
            new Color(255,255,255,110);
    public static final Color OS_X_EMPHASIZED_FOCUSED_FONT_COLOR =
            new Color(0x000000);
    public static final Color OS_X_EMPHASIZED_UNFOCUSED_FONT_COLOR =
            new Color(0x3f3f3f);

    public EmphasizedLabel(String text) {
        super(text);
    }

    @Override
    public Dimension getPreferredSize() {
        Dimension d = super.getPreferredSize();
        d.height += 1;
        return d;
    }

    @Override
    public Color getForeground() {
        Color retVal;
        Window window = SwingUtilities.getWindowAncestor(this);
        boolean hasFoucs = window != null && window.isFocused();

        if (fUseEmphasisColor) {
            retVal = OS_X_EMPHASIZED__FONT_COLOR;
        } else if (hasFoucs) {
            retVal = OS_X_EMPHASIZED_FOCUSED_FONT_COLOR;
        } else {
            retVal = OS_X_EMPHASIZED_UNFOCUSED_FONT_COLOR;
        }

        return retVal;
    }

    @Override
    protected void paintComponent(Graphics g) {
        fUseEmphasisColor = true;
        g.translate(0,1);
        super.paintComponent(g);
        g.translate(0,-1);
        fUseEmphasisColor = false;
        super.paintComponent(g);
    }
}

We have to be little sneaky in the getColor method, as we can’t actually call setPaint from the paintComponent, lest we end up in a recursive loop of repaints. Also notice above that we’re taking great care to take into account the focus state of the containing Frame.

Good luck creating your own unified toolbar. I’d love to see links from your own apps that take advantage of this new capability in Swing.

Its all about the detail!