Archive for September, 2011

Building Better iPad Tables

Friday, September 2nd, 2011

When Cocoa Touch first debuted, it only applied to tiny little handheld devices without much screen real estate to work with. As such, it made sense that the multi-column tableviews present in Mac OS X’s flavor of Cocoa were replaced in Cocoa Touch with a single column version.

But then came the iPad.

The iPad uses Cocoa Touch, but it has much more screen real estate to work with than an iPhone or iPod Touch. The iPad is fully capable of supporting a table UI that has multiple columns. And indeed the view-based architecture supports the ability to customize table cells to your heart’s content, even on an iPhone.

Nevertheless, it doesn’t seem particularly easy to approximate the UI of a data-driven desktop app on the iPad, as there doesn’t seem to be any method for more complex table layouts on the iPad.

But that’s exactly what I need in writing Giftory for iPad.

So I wrote it.

And now I’ve released it for anybody else to use.

The primary UI for Giftory on the desktop is a display of gifts, including, for each listed gift, its name, the store it was bought from, its price, the names of its giver and receiver, its hiding place, and a couple of other relevant bits of info:

Mac OS X Giftory Table View

Table View for desktop version of Giftory

This UI utilizes text fields, popup boxes, combo boxes and check boxes to achieve its functionality.

Cocoa Touch table view cells are generally only fit to embed labels to customize the cell to display several pieces of information. Some table cells have been implemented with a label to provide the name of a data field, and an editable area where the user can enter a value for the field. But editing multiple data element values always requires utilizing another screen.

None of this is suitable for editing multiple data elements for a given data object displayed on a single table row.

I created “Reusable Dynamic Table Cell Classes” to solve this problem.

These classes provide a subclass of UITableViewCell that utilizes objects built to simulate the functionality of pop up boxes, combo boxes and check boxes, as well as standard text fields and buttons. Using these classes developers can programmatically define a row UI for their tables, associate the row with a data object, such as a dictionary or managed object, and manage the data through the generated interface:

iPad table view

Customized iPad table row using Reusable Dynamic Table Cell Classes

The classes aren’t currently suitable for situations in which the row itself needs to be selected, but they are ideal for situations in which the table rows simply display various elements of a data object, and those elements are editable.

In the next post I will go into detail about the design of the data cell classes and how to use them in code.

The open source project can be found at: http://github.com/ecrichlow/iPad-Dynamic-Table-Cells