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.
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
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.
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 Vierw Controller in the Canvas by clicking the Assistant Editor.
There 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 display a line on screen to show the connection. Behind the scenes, XML is added to the Storyboard o 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 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.
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.
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 mouse button and Popover appears. Select the Delegate in the Outlets section.
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”
That is it for connection and making the connection for Object in Xcode. Here is the Output: