In this post we'll show you how to create an application with a Navigation-Based interface.  It shows in detail how to switch between different views and how to send messages to different parts of the application using the Notification Center.

• Open Xcode and select New Project from the File menu.
• Select Navigation-Based Application and click on Choose.

By doing this, we have created two views and their respective controller classes.

• On the actions of the button, select Touch Up Inside.

• Link view with the View itself.

• Press Command + S to save and go back to Xcode.
• Now open the ViewTwoController.xib. Add a Label to the view and write "Received Message:" in it. Add a Text View to the view and remove the text in it. Your view should look like this:

• Click on File's Owner and press Command + 4 to bring up the Identity Inspector. Select ViewTwoController in Class.

• Create a new outlet and name it "receivedText" and make it of type UITextView.

• Press Command + S to save and click on File > Write Class Files. Click on save and then merge. Select the left file for ViewTwoController.h.
• Click on File's Owner and press Command + 2.
• Link receivedText with the Text View

• … and also link view with the View.

• Save again and exit the interface builder.

• Go back to Xcode and open RootViewController.h.
• Make your code look like this:

#import 

@interface RootViewController : UITableViewController {

NSMutableArray *navigationArray;

}

@property (nonatomic,retain) NSMutableArray *navigationArray;

@end

We created an array called navigationArray. This array will be used to store information that is needed to navigate trough the views in our app.

#import "ViewOneController.h";

#import "ViewTwoController.h";

• Add the following method:

//awakeFromNib is called when a xib or nib file is initialized

-(void) awakeFromNib{

//this array is used to add the views that we want to access from

//the navigation controller

//even though the menu items aren't added directly to the table in this method

navigationArray = [[NSMutableArray alloc] init];

//initialize the first view and add it to the table array

ViewOneController *viewOneController = [[ViewOneController alloc] init];

viewOneController.title = @"View One";

[navigationArray addObject:

[NSDictionary dictionaryWithObjectsAndKeys:

@"View One", @"title", viewOneController, @"controller", nil]];

[viewOneController release];

//initialize the second view and add it to the table array

ViewTwoController *viewTwoController = [[ViewTwoController alloc] init];

viewTwoController.title = @"View Two";

[navigationArray addObject:

[NSDictionary dictionaryWithObjectsAndKeys:

  @"View Two", @"title", viewTwoController, @"controller", nil]];

[viewTwoController release];

//The title is needed if we want to be able to navigate back

//to the menu from the other views

self.title = @"Main";

}

• Search for the method tableView:numberOfRowsInSection: and change the code to this:

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

    return [navigationArray count];

}

With this method we change the number of rows in the navigation menu. Since the navigationArray only has 2 entries we could change this to " return 2; " but it's better to leave it this way in case we want to add more views in the future.

    // Set up the cell...

[cell.textLabel setText:[[navigationArray objectAtIndex:indexPath.row] objectForKey:@"title"]];

This step adds the title for each view to the navigation menu.

• Now go to the method tableView:didSelectRowAtIndexPath: and edit the code to make it look like this:

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

    

UIViewController *anotherViewController = [[navigationArray objectAtIndex:indexPath.row] objectForKey:@"controller"];

[self.navigationController pushViewController:anotherViewController animated:YES];

}

This step adds the logic for the navigation.

• Finally, go to the dealloc method and add this line:

[navigationArray release]; 

 

• It is necessary to add a "release" for the variables where "retain" is being used.

Testing the Navigation Interface

• You can try to run the application now. 
• Press Command + R to run the simulator.

• Try navigating trough the app. The logic for sending a message isn't there yet, but you can try using the elements in the view anyways.

• If the keyboard blocks the button when you click/touch a Text View you can try setting your button a little higher. I'll explain a method to hide the keyboard at the end of this tutorial.
  

Let's add the code for sending messages between the views.

• Open NavigationApplicationAppDelegate.h and make your code look like the following:

#import

@interface NavigationApplicationAppDelegate : NSObject {

    NSString *message;

    UIWindow *window;

    UINavigationController *navigationController;

}

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

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

-(void)setMessage: (NSString *)newMessage;

-(NSString *)getMessage;

@end

• The message variable is used to save the information that we want to share between the two views.
• Add the following methods to NavigationApplicationAppDelegate.m.

- (void)setMessage:(NSString *)newMessage{

message = newMessage;

[[NSNotificationCenter defaultCenter] postNotificationName:@"messageSentEvent" object:self]; 

}

- (NSString *)getMessage{

[message retain];

return message;

}

 As you can see the setMessage: method sends a notification to the notification center. We will add an observer to View Two so it is notified when a different message is set.  The retain method is called by getMessage to help the object "retain" the value of this variable. If this method is not called the application may not function properly. (You can try removing this line of code and sending a lot of messages when the application is finished if you want to see the impact.)

We need to make one last change to this file:

- (void)dealloc {

[message release];

[navigationController release];

[window release];

[super dealloc];

}

A release needs to be added because we used the retain method on message.

• Now open ViewOneController.m.
• Add the following import:

#import "NavigationApplicationAppDelegate.h";

• Add the following code to the sendMessage: method:

- (IBAction)sendMessage:(id)sender {

//gets the delegate for this application

    NavigationApplicationAppDelegate *navigationAppDelegate = 

(NavigationApplicationAppDelegate *)[[UIApplication sharedApplication] delegate];

//set the string value

NSString *newMessage = textView.text;

//call the setMEssage method from the delegate

[navigationAppDelegate setMessage:newMessage];

//hide the keyboard

[textView resignFirstResponder];

}

• Open ViewTwoController.m and add the following import:

#import "NavigationApplicationAppDelegate.h"

• Now, add the following methods:

//this method is used so an observer can be added as soon as this object is initialized

-(id) init { 

self = [super init]; 

if (self != nil) { 

// add an observer

[[NSNotificationCenter defaultCenter] addObserver:self 

selector:@selector(messageReceived) name:@"messageSentEvent" object:nil]; 

}

return self;

}

//gets the message everytime a message is received

-(void) messageReceived{

NavigationApplicationAppDelegate *NavigationAppDelegate =

[[UIApplication sharedApplication] delegate];

[receivedText setText: [NavigationAppDelegate getMessage]];

}

//gets the message when the view is first loaded

-(void)viewWillAppear:(BOOL)animated { 

NavigationApplicationAppDelegate *NavigationAppDelegate =

[[UIApplication sharedApplication] delegate];

[receivedText setText: [NavigationAppDelegate getMessage]];

}

Testing the Complete Application

• Let's run the application. Press Command + R to compile and start the simulator.
• Go to the first view and write a message. After writing the message click / touch on "Send Message"

• Go back to the main menu and then to the second view.

• As you can see the message was succesfully received by the second view.

The keyboard that appears when you click / touch over Text Views and Text Fields can be really annoying sometimes. I'll show you a method to hide the keyboard, even though, It might not be a very orthodox way to do this.

• Double click on ViewOneController.xib to open the Interface Builder.
• Select all the elements of the view and press Command + x to cut them. Press Command + Shift + L to bring up the Library window. Now add a button to the view and expand it to fill the whole view.

• Press Command + 1 to show the Attributes Inspector. Select Custom in Button Type.

By using Custom as a Type for the Button the button becomes invisible.

• When prompted select Touch Up Inside.

• Save and exit Interface Builder.
• Go back to Xcode and to ViewOneController.m.
• Add the following code to the clickOnBackgroundButton: method:

- (IBAction)clickOnBackgroundButton:(id)sender {

    [textView resignFirstResponder];

}

• Run your application and click on the Text View of the first view. Now click the background. This time the keyboard should hide automatically without the need of pushing the Send Message button.
• Note: Remember the Text View is on top of the hidden button, if you press over it, the keyboard won't hide.

And well... that's all for Today. I hope you learned how to create a Navigation-Based application and how to use the Notification Center.