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

Updated on November 17, 2016
klanguedoc profile image

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

Comments

    0 of 8192 characters used
    Post Comment

    • klanguedoc profile imageAUTHOR

      Kevin Languedoc 

      4 years ago from Canada

      Glad I was of some help

    • profile image

      Eugenio 

      4 years ago

      Thanks Kevin!

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

    • klanguedoc profile imageAUTHOR

      Kevin Languedoc 

      5 years ago from Canada

      thanks

    • profile image

      khmohsin 

      5 years ago

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

    • klanguedoc profile imageAUTHOR

      Kevin Languedoc 

      5 years ago from Canada

      Hi Selley,

      Thanks for the great feedback. Its always appreciated.

      Kevin

    • profile image

      selley 

      5 years ago

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

      Thanks

    • klanguedoc profile imageAUTHOR

      Kevin Languedoc 

      5 years ago from Canada

      You're welcome

    • profile image

      Doug 

      5 years ago

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

    • klanguedoc profile imageAUTHOR

      Kevin Languedoc 

      6 years ago from Canada

      I am glad you approve dobo700

    • dobo700 profile image

      dobo700 

      6 years ago from Australia

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

    • klanguedoc profile imageAUTHOR

      Kevin Languedoc 

      6 years ago from Canada

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

    • kellyburby1 profile image

      Shubhnagi 

      6 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 imageAUTHOR

      Kevin Languedoc 

      6 years ago from Canada

      Thanks Martyn

    • profile image

      Martyn F 

      6 years ago

      Very useful indeed!

      Thanx

    • klanguedoc profile imageAUTHOR

      Kevin Languedoc 

      6 years ago from Canada

      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

    • profile image

      Burak Altin 

      6 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 imageAUTHOR

      Kevin Languedoc 

      6 years ago from Canada

      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 profile image

      John Sarkis 

      6 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

    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, turbofuture.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://turbofuture.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)