Fundamental Storyboarding: Introduction

If you are a new visitor to our site, please read the Getting Started guide.

Now, up to this point, Xcode projects you’ve created did not use storyboard. So I guess it is high time you learn how to develop storyboard applications. This is a four part workshop series on fundamental storyboarding operations you should learn in order to effectively use the storyboarding feature of Xcode. Here is what you’ll learn in each part.

Part 1: Introduction This is the first part of the Fundamental Storyboarding workshop series and you are reading it now. You learn what a storyboard is and you get a general introduction to components of a storyboard.	Part 3: Pass Data Backward In this part of the series, you will learn how to perform the third storyboarding operation-passing data backward to a source view controller.
Part 2: Transition Between Scenes In this part of the series, you learn how to perform the first two storyboarding operations. They are transitioning between scenes and modify the transition between scenes.	Part 4: Pass Data Forward In this final part of the Fundamental Storyboarding series, you will learn how to pass data forward to a destination view controller.

Storyboard, what the heck is it?

A storyboard is an XML file consisting of an iOS application’s user interfaces, called scenes and connections between them-called segues (pronounce seg-way). You use the Storyboard editor in Interface Builder to design your storyboard scenes, connect segues and unwind segue.

Storyboard Scenes

In an Xcode project a storyboard scenes are created in an XML file called a storyboard. It is loading in In Interface Builder. Here’s what a typical storyboard file called, Main.storyboard look like in Interface Builder. As you can see, there are four scenes on the storyboard canvas and three segues. Now, the arrow on the left side of the initial scene indicates that it is shown every time you launch the application in the iPhone Simulator.

Figure 11: Storyboard canvas in Interface Builder

A storyboard scene comprise of two components: a View and an Objective-C class, as shown in Figure 1 below. Now, a storyboard View is called a scene and it’s Objective-C class is called a view controller. You drag-and-drop controls from Xcode’s object library on the scene. You write code in the scene’s view controller files to make the storyboard scene functional. From now on I will use the term scene to reference a storyboard View and view controller to reference its Objective-C class files.

Figure 1-1: Components of a storyboard

Segues

A segue manages the transition between the source view controller and the destination view controller. There are two types of segues you can use in a storyboard: segue and unwind segue

In a storyboard, you visually connect a segue to a view controller or even a UI object such as a button or a table view cell resulting in an arrow as shown in Figure 1-2. Further more; a segue is an object of the class UIStoryboardSegue class and it contain three properties: a sourceViewController, a destination view controller, and an identifier. The identifier is an NSString that can be used to identify specific segues within your source code.

Unwind Segues

You define an unwind segue in the storyboard by control-dragging  from an UI object (such a button) to the view controller’s Exit icon as shown in Figure 1-3.

Figure 1-2: A segue	Figure 1-3: An unwind segue

That’s pretty much it for this week’s workshop. Next week, you will start learning the ins and outs of of above mentioned storyboarding concepts by creating storyboard application Xcode 5 IDE. Until then, happy coding! 🙂