iPhone Dev Sessions: Create a Navigation-Based Application

In this tutorial, you will learn how to do the following:

• Create and run a Navigation-Based Application from XCode
• Create and add a user interface, designed in Interface Builder, as a sub-view to a navigation based application
• Navigate to sub-views from a UITableView
• Allow sub-views to access application data

Creating and Running a Navigation-Based Application in XCode

Let’s start off by opening up XCode and creating a Navigation-Based Application.

Click Choose… and give your application the name BasicNavigation. Once completed, your project window should look like this.

At this point, if you click “Build and Go” and have your project selected to run on the iPhone simulator, you should see the application launch and display a bare UITableView, with undefined row elements. No worries, this is going to change very soon. Your app at this point should look like the following below.

Adding a Sub-view (Designed in Interface Builder) to a UITableView

We are now going to add a sub-view to our application. This sub-view will consist of three key elements.

• A Header File (*.h file extension) — Used for defining methods and variables to be used by an accompanied implementation file.
• An Implementation File (*.m file extension) — Used for implementing methods and accessing variables defined in an accompanied header file. This is where we will place code for view specific logic and functionality.
• An Interface File (*.xib extension) — Used for defining the visual look of the view, using Interface Builder.

In XCode, within the project area on the left, right-click on the Classes folder and select Add, then New File…. You will be presented with the following dialogue.

Make sure you’ve selected Cocoa Touch Classes on the left and select the file template for UIViewController subclass as illustrated above, and click Next. You will be presented with a dialogue in which you will assign a name for this asset. Name this file SubViewOneController.m and make sure the checkbox for Also create ‘SubViewOneController.h’ is checked as well. Click Finish when this is done. The dialogue should look like the following, before clicking on Finish.

At this point, you will see two additional files in the Classes folder that we’ve just added. So far we’ve added a header file (SubViewOneController.h) and an implementation file (SubViewOneController.m), which takes care of two out of three key elements. We’ll now add the last element here before moving on towards implementation.

In XCode, right-click the Resources folder and select Add, then New File…. On the left, select User Interfaces and select View XIB and click next. In the next dialogue, you will give this user interface a name. Type SubViewOne.xib under File Nam” and click Finish. These steps are illustrated below.

The contents of your project window should now look similar to the illustration below.

Open the file SubViewOneController.h and add the following code:

#import <UIKit/UIKit.h>

@interface SubViewOneController : UIViewController {
	IBOutlet UILabel *label;
	IBOutlet UIButton *button;
}

@property (retain,nonatomic) IBOutlet UILabel *label;
@property (retain,nonatomic) IBOutlet UIButton *button;

- (IBAction) OnButtonClick:(id) sender;

@end

Open the file “SubViewOneController.m” and add the following code:

#import "SubViewOneController.h"

@implementation SubViewOneController

@synthesize label, button;

- (id) init {
	self = [super init];
	if (self != nil) {
		// set the title of this view
		self.title = NSLocalizedString(@"Subview One", @"");
	}
	return self;
}

- (IBAction) OnButtonClick:(id) sender {
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning]; // Releases the view if it doesn't have a superview
    // Release anything that's not essential, such as cached data
}

- (void)dealloc {
    [super dealloc];
}

@end

What we’ve done thus far is write a bit of view controller code. In our code, we’ve declared a variable for a UILabel and a UIButton. We’ve also created a stubbed handler method for responding on the button click action. What we haven’t done yet is create a user interface to go with our view controller code. Let’s go ahead do that now.

In the project window, let’s expand the Resources node, and double click on the file SubViewOne.xib. You will then see Interface Builder open this file and be presented with a blank View file. In the menu bar, click on Tools, then Library. When the Library window opens, click on the Inputs & Values node. The Library window will look this.

Drag a UILabel and a UIButton such that your view mimics the following interface.

At this point, if you have not saved and built your project, please do so by going back into XCode and clicking the Build button. If all is well, everything will build successfully. We’re not done just yet, so let’s head back to Interface Builder.

Highlight File’s Owner and then from the menu bar, click on Tools, then Identity Inspector. In the Class text input, type or scroll down to the menu option that says SubViewOneController. Your view properties should now look similar to the following.

