How do I implement a customized list in Cocoa?

Question

Hi, I want to build a Cocoa App with a list of entries very similar to the ToDo list of Things.app (see the screencast). The question is whether I should use

1. a TableView,
2. a CollectionView or
3. a WebView.

I think it could work with all of them, but which one suits the following requirements best?

• have a list of entries -> 1 column & many rows
• reordering with drag & drop
• select single entries & use keys for actions like delete
• open up an entry: the row should expand to show more input fields
• customized look: rounded corners, shadow, background gradient

So far my research says that the TableView has most of the functionality, but is harder to customize in its appearance, the CollectionView doesn't have drag & drop (right?) but is easy to design and the WebView would take much effort to not hurt the user experience and I can't bind my model directly to input fields.

What pros and cons am I missing and what would you recommend to use?

Answer 1

A WebView doesn't make sense. You might as well create a web application if you use a WebView. An NSCollectionView is more for grid like data, like TV listings per hour.

NSTableView is the only one that makes sense in this case. I've implemented all 5 bullet points with with an NSTableView without issue. You need to extend NSTableView and do some custom drawing for the customized look. That's the hardest part.

Answer 2

• open up an entry: the row should expand to show more input fields

You need an outline view. A table view is for flat lists.

Note that NSOutlineView is a subclass of NSTableView, so all the table-view features work on an outline view as well.

Answer 3

There are people who've done this already. One that I've used successfully is by Matteo Bertozzi and is available here: http://th30z.netsons.org/2009/03/cocoa-sidebar-with-badges-take-2/ It might take a bit of massaging to get it to work properly (especially if you need complex drag-and-drop behavior), but for basic functionality, such as getting the section titles and items in the list, it works excellently.

Edit: This has come up before and is a common question on the cocoa-dev email list. Here are some other options.

Answer 4

I'm approaching the very same problem in my app (with one big list similar to the Things todo list) and I think a table view would make a lot of sense here.

The trick is having your cells ("rows") expand when double-clicked. That's about all the progress I've made so far.

Answer 5

Just took a look at Things.app itself using "F-script anywhere".

They've used a subclass of NSTableView called "DetailTableView" which presents the condensed todo items. Collapsed todo items are implemented using a custom cell called "ToDoCell", but the expanded look you get when editing is interesting. In that case they've got a custom view called "ToDoEditView" which is inserted as a subview of the DetailTableView when required. I suspect this editing view is temporarily added as a subview in the correct location and the corresponding row of the tableview gets resized temporarily while it is present.

All pretty speculative .. I'd love to know the details of how this was done. It's an awesome UI.