How to Add Outlets in Your iOS App

By Jesse Feiler

Outlets are the way your iOS app code can access — either by sending messages or setting properties — the Interface Builder objects in your storyboard. You can do all this graphically in Interface Builder, and the required code is generated for you.

Open the Assistant editor

To create an outlet, you need to connect the interface object in Interface Builder with your code. Although you have a couple of ways to make this connection, the easiest and most clear-cut way is to use the Assistant editor to automatically display the code file that’s most relevant to the interface element you’re working with. To make the Assistant editor automatically display a likely code file, follow these steps:

  1. Select the Main_iPad.storyboard file in the Project navigator.

  2. Close the Utility area if it’s open by deselecting it in the View selector in the Xcode toolbar.

  3. In Interface Builder, select the View Controller – TestDrive in the View Controller – TestDrive Scene in the Document Outline; then click the Assistant Editor button in the Editor selector on the toolbar.

    image0.jpg

    The Assistant editor pane opens. If Automatic is chosen in the toolbar, you will have a choice of views in TestDriveController.h and TestDriveController.m. That’s because both files are relevant to the selected view in the Document Outline. You want to work with so TestDriveController.m, if necessary.

    image1.jpg

A Jump bar appears at the top of each Editor area pane and gives you a way to navigate through the files in your project. The configuration and behavior of each Jump bar is customized for the context in which it appears. In addition to a hierarchical path that enables you to navigate to a file in your project, the basic configuration of a Jump bar includes the following:

image2.jpg

  • The Related Items menu (accessed by clicking the icon shown in the left margin) grants you access to additional selections relevant to the current context, such as recently opened files or the interface (.h) header file for an implementation (.m) code file you’re editing.

    image3.jpg

  • Previous and Next buttons enable you to step back and forth through your navigation history.

Creating the outlet

After you have the TestDriveController implementation displayed, either by having the Assistant editor display it automatically or by navigating to it using the Jump bar, the actual creating-an-outlet business using the Interface Builder editor is very straightforward and pretty easy. You do it by Control-dragging from the element you’re interested in to the TestDriveController interface, as detailed in the following steps:

  1. Control-click and drag TestDriveController.h from the element in the view (the car image, in this example) to the file between the @interface and –d statements.

    image4.jpg

  2. In the dialog that appears, name this outlet car and then click the Connect button.

    image5.jpg

    The outlet is added as a property.

    The new outlet in all its glory.

    image6.jpg

    A connection between an object and its outlets is actually stored in a nib file. When the nib file is loaded, each connection is reconstituted and reestablished, thus enabling you to send messages to the object. IBOutlet is the keyword that tags an instance-variable declaration so that the Interface Builder app knows that a particular instance variable is an outlet — and can then enable the connection to it.

  3. Go back to the Interface file and create an outlet for the Test Drive button (name it testDriveButton).

    Control-drag from the button to the TestDriveCntroller interface in the same way as you do the car image (between the @interface and –d statements).

The only reason you need to create an outlet for a button is to change a Button property.

The Connections inspector

While clicking and dragging is the easy way to go, you should know that you can make the same outlet connections using the Connections inspector in the Utility area, with a bit more work. But the real value of the Connections inspector is that it shows you what the outlets and received actions — covered next — and the segues actually are. To use the Connections inspector, follow these steps:

  1. Select Standard editor on the View selector in the toolbar.

    The Assistant editor closes.

  2. Show the Utility area by selecting it in the View selector.

    image7.jpg

  3. Select the Connections inspector by clicking its icon in the Inspector selector bar.

  4. In the Document Outline, select the View Controller in the Test Drive Controller – Test Drive Scene.

    image8.jpg

You can see that in the Outlets section of the Connections inspector, the view controller contains both car and testDriveButton outlets (as should yours, if you followed along and created them). You’ll also see in the Referencing Storyboard Segues section a Push from Table View Cell – Cell. The view outlet has always been there — it’s part of the template.

You can also Control-click the view controller in the Document Outline to get a similar picture in the Connections window.

Besides showing the outlets, if you need to change what an existing outlet points to, the Connections inspector or window is the way to go. Just drag from the circle at the end of the connection in the Outlets section in the Connections inspector or Connections window to the Interface Builder object you want that outlet to point to.

If you wanted to create an outlet without all this dragging, you would simply enter the code that Interface Builder created for you in the view controller’s @interface (the property — don’t forget the IBOutlet):

@property (weak, nonatomic) IBOutlet UIImageView *car;

The new outlet will show up in the Connections inspector and window, and then all you need to do is drag from the circle at the end of the connection in the Outlets section to the Interface Builder object you want that outlet to point to.

When you add outlets, you have some memory management considerations, not to mention the entire subject of properties.