Wednesday, February 28, 2007


With 4.3 features wrapping there is a new itemview class called QColumnView. It provides a way of displaying a tree model. Each column is another level in the tree with the far left being the top of the tree and the far right side being a node. It is known for quick and easy keyboard navigation and a final preview area. Most commonly this view is known for its usage in OS X and in particularly in Finder. Below is a screenshot of using the view with the dir model and a simple file preview widget.

This widget isn't just for the finder though. I have found the same ui pattern in a lot of places (mostly on OS X). On extreme example was a date scheduling application. The first column let you select the month, the second you selected the day and the third the time. But rather then using lists of strings it showed calendars and clocks. I have seen a lot of applications who only need a few columns such as iTunes with their genre/artist/album columns. There are other applications who have only had two columns, the model was just a list (which was the first column) and when you clicked on an item the second column showed a detailed control of the item.

From the UI Patters and Techniques page on Cascading Lists:

"Use When the user needs to navigate a hierarchy that isn't very deep, but might have many items on each level. An [QTreeView] would work, but the user would be scrolling up and down a lot to see all the items, and they wouldn't get a good overview of the items at higher levels in the hierarchy. ... By spreading the hierarchy out across several scrolled lists, you show more of it at once. It's that simple. Visibility is good when you're dealing with complex information structures. Also, laying the items out in lists organizes them nicely -- a user can more easily keep track of what level they're dealing with than they could with an outline format, since the hierarchy levels are in nice predictable fixed-position lists."

And of course QTimeLine is used to provide smooth animations when scrolling between two columns. I snagged an animated gif, but be warned it came out a lot choppier then in real life.

The most intersting part of QColumnView is the last column. An empty space by default it can be replaced with a large widget that provides controls or previews. With such a large area to use quite a lot of information about the currently selected item can be shown. Unlike a tree where a separate area is needed or with icon where there is a constant battle to keep the items small, but have then be big to convey the information (often being just a small thumbnail). I look forward to seeing how it is used.

No comments:

Popular Posts