Unified Toolbar in Swing not working properly

Question

I followed this tutorial: http://explodingpixels.wordpress.com/2008/05/02/sexy-swing-app-the-unified-toolbar/ to create a native looking toolbar on the mac. The problem might be that I'm not adding it correctly to the JFrame, or maybe misunderstanding something.

The way the program should work is adding a panel to the toolbar (or underneath it, I think- it was not clear). Just in case there is confusion: The unified toolbar is the regular toolbar, only with buttons inside it as well.

This is what is should look like:

This is what it does look like: (It shouldn't matter that I'm using different looking buttons, should it?)

Code for the Unified Toolbar Panel:

package gui;
import java.awt.Color;
import java.awt.Window;

import javax.swing.BorderFactory;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
import javax.swing.border.Border;

import com.jgoodies.forms.factories.Borders;

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);
    }
}

Code for the JFrame:

package gui;

import java.awt.EventQueue;
import gui.*;
import javax.swing.JFrame;
import javax.swing.JButton;
import java.awt.BorderLayout;

import javax.swing.ImageIcon;
import javax.swing.JSplitPane;
import javax.swing.JPanel;
import javax.swing.JLabel;
import javax.swing.UIManager;
import javax.swing.UIManager.LookAndFeelInfo;
import javax.swing.UnsupportedLookAndFeelException;

import java.awt.Color;
import javax.swing.plaf.metal.*;
public class HaiCue extends JFrame{
    /**
     * Launch the application.
     */
    public static void main(String[] args) {

        EventQueue.invokeLater(new Runnable() {
            public void run() {
                try {
                    HaiCue window = new HaiCue();
                    window.setVisible(true);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        });
    }

    /**
     * Create the application.
     */
    public HaiCue() {
        initialize();
    }

    /**
     * Initialize the contents of the frame.
     */
    private void initialize() {
        setForeground(Color.BLACK);
        setBounds(100, 100, 450, 300);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        getRootPane().putClientProperty("apple.awt.brushMetalLook", Boolean.TRUE);

        JPanel panel = new UnifiedToolbarPanel();
//      panel.setLayout(new WrapLayout());
        add(panel, BorderLayout.NORTH); //<--- I think the problem may be how I add it... I have tried several different ways.

        ToolButton lblStop = new ToolButton("Stop", new ImageIcon(getClass().getResource("/images/stop.png")));
        panel.add(lblStop);

        ToolButton btnToolBox = new ToolButton("Tool Box", new ImageIcon(getClass().getResource("/images/Toolbox.png")));
        panel.add(btnToolBox);

        ToolButton btnInspector = new ToolButton("Inspector", new ImageIcon(getClass().getResource("/images/Toolbox.png")));
        panel.add(btnToolBox);
    }
}

I'm running OSX 10.8.2 and Java 1.7.0_13

Answer 1

The preferred size of the button(s) in a tool bar hinges critically in the size of the Icon supplied. Note that pack() is essential to causing a "Window to be sized to fit the preferred size and layouts of its subcomponents." The example below ignores some the finer points adduced in the article, but it captures the essential geomtry. Try it with OptionPane.warningIcon to see the effect.

import java.awt.BorderLayout;
import java.awt.Component;
import java.awt.EventQueue;
import java.awt.FlowLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JTextArea;
import javax.swing.JToolBar;
import javax.swing.UIManager;

/**
 * @see http://stackoverflow.com/a/16694524/230513
 */
public class Main {

    private void display() {
        JFrame f = new JFrame("Main");
        f.getRootPane().putClientProperty("apple.awt.brushMetalLook", true);
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.add(createToolBar(f), BorderLayout.NORTH);
        f.add(new JTextArea(5, 16));
        f.pack();
        f.setLocationRelativeTo(null);
        f.setVisible(true);
    }

    private JToolBar createToolBar(final Component parent) {
        JToolBar bar = new JToolBar("Toolbar");
        bar.setFloatable(false);
        bar.setLayout(new FlowLayout(FlowLayout.LEFT, 0, 0));
        bar.add(createButton("FileChooser.detailsViewIcon"));
        bar.add(createButton("FileChooser.homeFolderIcon"));
        bar.add(createButton("FileChooser.newFolderIcon"));
        return bar;
    }

    private JButton createButton(String s) {
        JButton b = new JButton(UIManager.getIcon(s));
        b.setHorizontalTextPosition(JButton.CENTER);
        b.setVerticalTextPosition(JButton.CENTER);
        return b;
    }

    public static void main(String[] args) {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                new Main().display();
            }
        });
    }
}

Answer 2

Please check the Last Lien of Code,

 panel.add(btnInspector );// repalce btnInspector  with btnToolBox