Updated date:

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

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

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

This article is accurate and true to the best of the author’s knowledge. Content is for informational or entertainment purposes only and does not substitute for personal counsel or professional advice in business, financial, legal, or technical matters.

Comments

Kevin Languedoc (author) from Canada on April 20, 2014:

Glad I was of some help

Eugenio on January 25, 2014:

Thanks Kevin!

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

Kevin Languedoc (author) from Canada on February 27, 2013:

thanks

khmohsin on February 21, 2013:

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

Kevin Languedoc (author) from Canada on February 11, 2013:

Hi Selley,

Thanks for the great feedback. Its always appreciated.

Kevin

selley on January 31, 2013:

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

Thanks

Kevin Languedoc (author) from Canada on January 20, 2013:

You're welcome

Doug on January 19, 2013:

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

Kevin Languedoc (author) from Canada on December 06, 2012:

I am glad you approve dobo700

dobo700 from Australia on December 05, 2012:

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

Kevin Languedoc (author) from Canada on October 19, 2012:

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

Shubhnagi from 100 Merrick Road Suite 310 W Rockville Centre, New York 11570 on October 18, 2012:

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

Kevin Languedoc (author) from Canada on May 01, 2012:

Thanks Martyn

Martyn F on May 01, 2012:

Very useful indeed!

Thanx

Kevin Languedoc (author) from Canada on March 02, 2012:

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 https://hubpages.com/@klanguedoc

K

Burak Altin on March 02, 2012:

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 :)))

Kevin Languedoc (author) from Canada on February 27, 2012:

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

John Sarkis from Winter Haven, FL on February 27, 2012:

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

Voted up

John