Converting to Storyboards Release Notes

Storyboarding is a new way to create user interfaces for iOS applications, beginning with iOS 5 and Xcode 4.2. Using storyboards, you can design the view controllers that compose your application as scenes in the Xcode design canvas and visually define the navigation between the scenes using segues.

There are a few steps you need to take to convert an existing iOS application project to use storyboards. In addition, there are other new patterns you can adopt.

Contents:

Configure the Application Delegate

The application delegate is responsible for loading the storyboard and managing the window. You need to specify the name of the application delegate class in UIApplicationMain, and ensure that the application delegate has a property called window.

If you don’t have an existing application delegate class, you need to create one. A minimal implementation would look like this:

Listing 1-1Minimal application delegate header file
#import <UIKit/UIKit.h>
@interface AppDelegate : NSObject <UIApplicationDelegate>
@property (strong, nonatomic) UIWindow *window;
@end
Listing 1-2Minimal application delegate implementation file
#import "AppDelegate.h"
@implementation AppDelegate
@synthesize window = _window;
@end

In the main.m file, set the application delegate class in UIApplicationMain.

Your existing main.m file probably looks something like this:

#import <UIKit/UIKit.h>
 
int main(int argc, char *argv[]) {
 
    NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init];
    int retVal = UIApplicationMain(argc, argv, nil, nil);
    [pool release];
    return retVal;
}

Change it to look like this:

#import <UIKit/UIKit.h>
#import "AppDelegate.h"
 
int main(int argc, char *argv[]) {
 
    @autoreleasepool {
        return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
    }
}

(replace “AppDelegate” with the name of your application delegate class).

Add a Storyboard to the Project

Add a new storyboard file to the project. By convention, the initial storyboard is named MainStoryboard.

Add your first view controller to the storyboard from the Object library. You should see a sourceless segue indicating that this is the first scene.

image: Art/firstViewController.pdf

If the first view controller is embedded in a container such as a navigation controller or tab bar controller, then use Editor > Embed In to embed it appropriately. The sourceless segue should now point to the container view controller:

image: Art/embeddedFirstViewController.pdf

Set the Main Storyboard for the Project

In the Summary for application Target, set the value of the Main Storyboard to the name of the storyboard file you created. If there is a value for Main Interface (to specify the first nib file), make sure you remove it.

image: Art/setMainStoryboard.pdf

Accessing the First View Controller

The application delegate is not represented in the storyboard. If you need to access the first view controller (for example, if you are creating a Core Data application and want to pass the delegate’s managed object context to the first view controller), you can do so via the window’s rootViewController. If the root view controller is a container controller—such as an instance of UINavigationController—then you can access your view controller using the appropriate accessor for the container’s contents, for example:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
 
    UINavigationController *rootNavigationController = (UINavigationController *)self.window.rootViewController;
    MyViewController *myViewController = (MyViewController *)[rootNavigationController topViewController];
    // Configure myViewController.
    return YES;
}

Configuring Table Views

There are several new ways of working with table views when you use storyboards.