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