report

A Beginner’s Guide to Storyboard Object Connections & Delegates on iOS

Apple introduced the Storyboard with IOS 5 and Mac OS X 10.7.x. It was a nice evolutionary step forward - first having IB in Xcode then having the ability to create a complete workflow on one Canvas. In the past you had to create multiple XIB files. What hasn’t really changed much is how to make connections, although the placement of the First Responder and File Owner icon are located with the View Controller and not on the side but they work the same. The disconnect between UI (IB) and the Controller (class) is confusing to newcomers; wether these are new programmers or just new to Objective-C and Xcode.

Once you understand the mechanics of how the connect the UI elements to the backend class, everything is much more simpler and you begin gasp in awe at the simplicity of design of Xcode and Cocoa.

To demonstrate, this tutorial will walk your through an example of laying out the some UI objects on a View Controller, connecting them and adding some code to provide some interaction. This tutorial is in response to a readers request for such a tutorial.

The Project


To get started, create a Single View Project and leave the Storyboard option checked. Once the project is loaded, we are going to add some objects tot he View Controller. Select the Controls from the Object Library. See screenshot below

Workspace Layout
Workspace Layout

Drag and drop three labels and two textfields and a button tot he Canvas. The change the text in the Label, either click on the label and start typing or open the Attribute Inspector, see screenshot below and adjust the properties in the appropriate fields.

Add Objects from Object Library
Add Objects from Object Library

To make a TextField “read-only” select the TextField and unselect the “enable” option in the Attribute Inspector

Setting an UITextField to Read Only
Setting an UITextField to Read Only

The Connections


To make connections between Objects and the View Controller, close the View in Xcode and open the ViewController header alongside the Vierw Controller in the Canvas by clicking the Assistant Editor.

Open Assistant Editor
Open Assistant Editor

There three types of Connections that you can make:

  • IBOutlet
  • IBAction
  • IBOutletCollection

It is mostly the first two that developers use. IBOutlet are for output Controls like Labels and TextFields, while IBAction are mostly for Objects like Buttons.

Make a connection for the first field, by holding the Control button and dragging a connection line from the TextField to the header file. XCode is display a line on screen to show the connection. Behind the scenes, XML is added to the Storyboard o indicate the connection.

Make IBOutlet Connections
Make IBOutlet Connections

When you release the mouse button, a Popover will appear to allow you to configure your Connection. In the Connection field select IBOutlet as a connection type. Give you connection a name so that you may refer to it in your code and finally make sure that Type is the corresponding type for the Object you have selected and the Storage type is “strong”. Click connect to allow Xcode make a connection and add the appropriate code to the header file.

Configure the IBOutlet
Configure the IBOutlet
View Connection Details
View Connection Details

Right click on the TextField will bring up the Connection Objects sheet. Notice how in the Reference Outlets, a reference was created between the TextField and the View Controller (kl View Controller) and in the header file a filled in dot appears in the margin indicating a connection.

Next select the button and repeat the process. However this time select IBAction as a Connection. Notice how the Type becomes id and two new configuration fields appear: Event & Arguments. For Event, leave the “Touch Up Outside” selected and for the arguments leave the default “Sender” value. Click “Connect” to create the code in the header file and make a connection.

Control+Drag to Create an IBAction
Control+Drag to Create an IBAction
Configure IBAction
Configure IBAction

Repeat the process for all the remaining Objects that will interact with each other. You should have the same amount of IBOutlets as my example if you are following along.

All connections and actions defined
All connections and actions defined

Switch to the implementation file and you will see that your properties have been synthesized or created to getter and setter. Your Objects were also added to the viewDidUnload and set to nil to clean up our variables before ARC removes them.

Properties Synthesized
Properties Synthesized

The DoSomething method was also added to the implementation file for you.

IBAction implementation
IBAction implementation

Add Interaction


To complete our example, add the following code to display the text from the TextField in the Label and second TextField:

Add code to IBAction
Add code to IBAction

When a user enters a UITextField, the keyboard will automatically appear. It is up to the programmer to make the keyboard dismiss when no longer needed. The keyboard will respond to the resignFirstResponder. You can call the resignFirstResponder from an IBAction like our button:

Add resignFirstResponder
Add resignFirstResponder

However a more efficient way is to set the Delegate for the UITextField and let the delegate act on behalf of the UITextField and dismiss the keyboard when the keyboard return key is pressed.

To set the delagate, open the Storyboard and select the UITextField at the top. Control+drag (this means press Control button on keyboard and drag a line using mouse left button) to the View Delegate, this is the Yellow Orb. Release mouse button and Popover appears. Select the Delegate in the Outlets section.

Add Field Delegate to View Controller
Add Field Delegate to View Controller
Configure Delegate
Configure Delegate

Now return to the implementation file and add the following textFieldShouldReturn
UITextField merthod which will be called automatically when “Done” or return key is pressed on keyboard.

Note: To change the Return button on keyboard, select the textfield and in Attribute Inspector for Return Key property, select “Done”

Configure Keyboard Return Key
Configure Keyboard Return Key

That is it for connection and making the connection for Object in Xcode. Here is the Output:

Running App
Running App

More by this Author


Comments 18 comments

John Sarkis profile image

John Sarkis 4 years ago from Los Angeles, CA

Great hub. I wish I had your knowledge about computers and the likes...enjoyed your article

Voted up

John


klanguedoc profile image

klanguedoc 4 years ago from Canada Author

Hey John

Thanks a lot for your kind words, I am glad you enjoyed it. Everything can be learned. If you enjoy programming, I encourage you to learn.

Kevin


Burak Altin 4 years ago

This is exactly what I need to start. Cause I can't find any beginner guide for Xcode4.2 and mac os 10.7

Thanks for your big help...

If you can write more like this I can worship you :)))


klanguedoc profile image

klanguedoc 4 years ago from Canada Author

Wow thanks. I am sure I can oblige. I am working on a few new ones right now. check back in a couple of days. Anything in particular you would like to see or learn?

In the meantime, you can check out my other tutorials at http://hubpages.com/@klanguedoc

K


Martyn F 4 years ago

Very useful indeed!

Thanx


klanguedoc profile image

klanguedoc 4 years ago from Canada Author

Thanks Martyn


kellyburby1 profile image

kellyburby1 4 years ago from 100 Merrick Road Suite 310 W Rockville Centre, New York 11570

its just great to go through this tutorial with such ease explanation


klanguedoc profile image

klanguedoc 4 years ago from Canada Author

Thanks kellyburny1. It is always appreciated that my hubs are helpful.


dobo700 profile image

dobo700 3 years ago from Australia

This is fantastic explanation of how to get started in Xcode. Thanks


klanguedoc profile image

klanguedoc 3 years ago from Canada Author

I am glad you approve dobo700


Doug 3 years ago

Hi -- very helpful to know how to connect the text fields to the controller to connect to the delegate. Thanks!


klanguedoc profile image

klanguedoc 3 years ago from Canada Author

You're welcome


selley 3 years ago

it is completely a revamped iOS experience... really loved this... :) http://www.clickaphone.co.uk/news/2361/apple-sold-...

Thanks


klanguedoc profile image

klanguedoc 3 years ago from Canada Author

Hi Selley,

Thanks for the great feedback. Its always appreciated.

Kevin


khmohsin profile image

khmohsin 3 years ago from London,UK

Hi Klanguedoc, you shared an amazing and very informative hub with us. You did great work, I like this hub.


klanguedoc profile image

klanguedoc 3 years ago from Canada Author

thanks


Eugenio 2 years ago

Thanks Kevin!

I was looking for how to hook delegate by interface builder and you were the answer!


klanguedoc profile image

klanguedoc 2 years ago from Canada Author

Glad I was of some help

    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

    Menu

    Explore