Creating a UnifiedToolBarButtonUI

A little while back, I talked about creating a Unified Toolbar. In that post I included a class called an EmphasizedLabel, which was an extension of JLabel that drew emphasis color (i.e. a shadow) underneath the text.

The time came to implement a Unified Toolbar button, and I ran up against the same issue, namely the need to draw emphasized text. This time, I decided not to subclass, but instead to write a custom UI. In fact I liked the simplicity and elegance of the UI implementation so much, that I went back and created an EmphasizedLabelUI to replace EmphasizedLabel, which has the nice side effect of working with any extension of JLabel.

Extending BasicButtonUI is quite easy – much easier than trying to implement the full ButtonUI interface. Because we’re extending BasicButtonUI, though, we don’t get the icon effects provided by the Mac ButtonUI, like the pressed icon and disabled icon.

At rest
Disabled
Pressed

Creating the pressed and disabled versions of the icons is easy to achieve using a BufferedImage and a mask. Simply do the following:

1. In the paintIcon method, create a BufferedImage
2. Draw the icon into that image
3. Fill a rectangle with the appropriate transparency over the icon
4. Draw the buffered image into the passed graphics context

We need the extra step of drawing into a BufferedImage of type BufferedImage.TYPE_INT_ARGB because the standard buffer a component draws into doesn’t have an alpha channel (Chet Hasse explains this in greater detail in his book, Filthy Rich Clients).

Finally, we override the paintText method and do the following:

1. Set the graphics context color to the emphasis color
2. Call SwingUtiltites2. drawStringUnderlineCharAt, shifting the y value down a pixel
3. Set the graphics context color to the text color
4. Call BasicGraphicsUtils.drawStringUnderlineCharAt

Here’s the full code:

public class UnifiedToolbarButtonUI extends BasicButtonUI {
    
    private static final Color EMPTY_COLOR = new Color(0,0,0,0);
    private static final Color PRESSED_BUTTON_MASK_COLOR = new Color(0,0,0,116);
    private static final Color DISABLED_BUTTON_MASK_COLOR = new Color(0,0,0,39);

    @Override
    protected void installDefaults(AbstractButton b) {
        super.installDefaults(b);
        // TODO you should save the original values before setting them below.
        b.setHorizontalTextPosition(AbstractButton.CENTER);
        b.setVerticalTextPosition(AbstractButton.BOTTOM);
        b.setIconTextGap(0);
        b.setMargin(new Insets(0,0,0,0));
        b.setFont(UIManager.getFont("Button.font").deriveFont(11.0f));
    }

    @Override
    protected void uninstallDefaults(AbstractButton b) {
        super.uninstallDefaults(b);
        // TODO you should install the original values overridden when install 
        //          was called this.
    }

    @Override
    protected void paintIcon(Graphics g, JComponent c, Rectangle iconRect) {
        AbstractButton b = (AbstractButton) c;
        ButtonModel model = b.getModel();

        // create a buffered image to draw the icon and mask into.
        BufferedImage image = new BufferedImage(iconRect.width, iconRect.height,
                BufferedImage.TYPE_INT_ARGB);
        // create a graphics context from the buffered image.
        Graphics2D graphics = (Graphics2D) image.getGraphics();
        // paint the icon into the buffered image.
        b.getIcon().paintIcon(c, graphics, 0, 0);

        // set the composite on the graphics context to SrcAtop which blends the
        // source with the destination, and thus transparent pixels in the
        // destination, remain transparent.
        graphics.setComposite(AlphaComposite.SrcAtop);

        // set the mask color based on the button models state.
        if (!model.isEnabled()) {
            graphics.setColor(DISABLED_BUTTON_MASK_COLOR);
        } else if (model.isArmed()) {
            graphics.setColor(PRESSED_BUTTON_MASK_COLOR);
        } else {
            graphics.setColor(new Color(0,0,0,0));
        }

        // fill a rectangle with the mask color.
        graphics.fillRect(0, 0, iconRect.width, iconRect.height);

        graphics.dispose();
        g.drawImage(image, iconRect.x, iconRect.y, null);
    }

    @Override
    protected void paintText(Graphics g, JComponent c, Rectangle textRect, String text) {
        Graphics2D graphics = (Graphics2D) g.create();

        AbstractButton b = (AbstractButton) c;
        ButtonModel model = b.getModel();
        FontMetrics fm = c.getFontMetrics(c.getFont());

        // 1) Draw the emphasis text.
        graphics.setColor(model.isArmed()
                ? EMPTY_COLOR
                : EmphasizedLabelUI.DEFAULT_EMPHASIS_COLOR);
        BasicGraphicsUtils.drawStringUnderlineCharAt(graphics, text, -1,
                textRect.x, textRect.y + 1 + fm.getAscent());

        // 2) Draw the text.
        graphics.setColor(model.isEnabled()
                ? EmphasizedLabelUI.DEFAULT_FOCUSED_FONT_COLOR
                : EmphasizedLabelUI.DEFAULT_DISABLED_FONT_COLOR);
        BasicGraphicsUtils.drawStringUnderlineCharAt(graphics, text, -1,
                textRect.x, textRect.y + fm.getAscent());

        graphics.dispose();
    }
}

Advertisement