Quick Tutorial on Storyboarding with IOS 5 for iPhone and iPad applications

IOS 5 introduced a slew of new features for building iPhone, iPad and iPod Touch apps. In all some 200+ new features were added to the IOS 5 and 1500 new or modified classes were added to the SDK. Of the new features, Storyboarding is a big shift for building UIs or User Interfaces. Storyboarding lets a developer layout all the navigation between scenes (IOS screens) using Segues. This tutorial will introduce the following:

  1. Create Single View Application
  2. Storyboarding
  3. Add connections to Actions and Outlets
  4. Adding code to send text to the label
  5. Format the Label
  6. Test Your App
  7. Quick mention about ARC and automatic object recycling

The new IOS 5 templates
The new IOS 5 templates
Setting up the app, including ARC
Setting up the app, including ARC

Create Single View Application


The IOS 5 SDK introduces new templates in XCode 4.3. This has changed considerably from IOS 4. These include a Master-Detail application, Open GL Game, Page-Based Application, Single View Application, Tabbed Application, Utility Application and Empty Application.

For the purposes of this tutorial we will create a Single View application.

  • Launch XCode 4.2
  • Select View Application template from the IOS 5 Application Category, or do File | New | Project from the XCode 4.2 menu.
  • Enter a name for your app
  • Select the iPhone device family
  • Select Automatic Reference Counting
  • Select Storyboarding

Building UIs Storyboards


Once the project is built, expand the files in the Project Navigator and locate the MainStoryboard.storyboard file and select it to open it. Storyboard is very similar to the previous UI Canvas, except the Storyboard can have multiple scenes open. In fact you can design the complete flow of your application within one Storyboard file. A scene which is a screen in IOS 5 can contain any type of Controllers and other objects necessary to build your UI.

Open the Utility View on the right hand side of the screen. We will drag and drop a Label (UILabel) and a button (UIButton) onto the View. Next select the button object
and open the Identity Inspector to name the Button: sayHelloWorld. Likewise repeat the process for the Label: helloLbl.

The Storyboard of our app.
The Storyboard of our app.

Add Connections

For this part, click on the Assistant Editor, from the View menu Show Assistant Editor | Assistant Editor, or click on the face icon on the right hand side of the XCode editor. Open the header file so that is beside the Storyboard file in the Editor (See screenshot below). Select the label object, using the right button of the mouse click, drag a connection line to the header file, in between the @interface and @end labels. In the Connection popup, enter a name for the connction, like “helloLbl”. XCode will add the function declaration to the header file and the implementation file. If you open the implementation file, you will notice that XCode added the necessary code for you as the screenshot below demonstrates.

The Assistant Editor
The Assistant Editor
Drag a connection from the UILabel to the header file.
Drag a connection from the UILabel to the header file.
Add the Connection name and click on Connect
Add the Connection name and click on Connect

Do the same for the button object. In the Connection property popup, change the Connection to “Action” and enter a value for the Name like “sayHello”. Click Connect to add the code to the header file.

To set the label text, we will need to add some code to the button method in the implementation file. Open the implementation file and locate the implementation of the sayHello method and add the code as below between the curly braces.


- (IBAction)sayHello:(id)sender {
self.helloLbl.text = @"hello world";

}

Format the UILabel Text


There is two ways you can format the string value of a the UILabel: through the Attributes Inspector, or through the UIFont in Objective-C.

Open the Attributes Inspector (View | Utilities | Show Attributes Inspector). Select the UILabel, helloLbl, on the View Controller and you will discover several attributes that are available to allow you to customize the UILabel right in the Storyboard.

The other option, and I might add, will override the attributes set in the Attributes Inspector, is to set the formatting with the UIFont class.

Open the View Controller implementation file, locate the “viewDidLoad” method and the following code right after the [super viewDidLoad] pointer. In the code snippet, I assigned a font size of 30 points to the boldSystemFontOfSize method in the UIFont class.
….
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
helloLbl.font = [UIFont boldSystemFontOfSize:30];
}
….

You will get an error when you save because the LLVM compiler can’t find the library. We will need to add the UIKit library (Framework) that contains the UIFont class. Scroll to the top of the file and just below the #import “kcbViewController.h” add the UIKit/UIKit.h library. Notice the angle braces and the double quotes for the two different library. when you import a library local to the project you use double quotes. When you import an external or system library, use the angle brackets.

#import "kcbViewController.h"
#import <UIKit/UIKit.h>

Test Your App


Click the Run button, or Command-R to run the app. Once the app is running in the Simulator, click on the button and the Hello World text should display in the label.

The running app
The running app

Quick mention about ARC and automatic object recycling


If you selected the Automatic Reference Counting, ARC, there is no need to release the objects from memory as it is done automatically for you.

Connection Inspector


Open the Connections Inspector, your connections to the objects should look like the screenshot below, meaning the dots should be filled in for the two objects.

Source Code

Implementation file Code

//
//  kcbViewController.m
//  HelloWorld
//
//  Created by Kevin Languedoc on 11/22/11.
//  Copyright (c) 2011 kCodebook. All rights reserved.
//

#import "kcbViewController.h"
#import <UIKit/UIKit.h>

@implementation kcbViewController
@synthesize helloLbl;


- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Release any cached data, images, etc that aren't in use.
}

#pragma mark - View lifecycle

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    helloLbl.font = [UIFont boldSystemFontOfSize:30];
}

- (void)viewDidUnload
{
    [self setHelloLbl:nil];
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
}

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
}

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
}

- (void)viewWillDisappear:(BOOL)animated
{
	[super viewWillDisappear:animated];
}

- (void)viewDidDisappear:(BOOL)animated
{
	[super viewDidDisappear:animated];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    // Return YES for supported orientations
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}

- (IBAction)sayHello:(id)sender {
    self.helloLbl.text = @"Hello There...World";
}
@end


Header File

//
//  kcbViewController.h
//  HelloWorld
//
//  Created by Kevin Languedoc on 11/22/11.
//  Copyright (c) 2011 kCodebook. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface kcbViewController : UIViewController
@property (weak, nonatomic) IBOutlet UILabel *helloLbl;
- (IBAction)sayHello:(id)sender;

@end

Summary



This was a really quick overview of the developing IOS apps with the new XCode 4.2 IDE and some of the new features like Storyboards. The next tutorial will show you how to add multiple scenes (View Controller) and navigation with segues.

More by this Author


Comments

No comments yet.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working