(For more resources related to this topic, see here.)

Configuring storyboards for a project

Getting ready

In this recipe, we will learn how to configure an application’s project properties using Xcode so that it is set up correctly to use a storyboard file.

How to do it…

To begin, perform the following simple steps:

1. Select your project from the project navigator window.
2. Then, select your project target from under the TARGETS group and select the Summary tab.

   

3. Select MainStoryboard from the Main Storyboard drop-down menu, as shown in the preceding screenshot.

How it works…

In this recipe, we gained an understanding of what storyboards are, as well as how they differ from user interfaces created in the past, whereby a new view would need to be created for each XIB file for your application.

Whether you are creating applications for the iPad or iPhone, each view controller that gets created within your storyboard represents the contents of a single screen, comprised of the contents of more than one scene.

Each object contained within a view controller can be linked to another view controller that implements another scene.

In our final steps, we looked at how to configure our project properties so that it is set up to use the storyboard user interface file by our application.

There’s more…

You can also choose to manually add new Storyboard template to your project. This can be achieved by performing the following simple steps:

1. Select your project from the project navigator window.
2. Select File New | File…| or press command + N.
3. Select the Storyboard template from the list of available templates, located under the User Interface subsection within the iOS section.



4. Click on the Next button to proceed to the next step in the wizard.
5. Ensure that you have selected iPhone from under the Device Family drop-down menu.
6. Click on the Next button to proceed to the next step in the wizard.
7. Specify the name of the storyboard file within the Save As field as the name of the file to be created.
8. Click on the Create button to save the file to the specified folder.
9. Finally, when we create our project using storyboards, we will need to modify our application’s delegate AppDelegate.m file, as shown in the following code snippet:

   - (BOOL)application:(UIApplication *)application didFinishLaunchin
   gWithOptions:(NSDictionary *)launchOptions
   {
   // Override point for customization after
   // application launch.
   return YES;
   }

   For more information about using storyboards in your applications, you can refer to the Apple Developer documentation, located at https://developer.apple.com/library/ios/#documentation/ToolsLanguages/Conceptual/Xcode4UserGuide/InterfaceBuilder/InterfaceBuilder.

Creating a Twitter application

In this recipe, we will learn how to create a single view application to build our Twitter application.

Getting ready

In this recipe, we will start by creating our TwitterExample project.

How to do it…

To begin with creating a new Xcode project, perform the following simple steps:

1. Launch Xcode from the /Developer/Applications folder.
2. Select Create a new Xcode project, or click on File | New | Project….
3. Select Single View Application from the list of available templates.
4. Click on the Next button to proceed to the next step in the wizard.
5. Next, enter in TwitterExample as the name of your project.
6. Select iPhone from under the Devices drop-down menu.
7. Ensure that the Use Storyboards checkbox has been checked.
8. Ensure that the Use Automatic Reference Counting checkbox has been checked.
9. Ensure that the Include Unit Tests checkbox has not been checked.
10. Click on the Next button to proceed to the next step in the wizard.
11. Specify the location where you would like to save your project.
12. Then, click on the Create button to save your project at the specified location.

    The Company Identifier for your app needs to be unique. Apple recommends that you use the reverse domain style (for example, com.domainName.appName).

Once your project has been created, you will be presented with the Xcode development environment, along with the project files that the template created for you.

How it works…

In this recipe, we just created an application that contains a storyboard and consists of one view controller, which does not provide any functionality at the moment. In the following recipes, we will look at how we can add functionality to view controllers, create storyboard scenes, and transition between them.

Creating storyboard scenes

The process of creating scenes involves adding a new view controller to the storyboard, where each view controller is responsible for managing a single scene. A better way to describe scenes would be to think of a movie reel, where each frame that is being displayed is the actual scene that connects onto the next part.

Getting ready

When adding scenes to your storyboard file, you can add controls and views to the view controller’s view, just as you would do for an XIB file, and have the ability to configure outlets and actions between your view controllers and its views.

How to do it…

To add a new scene into your storyboard file, perform the following simple steps:

1. From the project navigator, select the file named MainStoryboard.storyboard.
2. From Object Library, select and drag a new View Controller object on to the storyboard canvas. This is shown in the following screenshot:

   

3. Next, drag a Label control on to the view and change the label’s text property to read About Twitter App.
4. Next, drag a Round Rect Button control on to the view that we will use in a later section to call the calling view. In the button’s attributes, change the text to read Go Back.
5. Next, on the first view controller, drag a Round Rect Button control on to the view. In the button’s attributes, change the text to read About Twitter App. This will be used to call the new view that we added in the previous step.
6. Next, on the first view controller, drag a Round Rect Button control on to the view, underneath the About Twitter App button that we created in the previous step. In the button’s attributes, change the text to read Compose Tweet.
7. Next, save your project by selecting File | Save from the menu bar, or alternatively by pressing command + S.

Once you have added the controls to each of the view, your final interface should look something like what is shown in the following screenshot:

The next step is to create the Action event for our Compose Tweet button so that it has the ability to post tweets. To create an action, perform the following steps:

1. Open the assistant editor by selecting Navigate | Open In Assistant Editor or by pressing option + command + ,.
2. Ensure that the ViewController.h interface file gets displayed.
3. Select the Compose Tweet button; hold down the control key, and drag it from the Compose Tweet button to the ViewController.h interface file between the @interface and @end tags.
4. Choose Action from the Connection drop-down menu for the connection to be created.
5. Enter composeTweet for the name of the method to create.
6. Choose UIButton from the Type drop-down menu for the type of method to create.

   

The highlighted line in the following code snippet shows the completed ViewController.h interface file, with our method that will be responsible for calling and displaying our tweet sheet.

// ViewController.h
// TwitterExample
//
// Created by Steven F Daniel on 21/09/12.
// Copyright (c) 2012 GenieSoft Studios. All rights reserved.
#import 
@interface ViewController : UIViewController
// Create the action methods
- (IBAction)composeTweet:(UIButton *)sender;
@end

Now that we have created our scene, buttons, and actions, our next step is to configure the scene, which is shown in the next recipe.

How it works…

In this recipe, we looked at how we can add a new view controller to our storyboard and then started to add controls to each of our view controllers and customize their properties.

Next, we looked at how we can create an Action event for our Compose Tweet button that will be responsible for responding and executing the associated code behind it to display our tweet sheet.

Instead of us hooking up an event handler to the TouchUpInside event of the button, we decided to simply add an action to it and handle the output of this ourselves. These types of actions are called “instance methods”. Here we are basically creating the Action method that will be responsible for allowing the user to compose and send a Twitter message.