Adding a Navigation Controller by Hand

Ok, time to get my hands dirty, this time with my own application.  First off, although the app is going to be using a Navigation style interface, I’m one of those people who never really trusts quite what a ‘template’ helps you achieve.  Whilst templates can be useful in shortcutting the development process, when you are starting out, it also means that you can end up skipping over a proper understanding of how to setup an application.  So my first task is to start with a Window or View based application, and then add in the Navigation Controller functionality.

Let’s just say that at the first attempt, this didn’t go so well.  I really didn’t understand the connection between Interface Builder and the classes in the project.  Pulling that apart was quite key to understanding how applications actually hang together.

The process is in fact quiet straightforward:

New Project

Start a new project, and choose the Window-based Application template.  Ok, its a template but a pretty thin one, and about the minimum you can get away with.

Add Instance Variables

Open up your AppDelegate.h file, and add an instance variable of [cci]UINavigationController[/cci], and a [cci]@property()[/cci] statement that includes the IBOutlet prefix.

[cc lang='objc' highlight='3,7' width='auto']
@interface AppDelegate: NSObject <UIApplicationDelegate> {
    UIWindow *window;
    UINavigationController *navigationController;
}

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UINavigationController *navigationController;
@end[/cc]

The purpose of this is to create a connection between your code and the navigation controller object you are about to create with Interface Builder.

Synthesize Properties and Insert View into Window

Switch to your AppDelegate.m file, and [cci]@synthesize[/cci] the [cci]navigationController[/cci] property.

[cc lang='objc' highlight='2' width='auto']
@synthesize window;
@synthesize navigationController;
[/cc]

Now go to the [cci]didFinishLaunchingWithOptions[/cci] method, and add the navigation controllers view to the window as a subview.

[cc lang='objc' highlight='1' width='auto']
[window addSubview: navigationController.view];
[window makeKeyAndVisible];
[/cc]

Create Root View for Navigation Controller

Right click on the Classes group, and choose New File…  This will prompt for a new object, which should be based on [cci]UIViewController[/cci] (with the option of [cci]UITableViewController[/cci] if that’s what you want).  Also ask for the XIB file to be generated, and give it a name.  The XCode navigation controller calls this the ‘RootViewController’.  I decided to call it ‘[cci]GroupViewController[/cci]’ as this is what this view will contain in my application, and is therefore more logical.

Add Navigation Controller to MainWindow XIB

Now double-click on the MainWindow.xib file in your project.  Drag a ‘Navigation Controller‘ object from the Library into the MainWindow.xib window.

It’s always a good idea to view the XIB files in List mode, so press the middle of the View Mode buttons in the toolbar.

Expand the Navigation Controller entry by clicking on the triangle.  Then select the View Controller object (note its called Root View Controller at this point).

1. In the Attributes inspector, change the NIB Name to match the name you created in step 5 (i.e. [cci]GroupViewController[/cci]).
2. In the Identity inspector, again change the Class Name to match the name you created in step 5 (i.e. [cci]GroupViewController[/cci]).

Make a connection between the App Delegate object, and the Navigation Controller object – Ctrl-Drag from the App Delegate to the Navigation Controller and choose the ‘navigationController’ outlet as the target when prompted.

Build and Run

You should now be able to build and run the application, and see the Navigation Controller with its blank view within.