Sexy Swing App – iTunes Table Header

iTunes has a unique, clean, clearly identifiable table header. Its built from few simple gradients and border colors.

It’s easy to replicate the iTunes table header in Swing by creating a TableCellRenderer that extends EmphasizedLabel (demonstrated in the Part 1 of this blog series). This renderer can then be installed as the default renderer for the table’s JTableHeader.

In order to get the selected column state, driven by user mouse events, we add a mouse listener to the table’s header component in the renderer’s constructor. This lets us render all five different states:

1. Unselected, focused
2. Unselected, pressed, focused
3. Selected, focused
4. Selected, pressed, focused
5. Unfocused

Here’s the code for the custom table header renderer:

public class ITunesTableHeaderRenderer extends EmphasizedLabel
        implements TableCellRenderer{

    private JTable fTable;
    private int fSelectedColumn = -1;
    private int fPressedColumn = -1;
    private Color fTopColor = new Color(0xdbdbdb);
    private Color fBottomColor = new Color(0xbbbbbb);

    public static final Color ITUNES_TABLE_HEADER_LEFT_UNSELECTED_BORDER_COLOR =
            new Color(0xd9d9d9);
    public static final Color ITUNES_TABLE_HEADER_LEFT_PRESSED_UNSELECTED_BORDER_COLOR =
            new Color(0xc0c0c0);
    public static final Color ITUNES_TABLE_HEADER_LEFT_SELECTED_BORDER_COLOR =
            new Color(0xabbbce);
    public static final Color ITUNES_TABLE_HEADER_RIGHT_UNSELECTED_BORDER_COLOR =
            new Color(0x9c9c9c);
    public static final Color ITUNES_TABLE_HEADER_RIGHT_SELECTED_BORDER_COLOR =
            new Color(0x8a97a6);
    public static final Color ITUNES_TABLE_HEADER_BOTTOM_BORDER_COLOR =
            new Color(0x555555);
    public static final Color ITUNES_TABLE_HEADER_UNSELECTED_TOP_COLOR =
            new Color(0xdbdbdb);
    public static final Color ITUNES_TABLE_HEADER_UNSELECTED_BOTTOM_COLOR =
            new Color(0xbbbbbb);
    public static final Color ITUNES_TABLE_HEADER_SELECTED_TOP_COLOR =
            new Color(0xc2cfdd);
    public static final Color ITUNES_TABLE_HEADER_SELECTED_BOTTOM_COLOR =
            new Color(0x7d93b2);
    public static final Color ITUNES_TABLE_HEADER_PRESSED_UNSELECTED_TOP_COLOR =
            new Color(0xc4c4c4);
    public static final Color ITUNES_TABLE_HEADER_PRESSED_UNSELECTED_BOTTOM_COLOR =
            new Color(0x959595);
    public static final Color ITUNES_TABLE_HEADER_PRESSED_SELECTED_TOP_COLOR =
            new Color(0x96b7cb);
    public static final Color ITUNES_TABLE_HEADER_PRESSED_SELECTED_BOTTOM_COLOR =
            new Color(0x536b90);

    ITunesTableHeaderRenderer() {
        setOpaque(false);
        setFont(UIManager.getFont("Table.font").deriveFont(Font.BOLD, 11.0f));
    }

    ITunesTableHeaderRenderer(JTable table) {
        this();
        table.getTableHeader().addMouseListener(new HeaderClickHandler());
        fTable = table;
    }

    public Component getTableCellRendererComponent(
            JTable table, Object value, boolean isSelected, boolean hasFocus,
            int row, int column) {

        // determine if the window has focus.
        Window window = SwingUtilities.getWindowAncestor(fTable);
        boolean windowHasFocus = window != null && window.isFocused();

        int modelColumn = fTable.convertColumnIndexToModel(column);

        setText(value.toString());
        Border leftSpacerBorder = BorderFactory.createCompoundBorder(
                BorderFactory.createMatteBorder(0,1,0,0,
                        getLeftBorderColor(modelColumn, windowHasFocus)),
                BorderFactory.createEmptyBorder(1,4,0,4));

        Border bottomRightBorder = BorderFactory.createCompoundBorder(
                BorderFactory.createMatteBorder(0,0,1,0,
                       ITUNES_TABLE_HEADER_BOTTOM_BORDER_COLOR),
                            BorderFactory.createMatteBorder(0,0,0,1,
                        getRightBorderColor(modelColumn, windowHasFocus)));

        setBorder(BorderFactory.createCompoundBorder(
                bottomRightBorder, leftSpacerBorder));

        fTopColor = getTopColor(modelColumn, windowHasFocus);
        fBottomColor = getBottomColor(modelColumn, windowHasFocus);

        return this;
    }

    /**
     * Gets the color to use as the top gradient color. This color takes into account window
     * focus as well as the selection state of the column.
     */
    private Color getTopColor(int column, boolean windowHasFocus) {
        Color retVal;

        if (!windowHasFocus) {
            retVal = ITUNES_TABLE_HEADER_UNSELECTED_TOP_COLOR;
        } else if (column == fSelectedColumn && column == fPressedColumn) {
            retVal = ITUNES_TABLE_HEADER_PRESSED_SELECTED_TOP_COLOR;
        } else if (column == fSelectedColumn) {
            retVal = ITUNES_TABLE_HEADER_SELECTED_TOP_COLOR;
        } else if (column == fPressedColumn) {
            retVal = ITUNES_TABLE_HEADER_PRESSED_UNSELECTED_TOP_COLOR;
        } else {
            retVal = ITUNES_TABLE_HEADER_UNSELECTED_TOP_COLOR;
        }

        return retVal;
    }

    /**
     * Gets the color to use as the bottom gradient color. This color takes into account window
     * focus as well as the selection state of the column.
     */
    private Color getBottomColor(int column, boolean windowHasFocus) {
        Color retVal;

        if (!windowHasFocus) {
            retVal = ITUNES_TABLE_HEADER_UNSELECTED_BOTTOM_COLOR;
        } else if (column == fSelectedColumn && column == fPressedColumn) {
            retVal = ITUNES_TABLE_HEADER_PRESSED_SELECTED_BOTTOM_COLOR;
        } else if (column == fSelectedColumn) {
            retVal = ITUNES_TABLE_HEADER_SELECTED_BOTTOM_COLOR;
        } else if (column == fPressedColumn) {
            retVal = ITUNES_TABLE_HEADER_PRESSED_UNSELECTED_BOTTOM_COLOR;
        } else {
            retVal = ITUNES_TABLE_HEADER_UNSELECTED_BOTTOM_COLOR;
        }

        return retVal;
    }

    private Color getLeftBorderColor(int column, boolean windowHasFocus) {
        Color retVal;

        if (!windowHasFocus) {
            retVal = ITUNES_TABLE_HEADER_LEFT_UNSELECTED_BORDER_COLOR;
        } else if (column == fSelectedColumn && column == fPressedColumn) {
            retVal = ITUNES_TABLE_HEADER_LEFT_SELECTED_BORDER_COLOR;
        } else if (column == fSelectedColumn) {
            retVal = ITUNES_TABLE_HEADER_LEFT_SELECTED_BORDER_COLOR;
        } else if (column == fPressedColumn) {
            retVal = ITUNES_TABLE_HEADER_LEFT_PRESSED_UNSELECTED_BORDER_COLOR;
        } else {
            retVal = ITUNES_TABLE_HEADER_LEFT_UNSELECTED_BORDER_COLOR;
        }

        return retVal;
    }

    private Color getRightBorderColor(int column, boolean windowHasFocus) {
        return windowHasFocus && column == fSelectedColumn
                ? ITUNES_TABLE_HEADER_RIGHT_SELECTED_BORDER_COLOR
                : ITUNES_TABLE_HEADER_RIGHT_UNSELECTED_BORDER_COLOR;
    }

    @Override
    protected void paintComponent(Graphics g) {
        Graphics2D graphics = (Graphics2D) g.create();

        Paint paint = new GradientPaint(
                0, 0, fTopColor, 0, getHeight(), fBottomColor);

        graphics.setPaint(paint);
        graphics.fillRect(0,0,getWidth(),getHeight());

        graphics.dispose();

        super.paintComponent(g);
    }

    private class HeaderClickHandler extends MouseAdapter {

        private boolean mouseEventIsPerformingPopupTrigger = false;

        public void mouseClicked(MouseEvent mouseEvent) {
            // if the MouseEvent is popping up a context menu, do not sort
            if (mouseEventIsPerformingPopupTrigger) return;

            // if the cursor indicates we're resizing columns, do not sort
            if (fTable.getTableHeader().getCursor() == Cursor.getPredefinedCursor(Cursor.E_RESIZE_CURSOR)) {
                return;
            }

            final TableColumnModel columnModel = fTable.getColumnModel();
            int viewColumn = columnModel.getColumnIndexAtX(mouseEvent.getX());
            fSelectedColumn = fTable.convertColumnIndexToModel(viewColumn);

            fTable.getTableHeader().repaint();
        }

        public void mousePressed(MouseEvent mouseEvent) {
            this.mouseEventIsPerformingPopupTrigger = mouseEvent.isPopupTrigger();

            if (fTable.getTableHeader().getCursor() != Cursor.getPredefinedCursor(Cursor.E_RESIZE_CURSOR)) {
                final TableColumnModel columnModel = fTable.getColumnModel();
                int viewColumn = columnModel.getColumnIndexAtX(mouseEvent.getX());
                fPressedColumn = fTable.convertColumnIndexToModel(viewColumn);

                fTable.getTableHeader().repaint();
            }
        }

        @Override
        public void mouseReleased(MouseEvent e) {
            fPressedColumn = -1;
            fTable.getTableHeader().repaint();
        }
    }
}

To install this renderer, simply set the default renderer on the JTable’s JTableHeader like this:

table.getTableHeader().setDefaultRenderer(new ITunesTableHeaderRenderer(this));

There’s one last bit of subtlety to handle (and subtly is the name of the game!), namely the upper right hand corner of the enclosing JScrollPane. By default, that corner will be blank white, which sticks out like a sore thumb. To paint that area with the appropriate gradient, you can do either of the following:

• Call jscrollPane.setCorner(JScrollPane.UPPER_RIGHT_CORNER, new ITunesTableHeaderRenderer())
• Override the configureEnclosingScrollPane method of JTable, should you be extending that class (this is the technique I used):

      @Override
      protected void configureEnclosingScrollPane() {
          super.configureEnclosingScrollPane();
          Container p = getParent();
  
          if (p instanceof JViewport) {
              Container gp = p.getParent();
              if (gp instanceof JScrollPane) {
                  JScrollPane scrollPane = (JScrollPane)gp;
                  ITunesTableHeaderRenderer renderer = new ITunesTableHeaderRenderer();
                  renderer.setBorder(BorderFactory.createMatteBorder(0,0,1,0,
                         ITUNES_TABLE_HEADER_BOTTOM_BORDER_COLOR));
                  scrollPane.setCorner(JScrollPane.UPPER_RIGHT_CORNER, renderer);
              }
          }
      }
  

The latter technique is a little more self encapsulated, though not quite as clean.