In the next steps we are going to wire up the user interface elements of the view we’ve created to the view controller we created earlier. First make sure File’s Owner is selected. In the menu bar, click on Tools, then Connections Inspector.

Under Outlets and Received Actions in the Connections Inspector make the following associations:

• Drag the “button” outlet to the button on the visual interface
• Drag the “label” outlet to the label on the visual interface
• Drag the “view” outlet to anywhere on the visual interface
• Drag the “onButtonClick” action to the button on the visual interface. Select “Touch Up Inside”

At this point we’ve created our first sub-view, however we’re not going to be able to get to it from application just yet. That’s the next step.

Before moving on, go back into XCode and click on Build before moving onto the next part. Your build should compile and the results should report back successfully at this point.

Navigating to a Sub-View from a UITableView

The code below will do the following:

• Sets up an array of views and supplies that array to our UITable as a data source
• Adds multiple sub views to our application using the sub view we’ve designed and written thus far
• Allows us to navigate to different sub views upon view selection from our UITableView

Open the file “RootViewController.h” and add the following code:

#import <UIKit/UIKit.h>

@interface RootViewController : UITableViewController {
	IBOutlet NSMutableArray *views;
}

@property (nonatomic, retain) IBOutlet NSMutableArray *views;

@end

Open the file “RootViewController.m” and add the following code:

#import "RootViewController.h"
#import "SubViewOneController.h"

@implementation RootViewController

@synthesize views;

- (void)awakeFromNib {
	// we'll keep track of our views in this array
	views = [ [NSMutableArray alloc] init];

	// allocate a set of views and add to our view array as a dictionary item
	SubViewOneController *subViewOneController = [[SubViewOneController alloc] init];
	subViewOneController.title = @"Subview One";
	[views addObject:[NSDictionary dictionaryWithObjectsAndKeys:
						@"Subview One",			@"title",
						subViewOneController,	@"controller",
						nil]];
	[subViewOneController release];

	subViewOneController = [[SubViewOneController alloc] init];
	subViewOneController.title = @"Subview Two";
	[views addObject:[NSDictionary dictionaryWithObjectsAndKeys:
					  @"Subview Two",			@"title",
					  subViewOneController,	@"controller",
					  nil]];
	[subViewOneController release];

	subViewOneController = [[SubViewOneController alloc] init];
	subViewOneController.title = @"Subview Three";
	[views addObject:[NSDictionary dictionaryWithObjectsAndKeys:
					  @"Subview Three",			@"title",
					  subViewOneController,	@"controller",
					  nil]];
	[subViewOneController release];

	// create a custom navigation bar button and set it to always say "Back"
	UIBarButtonItem *temporaryBarButtonItem = [[UIBarButtonItem alloc] init];
	temporaryBarButtonItem.title = @"Back";
	self.navigationItem.backBarButtonItem = temporaryBarButtonItem;
	[temporaryBarButtonItem release];

	//set the title of the main view
	self.title = @"Basic Navigation";
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning]; // Releases the view if it doesn't have a superview
    // Release anything that's not essential, such as cached data
}

#pragma mark Table view methods

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}

// Customize the number of rows in the table view.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [views count];
}

// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    static NSString *CellIdentifier = @"Cell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];
    }

    // Set up the cell...
	cell.text = [[views objectAtIndex:indexPath.row] objectForKey:@"title"];

    return cell;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    // Navigation logic may go here. Create and push another view controller.
	UIViewController *targetViewController = [[views objectAtIndex: indexPath.row] objectForKey:@"controller"];
	[[self navigationController] pushViewController:targetViewController animated:YES];
}

- (void)dealloc {
	[views dealloc];
    [super dealloc];
}

@end

Click the “=Build and Go button in XCode. Our application thus far should now allow us to select a sub view and navigate to it. The application should look similar to the following:

Accessing Global Application Data

In an iPhone application, the Application Delegate can commonly be used to store global variables accessible by all views. You may run into a situation where a view may require data that has been modified by another view or may need to be notified of updates to this data. This piece of the tutorial will cover that very scenario. In this, we’ll be covering some key points in our code:

• Subscribing to central events
• Broadcasting events globally
• Reading/writing global application data

To begin, let’s open the file BasicNavigationAppDelegate.h and add the following code.

#import <UIKit/UIKit.h>

@interface BasicNavigationAppDelegate : NSObject <UIApplicationDelegate> {

