Home > 2010 Winter DPS913 > Introduction to a navigation-based app with a table view

Introduction to a navigation-based app with a table view

February 9, 2010 Leave a comment Go to comments

A very common kind of iPhone OS app uses a navigation-based usage pattern, and table views to enable the user to “drill down” to deeper levels of task operation and/or data detail. We introduce the pattern in this post.


The “Nav Colors” app

The “Nav Colors” app is our first navigation-based app that uses a table view. It has only two levels of navigation – the root view, which contains the table view, and one additional level, which is a standard view.

The root view displays a list of colours. (I will use both spellings in this post. In Canada, we typically use the “…our” form, but the SDK objects use the “…or” form.)

When a user taps on a colour name in the table view, the next-level view controller slides in. It uses the selected colour value to change its view’s background colour to match. In the example below, “Blue” was tapped.

Nav Colors root view controller's viewNav Colors next-level view controller

The data for the list of colours is stored in an array. The array is in the app bundle, as ColorsArray.plist. Each array element is a dictionary, with two key-value pairs: The first is the name of the colour (which appears in the table view), while the second is the Cocoa “UIColor” object that represents its specific colour (stored, incidentally as an NSData object). The model, as viewed in Xcode or the Property List Editor, is shown below:

ColorsArray.plist - the model for the "Nav Colors" app

You can download “Nav Colors” from the “programming examples” list, linked at the right.

Design principles and coding patterns

A table view requires a data source. As you have learned, the data can be provided in a number of ways.

In our example, we are using an array, which is located in the app bundle.

When configuring the root view controller, which has the table view, there are two approaches to providing the data it needs:

  1. Get the data during viewDidLoad, or another early-firing event
  2. In the app delegate code, configure the root view controller with the data

Either approach may be suitable. However, approach #2 will enable the root view controller to be portable to another app, where it may not be located at the root.

In either case, it should be configured with a data-bearing property (or properties).

( more to come )


Categories: 2010 Winter DPS913
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: