ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

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

Updated on May 14, 2012
klanguedoc profile image

Kevin is Software Developer with 20 years experience designing and building business intelligence and system integration solutions.

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.

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)