	//Application Model Data
	NSString *modelData;

    UIWindow *window;
    UINavigationController *navigationController;
}

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UINavigationController *navigationController;

- (void) setModelData:(NSString *)modelData;
- (NSString *) getModelData;

@end

Now open BasicNavigationAppDelegate.m and add the following code.

#import "BasicNavigationAppDelegate.h"
#import "RootViewController.h"

@implementation BasicNavigationAppDelegate

@synthesize window;
@synthesize navigationController;

- (void)applicationDidFinishLaunching:(UIApplication *)application {
	// Configure and show the window
	[window addSubview:[navigationController view]];
	[window makeKeyAndVisible];
}

- (void)applicationWillTerminate:(UIApplication *)application {
	// Save data if appropriate
}

// accessor methods for "data" property

- (void) setModelData:(NSString *) newData {
	modelData = newData;
	[[NSNotificationCenter defaultCenter] postNotificationName:@"dataChangeEvent" object:self];
}

- (NSString *) getModelData {
	if ( modelData == nil ) {
		modelData = @"Hello World";
	}
	return modelData;
}

- (void)dealloc {
	[navigationController release];
	[window release];
	[super dealloc];
}

@end

We’ve added a model variable and accessor methods to read and write to this variable. Notice on the setModelData method, how we have the following line [[NSNotificationCenter defaultCenter] postNotificationName:@"dataChangeEvent" object:self]. When this setter method is called, we will be broadcasting an event, dataChangeEvent, to observers of this event notification. For this application, our sub views will subscribe to this event notification.

Go back and open up SubViewController.h and add the following line:

- (void) getModelData;

Now open SubViewOneController.m, and update the code to look like the following:

#import "SubViewOneController.h"
#import "BasicNavigationAppDelegate.h"

@implementation SubViewOneController

@synthesize label, button;

- (id) init {
	self = [super init];
	if (self != nil)
	{
		// subscribe to changes on global data and course of action to take
		[[NSNotificationCenter defaultCenter]
		 addObserver:self
		 selector:@selector(onDataChangeEvent:)
		 name:@"dataChangeEvent"
		 object:nil];
	}
	return self;

}

- (IBAction) OnButtonClick:(id) sender {
	// this view will set our model data
	BasicNavigationAppDelegate *appDelegate =
	(BasicNavigationAppDelegate *)[[UIApplication sharedApplication] delegate];
	NSString *displayString = [NSString stringWithFormat: @"Set By %@", [self title]];
	[appDelegate setModelData:displayString];
}

- (void)onDataChangeEvent:(id) sender {
	[self getModelData];
}

-(void)viewWillAppear:(BOOL)animated {
	[self getModelData];
}

// set our label to reflect the latest copy of the data that we're observing
- (void) getModelData {
	BasicNavigationAppDelegate *appDelegate =
	(BasicNavigationAppDelegate *)[[UIApplication sharedApplication] delegate];
	[label setText:[appDelegate getModelData] ];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning]; // Releases the view if it doesn't have a superview
    // Release anything that's not essential, such as cached data
}

- (void)dealloc {
    [super dealloc];
}

@end

Let’s note the relevant things that are going on here:

• The view subscribes to the dataChangeEvent on the init method. When the dataChangeEvent is fired, the method onDataChangeEvent is triggered and executed.
• On Button click, we will be setting the the model data located in our application delegate. Remember, that in our implementation, whenever that variable is set, the OnDataChangeEvent is fired and all observers of that event will respond to it

Here’s how we know that our sub views are operating off the same global data.

• Click on Sub View One, then click the button in that view. You’ll notice the label will change to “Set By Subview One”
• Click “back”, then click on Sub View Two. Notice the label says “Set By Subview One”
• Click the button, the label should change in Sub View Two to “Set By Subview Two”
• Click “back, then click on Sub View Three. Notice the label says “Set By Subview Two”

Do you notice what’s happening here? Our data is persisting across views and this data can be read and set by any of our sub views. What we’ve demonstrated here are some very basic practices in model-view-control design and implementation. I hope this lesson carries well for you. Happy coding.

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• Connected world: the consumer technology revolution
• Survey: the next wave of enterprise mobility
• Tablet market to hit over 377 million units by 2016