Outlet vs Action Connections in Xcode

What is an outlet or action connection?

Outlet and Action connections are direct ways that a UIViewController can communicate with its UView. For example, when a View Controller needs to set the text of a UILabel, it would do so through the outlet connection. When a View’s UIButton object is tapped, it passes the message to the View Controller by using the action connection. This means the outlet created in the View Controller is declared as a @property, and an action is created by declaring a method.

An outlet connection is created when you need to send a message from your code to a user interface object in Xcode’s storyboard. The object can be a control, such as a button, a slider, and a switch, or it can be any other object defined in your storyboard, such as a label and a progress bar. For example, when your code determines that a label should display some texts, the code sends a message through the outlet telling the label to display the new text.

An action connection is created when you need to send a message from a control in the storyboard to your code. A control is a user interface object that causes actions or visible results when a user manipulates the object. For example, when a user taps a button, the button sends an action message to your code telling it to execute the appropriate method. Other examples of controls that can be used to create action connections are text fields, sliders, and switches.

How do you create an outlet or action connection?

There are several ways to create a connection between a view in storyboard with the implementation file in your view controller. Here are some examples.

Control-dragging is the most common way to create an outlet or action connection. Simply control-click on the object in storyboard, and drag the cursor into the implementation file.

The least common way of making a connection is to programmatically type the outlet or action in the implementation file using the keyword, IBOutlet or IBAction. This tells Xcode you want to create an outlet or action connection. Then it places an open circle on the left gutter of the code, which allows you to click and drag from in the circle and into the appropriate object in storyboard.

The open circle in the left gutter of the outlet means no connection has been made yet.

Another method that is somewhat similar to control-dragging is to control-click on the object in storyboard so a pop-up menu appears. Then click in one of the open circle on the right of the desired property of the object and drag the cursor into the implementation file to complete the connection.

Control-click on the object in storyboard. Then drag from the menu to the implementation file

Did you know that control dragging into different sections of your code offers different options for outlet and action connection?

Control-dragging to the @interface section of the code allows you to make an outlet or action connection. If you choose to make an action connection, it will also generate the corresponding method declaration in the @implementation section.

Creating an outlet or action connection

Control-dragging to the @implementation section of the code will only give you the option to create an action connection. This makes sense because when you declare an action connection, you are defining a method where you can implement additional code to act on that action.

Creating an action connection

Did you also know…?

Control-clicking on a Mac computer is equivalent to performing a right click on a mouse. Since a Mac traditionally have one button on the trackpad, in order to perform a right click, you would have to control-click. However, on a multi-touch trackpad, a user can perform a two finger click to simulate a right click. Basically, this means that control-dragging to make outlet and action connections is simply to right click and drag with a mouse — or in the case of the multi-touch trackpad, two finger click and drag.