How can I implement a thumbnail-based view for user selection in Cocoa?

Question

Hi, I have what I thought was a pretty simple need but I'm not sure how to go about implementing it.

At various points in my interface, the user is asked to make a selection of something rather visual (like choosing a layout for a page or a color option.) These selections are made from a pre-defined set of options. Normally you'd use an NSPopUpButton, or maybe an NSTableView, but I would like the user to see thumbnails of each selection option. These thumbnails ought to be a decent size, too--at least 100x100 pixels. Each thumbnail should also be accompanied by a text label. Only one selection is allowed at once.

Apple implements something rather like this in iWeb:

Of course, you're used to seeing something like this with small icons:

I'm thinking that an NSCollectionView is the place to start, but I've only ever seen this used in much more complicated scenarios (eg: displaying the contents of a directory, supporting drag and drop, etc.) Therefore, most of the code I've found is rather complicated.

Is there a simpler solution to populate this view with static, pre-defined data and just allow for a simple selection? In other words, I'm looking for the functionality of a pop-up button but a different user interface.

Update: solution

I used IKImageBrowser, as suggested. This tutorial was very helpful. In IB: I just made an IKImageBrowser in my interface, wrapped it in a scroll view, and made it the data source of the browser object. In code: implemented the data source protocol in my controller like the tutorial explains, set allowsMultipleSelection and allowsEmptySelection to NO, created a custom image object using the URL image representation exactly as explained in the tutorial.

Then, to get the selection, I wrote the following method to be triggered when the user clicks the "OK" button:

NSIndexSet *retval = [imageBrowser selectionIndexes];
NSInteger i = [retval firstIndex];  //the index of the selection. Corresponds to index in my array data source
NSString* path = [[styleViewData objectAtIndex:i] imageRepresentation]; //path to selected image, if you need it

The tutorial is very helpful--just ignore the stuff about adding images and zoom sliders and such.

Answer 1

You want IKImageBrowserView.

Answer 2

A quick Question though - If instead of only having static images, when user moves the mouse over the thumbnail, it shows a movie or plays a movie as if each static image represents a movie trailer let say and it gets activated when user moves the mouse over the image ... in this case will a IKImageBrowserView still work? Or one has to use the NSCollectionView?