ListUIs: Adding Decorations to Cells

This is a follow-up to my previous article: TreeUI's: Adding Decorations to Cells.

What is a "Decoration" again?

A decoration is a UI component overlayed inside or on top of another component.

Muted-color minimal buttons/decorations are becoming increasingly common in modern UIs. This is great way to add extra functionality for power users without adding too much visual clutter.

Here is a screenshot of part of my current Firefox window. There are 6 decorations showing:

The star bookmarks a page.

The down arrow presents a list of recent URLs.

The circular arrow refreshes the page.

The left side of the search field lets me change search engines.

The word "Google" is also a decoration indicating what search engine is being used.

The right side of the search field commits my search.

... but there are only 3 non-decorative UI elements showing: the URL field, the history button, and the search field. The decorations add a lot of subtle controls in a small space.

As an accessibility side-note: it's worth mentioning that decorations usually do not receive keyboard focus as you navigate the interface with the tab key. They are second-class citizens when it comes to your window hierarchy. You probably need to provide alternate ways to access these features (menu shortcuts, for example) to help reach a wider target audience.

List Decorations

The section above talked about decorations in general, but what are some examples of decorations for list elements?

Above are search results in a recent youtube query: when you mouse over a thumbnail there is an optional button to add a video to your queue.

Also you could provide buttons to delete list elements, reload, or show progress indicators.

On the right is a new-ish decoration for sound files observed on Mac OS 10.7. When you mouse over the graphic: a play button fades in. When you click the play button: the outer ring appears, and the gray arc proceeds clockwise representing the playback of your sound.

The same playback controls are used for movies, however for movies the controls fade away as soon as you mouse out of the preview area.

(Traditionally these controls have been presented with a thin horizontal row of controls along the bottom of a sound/movie. I'm not trying to argue that Apple's new circular timeline is any better than a horizontal timeline: both could be presented with overlayed controls.)

Implementation

In Swing, JLists (and JTrees) use renderers, where one component is rubber stamped for every element in the list/tree.

This is a great scalable model (because tens of thousands of elements can safely be rendered without too much overhead), but it lacks mouse input. To implement decorations on a list, I developed the DecoratedListUI. This UI manages multiple ListDecorations, which are rubber-stamp overlays to your existing ListCellRenderers.

All you have to do is invoke the following:

ListDecoration[] arrayOfDecorations;
...
myList.setUI( new DecoratedListUI() );
myList.putClientProperty( DecoratedListUI.KEY_DECORATIONS, arrayOfDecorations);

Example

Here is an example that emulates the Mac playback controls with a list of 5 sounds:

You can download this jar (source included) here.

(Note: usually I make an effort to keep my jars small in file size so you can easily plug them in to other projects, but in this case: I ended up bundling several megabytes of wav files inside the jar. So while this jar is nearly 2 MB, the code you need is probably less than 100 KB. Sorry for the inconvenience.)

In this applet: each sound file is an element of a JList. When you select a sound file: decorations appears to play/pause and delete the sound.

In theory you could make some decorations always visible (this might be especially useful for a loading indicator, or a warning indicator?), but personally I want actionable buttons to be limited in number to keep the interface simple.

Also, in case you were wondering: the music file icon is a scalable javax.swing.Icon. I noticed in some contexts on my Mac the background had a sort of plastic glazed look and not a radial gradient, but I decided not to fixate on that level of detail. My replicas are never intended to be pixel-perfect copies, just reasonable likenesses.

And if anyone knows how to reduce the flickering observed in this (and other) applets: please let me know! This does not reproduce when launched as a desktop application, so I'm not sure exactly how to debug this.