Walker Software Weblog

Or maybe I should call this “Unified Dark Trees” if you’ve read John Gruber’s The iTunes 5 Announcement From the Perspective of an Anthropomorphized Brushed Metal User Interface Theme (warning: foul language). Anywho, in a previous post, I was creating an iTunes 5 like interface for an application I’m writing. This post is about the tree control. In the last post, we fixed the colors. In this post we override BasicTreeUI to paint the entire row with selection. Below is a screenshot with Swing Ocean as the backing LAF.

First create a class that extends javax.swing.plaf.basic.BasicTreeUI.

public class TigerTreeUI extends BasicTreeUI{

    /** Creates a new instance of TreeUI */
    public TigerTreeUI() {
        super();
    }

And plug it into a tree with tree.setUI(new TigerTreeUI()); It looks the same except with lines connecting nodes. BasicTreeUI doesn’t contain a method to paint an entire row, but after poking around a little I found the place. We need to override paintHorizontalPartOfLeg and paintVerticalPartOfLeg. Like so…

    protected void paintHorizontalPartOfLeg(Graphics g, Rectangle clipBounds, Insets insets,
Rectangle bounds, TreePath path, int param, boolean param6,
boolean param7, boolean param8) {

        boolean selected = treeSelectionModel.isPathSelected(path);

        if(selected){
            DefaultTreeCellRenderer ren = (DefaultTreeCellRenderer)tree.getCellRenderer();
            Color c = ren.getBackgroundSelectionColor();
            g.setColor(c);
            g.fillRect(0,bounds.y,clipBounds.width,bounds.height);
        }
        // Do not call super. We don't want the lines.
    }

    protected void paintVerticalPartOfLeg(Graphics g, Rectangle clipBounds,
            Insets insets, TreePath path) {
        // Do not call super. We don't want the lines.
    }

If you’re using a mac. This will look right now. But we can override the expand and collapse icons for our non mac friends.

    public void installUI(javax.swing.JComponent jComponent) {

        super.installUI(jComponent);
        try{
            expandedIcon = new ImageIcon(getClass().getResource("images/expanded.png"));
            collapsedIcon = new ImageIcon(getClass().getResource("images/collapsed.png"));
        }catch(Exception e){
            e.printStackTrace();
        }
    }

expandedIcon and collapsedIcon are provided by BasicTreeUI. This looks good, there seems to be some problems when scrolling the tree. iTunes actually uses a gradient here but I’m not going to bother with that because iTunes only allows single selection and I’d like to keep multi-select (good for mass deleting). I don’t think a gradient with multi-select would look good.

Resources:
expanded.png
collapsed.png
TigerTreeUI.java