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, whether 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 you 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 reader's request for such a tutorial.
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 to the View Controller. Select the Controls from the Object Library. See screenshot below.
Drag and drop three labels and two textfields and a button to the Canvas. Then change the text in the Label; either click on the label and start typing or open the Attribute Inspector. See the screenshot below and adjust the properties in the appropriate fields.
To make a TextField “read-only”, select the TextField and unselect the “enable” option in the Attribute Inspector.
To make connections between Objects and the View Controller, close the View in Xcode and open the ViewController header alongside the View Controller in the Canvas by clicking the Assistant Editor.
There are three types of Connections that you can make:
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 displayed as a line on the screen to show the connection. Behind the scenes, XML is added to the Storyboard to indicate the connection.
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 your 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.
Right clicking 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). 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. For the arguments, leave the default “Sender” value. Click “Connect” to create the code in the header file and make a connection.
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.
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.
The DoSomething method was also added to the implementation file for you.
To complete our example, add the following code to display the text from the TextField in the Label and second TextField.
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.
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 the mouse button and the Popover will appear. Select the Delegate in the Outlets section.
Now return to the implementation file and add the following textFieldShouldReturn
UITextField method, 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”.
That is it for connection and making the connection for Object in Xcode. Here is the output.
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.
Kevin Languedoc (author) from Canada on April 20, 2014:
Glad I was of some help
Eugenio on January 25, 2014:
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:
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:
Thanks for the great feedback. Its always appreciated.
selley on January 31, 2013:
it is completely a revamped iOS experience... really loved this... :) http://www.clickaphone.co.uk/news/2361/apple-sold-...
Kevin Languedoc (author) from Canada on January 20, 2013:
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:
Martyn F on May 01, 2012:
Very useful indeed!
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
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:
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.
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