I have been reading an early preview of iOS 5 Programming Cookbook and wanted to show a new feature called Storyboards. In previous versions of iOS, you would use navigation controllers to push and pop view controllers to be shown on the screen. Now in iOS 5, Apple believes this can be done easier with Storyboards. Soryboarding is the new way of defining the connection between different screens in your iOS app. For example, a nightmare before would be if you had 20 unique view controllers which you coded months ago, looking at the source code now you would have to spend time finding your way around the connection between these view controllers and what view controller is pushed when a certain action is taken by the user. This could become very difficult in keeping track on which view controllers are connected if you have not documented your code or created flow charts. Now with Storyboards, you can now view/create your entire app’s UI and the connection between each view controller in one screen using Interface Builder.

With storyboards, one screen’s worth of content is called a scene. A scene on the iPhone can be thought of as the view of a view controller, where you put all yoru contents on the screen to be presented to the user at the same time. On the iPad, more than one scene can be presented to the user at the same time because of the bigger screen. Storyboarding supports transitioning from one scene to another, similar to a navigation controller pushing a view controller on top of another. That is a transition. In order to explain Storyboards we will cover the following topics:

1. Creating a Project with Storyboards
2. Adding a Navigation Controller to a Storyboard
3. Passing Data from One Screen to Another
4. Adding a Storyboard to an Existing Project

Lets begin….

Creating a Project with Storyboards

I’m running the latest bits of Xcode which is v4.2.1 from Nov. 17, 2011 update on the AppStore. It includes many updates including iOS 5 SDK. With this new update, the New Project dialog has changed with new project such as Master-Detail Application, Single View Application, etc as shown in Figure 1.

1. Select Application on the left under iOS and on the right, select Single View Application and click Next button as shown in Figure 1.

Figure 1

2. Name you project by filling in the Product Name field. I chose StoryboardSample. Also, make sure you check Use Storyboard and click Next button, as shown in Figure 2.

Figure 2

3. Choose a folder location to save project and click Create button.

Since I created a project with Use Storyboard and Device Family = Universival, there are *_iPhone.storyboard and *_iPad.storyboard files that were added to the project as shown in Figure 3.

Figure 3

Adding a Navigation Controller to a Storyboard

Using the project created from the last section, you want to be able to manage multiple view controllers. In order to do that, you need to set a navigation controller as the initial view controller of your storyboard file. In previous iOS versions, we would create a view controller that would inherit from UINavigationController and set that class as the root view controller.

In order to add a navigation controller, simply follow these steps:

1. Select the iPhone storyboard in the Project Navigator in Xcode. For the StoryboardSample project, the file is MainStoryboard_iPhone.storyboard.

2. Once the storyboard file is selected in IB (Interface Builder), simply double-click on an empty space on the storyboard’s canvas and you will see the content shrink in size and give you more free space to play with, as shown in Figure 4. You can also you can the zoom in/out control in the bottom right of the canvas.

Figure 4

3. Under the View menu, select Utilities->Show Object Library

4. In the Object Library, find the Navigation Controller object and drag and drop it into the storyboard, to the left side of your existing view controller.

5. The navigation controller we just dragged on to the canvas already comes with a view controller of its own. We do not need this so go ahead and delete this view controller by selecting it first and then pressing the Delete button on the keyboard. Now we are left with only the navigation controller and our original view controller, as shown in Figure 5.

Figure 5

6. Now we need to hook up the navigation controller with the view controller. Select the navigation controller object on the storyboard. Then, hold down the Control key and left button on your mouse and drag your mouse over to the view controller (on the right) that we had on our storyboard originally. This will draw a line from the navigation controller all the way to the view controller. Now release your mouse button and a Storyboard Segues pop-up will appear. Select Relationship – rootViewController. Now you will see a segue drawn from the navigation controller to the view controller, as shown in Figure 6.

Figure 6

7. All that is left is to make our navigation controller the initial/root view controller. To make our navigation the initial view controller, simply select the Navigation Controller under the Navigation Controller Scene panel in IB, as shown in Figure 7.

Figure 7

8. Next, select the View menu in Xcode and choose View->Show Attributes Inspector. Once the attributes inspector is opened, under the View Controller category, check Is Initial View Controller checkbox, as shown in Figure 8.

Figure 8

Now if you run your application, you will notice that the initial view controller has a navigation bar on top, indication that this view controller now has a navigation controller, as shown in Figure 9.

Right now we have a navigation controller with a view controller inside it. Now we want to trigger an action and then move from one view controller to another. In order to do that, let’s place a button on our view controller and push a view controller into the stack once the user presses the button.

9. Select MainStoryboard_iPhone.storyboard

10. In the Object Library, select View Controller object and drag and drop it onto the right side of our existing view controller on the storyboard, as shown in Figure 9.

Figure 9

11. In Object Library, find the Button object and drag and drop it into the first view controller as shown in Figure 10. Note that if you are zoomed out, Interface Builder will not allow you to drop a button onto a view controller. You need to double click on an empty space on your storyboard to zoom into it before Interface Builder allows you to drop UI components onto your view controllers.

Figure 10

12. Now select the button, hold down the Control key on your keyboard and then hold down the left mouse button all the way while you drag to the second view controller.
13. Now lift your fingers off the mouse button and the Control key. A Storyboard Segues pop-up will appear. Select Push.

Now if you look at your storyboard, you will see the first view controller is connected to the second view controller.

Run the app and click on the button on the first view controller. You will see the second view controller will automatically get pushed onto the stack of view controllers. Once the second view controller is pressed, you will see a back button on the navigation bar. If you press that button, you will be send back to the first view controller, as shown in Figure 11.

Figure 11

In Part 2 of this blog post, we will cover the last two sections: Passing Data From One Screen to Another and Adding A Storyboard To An Existing Project.