iPhone Programming Fundamentals: Understanding View Controllers

ne of the first things you will learn about when you begin programming iPhone projects is view controllers. Beginners often get intimidated by the amount of work they need to get a simple application going. However, you do much of the UI management in iPhone programming with view controllers; therefore, understanding what they do and how they work is critical to successful iPhone programming. This article explains the concepts and use of view controllers in iPhone programming. By the end of this article you should have a solid understanding of view controllers and be on your way to creating some great applications.

Getting Started

As usual, building a real project is the best way to get started and see how things fall into place along the way. To begin, start Xcode and create a new View-based Application project named VCExample (see Figure 1).

Figure 1. New Project: Select the View-based Application item from the New Project screen in Xcode.

Understanding the Basics

The new project includes several project templates that Xcode creates for you. These usually contains sufficient underlying code to make everything work, so it's worth while spending a bit of time examining the code.

Figure 2. Default Files: The figure shows the files that Xcode creates by default for a new view-based application.

First, observe that there are four source code files in the project (see Figure 2). The first two, VCExampleApDelegate.h and VCExampleApDelegate.m, manage application loading and unloading. The next two, VCExampleViewController.h and VCExampleViewController.m, define the view controller class that manages loading and unloading a view (think of a view as a screen in iPhone, or if you are a .NET programmer, think of a view as a Windows Form). In addition, there are also two NIB files: VCExampleViewController.xib and MainWindow.xib. MainWindow.xib contains the main window in which your application will load. It essentially loads the view contained in the VCExampleViewController.xib file.

Here's the content of the VCExampleAppDelegate.h file:

#import <UIKit/UIKit.h>
@class VCExampleViewController;
@interface VCExampleAppDelegate : 
   NSObject <UIApplicationDelegate> {
    UIWindow *window;
    VCExampleViewController *viewController;
}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet 
   VCExampleViewController *viewController;
@end

This file defines a view controller object called VCExampleViewController. When the application has finished initializing, it fires the applicationDidFinishLaunching: event handled in the VCExampleAppDelegate.m file, which loads the view represented by this view controller:

#import "VCExampleAppDelegate.h"
#import "VCExampleViewController.h"
@implementation VCExampleAppDelegate
@synthesize window;
@synthesize viewController;
- (void)applicationDidFinishLaunching:(UIApplication *)application {    
    
    // Override point for customization after app launch    
    [window addSubview:viewController.view];
    [window makeKeyAndVisible];
}
- (void)dealloc {
    [viewController release];
    [window release];
    [super dealloc];
}
@end

Figure 3. MainWindow.xib: The figure shows the contents of the MainWindow.xib file in list mode.

Double-click on MainWindow.xib to edit it in Interface Builder. Observe the MainWindow.xib window (see Figure 3; I have shown it in list mode).

Specifically, it contains a view controller of type VCExampleViewController—an instance of the VCExampleViewController class. You can verify this by selecting the view controller instance and viewing its Identity Inspector window (see Figure 4).

Figure 4. Confirming Identity: Here's the VCExampleViewController instance viewed in the Identity Inspector.

To continue the default file exploration, Listing 1 shows the code in the VCExampleViewController.m file.

The code in Listing 1 defines various methods for you, and includes a few commented-out methods as well. All the methods are event handlers for various events fired by the view controller. For example, the controller fires the viewDidLoad method after it loads the view into memory. To create the UI for your view programmatically, you can override the loadView method.

Now, double-click on the VCExampleViewController.xib file and examine its contents (see Figure 5). Notice that the File's Owner item is mapped to the VCExampleViewController class.

Figure 5. VCExampleViewController.xib: Here's what you'll see when you open the VCExampleViewController.xib file.

Figure 6. New View: In this figure, the view's background color has been changed to a green color, and a Button added.

Double-click on the View item, set its background color to green, and add a Button view to it (see Figure 6). Save the project in Interface Builder before you continue.

Figure 7. Handling Events: To connect the Button view with the action, drag it to the File's Owner item and select displayView:.

Back in Xcode, open the VCExampleViewController.h file and add the following code in bold (remember to save the file after adding the code):

#import <UIKit/UIKit.h>
@interface VCExampleViewController : UIViewController {
}
//---declare an action for the Button view---
-(IBAction) displayView:(id) sender;
@end

Back in Interface Builder, control-click and drag the Button view to the File's Owner item and select displayView: (see Figure 7).

This will connect the "Touch Up Inside" event of the Button view with the displayView: action that you have just added.

Figure 8. The Application in Action: Pressing the button now displays an alert, proving that the event handler fired properly.

Now, you need to add some code to the VCExampleViewController.m file, so that when a user clicks the Button view, you can perform some simple action to prove that the action was linked correctly to the event. Add the following code to the displayView: method:

-(IBAction) displayView:(id) sender{
    
    UIAlertView *alert = [[UIAlertView alloc] 
          initWithTitle:@"Button Pressed" 
          message:@"You have pressed the Button view."
          delegate:self 
          cancelButtonTitle:@"OK" 
          otherButtonTitles:nil];
    [alert show];
    [alert release];
}

Save the project in Xcode, and then press Command-r to test the application on the iPhone Simulator. When you press the Button view, you will now see an alert display a message (see Figure 8).