Home > 2010 Winter DPS913 > Multi-level navigation-based apps

Multi-level navigation-based apps

February 9, 2010 Leave a comment Go to comments

This post will teach you how to reliably and consistently create a high-quality multi-level navigation-based app.

.

The “Nav SCS 1” app

Our next navigation-based app, “Nav SCS 1”, uses multiple levels of table views, as well as standard view controllers, in the navigation stack.

The root view displays a list of selected Seneca School of Computer Studies certificate, diploma, and degree program codes.

When the user taps on a program code, the next-level table view slides onto the screen, showing the first year of course codes in the program. In the example below, BSD was tapped. Then, when a user taps a course code, the next-level standard view slides onto the screen, showing details for the course (name and description). It also has a button: When tapped, it slides a final-level view onto the screen. This view has a UIWebView object, which enables in-app web browsing.

Nav SCS 1 - root view controller - list of programsNav SCS 1 next-level, showing the courses in a programNav SCS 1, next-level view controller, showing course detailsNav SCS 1, last-level view controller, showing a UIWebView

The data for the app is stored in a dictionary. The dictionary is in the app bundle, as SCSCurriculum.plist. Each of the three top-level key-value pairs in the dictionary uses a program code as its key, and a dictionary as its value. This next-level dictionary has key-value pairs for the courses; the course code is the key, and a dictionary is its value. The last level dictionary has key-value pairs for the course name, description, and outline URL. The model, as shown in Xcode or the Property List Editor, is below:

SCSCurriculum.plist - the data model for "Nav SCS 1"

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

Design principles and coding patterns

( more to come )
.


Advertisements
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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: