Introduction to Mac Development: Connecting UI Elements

If you read the Connections Inspector section of the article on how to build a user interface for a Mac app, you’ll notice I didn’t mention how to make connections in your user interface. Making connections is a large enough topic to warrant its own article, which you are reading now. After reading this article you’ll know how to connect UI elements so you can access them in your code.

Virtually all the material in this article also applies to iOS apps.

Outlets

In Interface Builder (it’s part of Xcode) you create connections by creating outlets and actions. An outlet is a variable that holds a reference to an item in a storyboard or xib file. Use outlets to access UI elements in your code.

Actions

An action is a function that gets called when someone interacts with your app’s user interface, such as choosing a menu item or clicking a button.

Creating and Connecting an Outlet

Interface Builder lets you create and connect outlets and actions in one step. To create an outlet and connect it, start by opening the assistant editor. Choose Editor > Assistant to open the assistant editor. If you’re running an older version of Xcode, choose View > Assistant Editor > Show Assistant Editor.

Have the storyboard open in one editor. Have the source code file open in the second editor for the class, most likely a view controller, where you want to add the outlet.

Select the UI element in the storyboard. Hold down the Control key, and drag to the source code file. When you are inside the class, Xcode’s editor will display the message Insert Outlet or Action. Release the button. A popover like the following will open:

Enter the name of the outlet in the Name text field. The type is the type of the UI element you selected in the storyboard. Make sure the Storage menu is set to Strong. Click the Connect button to create the outlet and connect the UI element to the outlet.

Notice the filled-in circles on the left side next to each outlet. Those circles tell you the outlets are connected. Once you connect an outlet, you can access it in your code.

Creating and Connecting an Action

Creating and connecting an action is pretty much the same as creating and connecting an outlet. Open the assistant editor so the storybord and source code file are both open. Select the UI element and control-drag to the source code file.

Enter a name for the action in the Name text field. Xcode defaults to using the Any type for actions, which means the sender of the action can be any data type. You can also use the type of the UI element you selected in the storyboard. Use the type of the UI element if you need to access a property of that element in the action’s code.

Click the Connect button to create the action and connect the UI element to the action.

The filled-in circle indicates the action is connected. Once you connect an action, you can add code for the action so your app responds properly to the action.

Exercise

Create an app that keeps track of the number of times someone clicks a button. In the user interface, add a button and two labels: one with the text Clicks: and one with the initial value of zero.

Add an outlet for the label that displays the number of clicks. Add an action to handle the button click, which involves increasing the number of clicks by one and displaying the current number of clicks in the label. I have the project on GitHub for you to look at if you get stuck.