Connecting Objects

Connecting Objects

June 11, 2015

Project: Learn how to build your very first iOS App

The time has finally come to start connecting the dots and connecting objects from the Interface Builder to our own code. Your code will connect with interface objects through IBAction and IBOutlet connections.


You will create an IBAction when you need to send a message from an object to your code. A good example of this is when a user clicks a button. This action by the user will send a message to execute the function connected to the button.

Open ViewController.swift and ensure your code reads as follows:

class ViewController: UIViewController {

    override func viewDidLoad() {
        // Do any additional setup after loading the view, typically from a nib.

    override func didReceiveMemoryWarning() {
        // Dispose of any resources that can be recreated.

    // Let's handle the button
    @IBAction func buttonTapped(sender: AnyObject) {

Great! You have created a new function that prints out a line of text to our debug window. However, by adding the @IBAction attribute to the function definition, it will now be accessible to the Interface Builder. Notice the little empty circle in the code editor to the left of this function definition...

Select the Assitant Editor view image

If you don't see the view shown above, you will need to change the right panel back to Automatic. You previously changed it to enable the Interface Builder preview mode.


Connecting an Action

You now want to Connect your IBAction to the Button

Click on the circle beside the @IBAction, drag across to your Button (you will see a light blue line between the two), then let go.


That was easy! Notice that the previously empty circle is now filled in, and that hovering your cursor over this circle highlights the Button, confirming the connection. You can also check out any Connections via the Connection Inspector panel.


Great, let's see this in action. Time to run the app...

Click the Button a few times and success, the Debug Panel will now start to fill up with your Ouch message. image

Excellent! Let's see how you handle yourself with outlets.


You will want to use an IBOutlet to enable your code to send a message to your user interface object. For example, changing the string of an interface label from your own code.

Time to try this out for yourself - see if you can:

  1. Add a label to your View
  2. Create a variable with attribute IBOutlet in your ViewController class that you will connect to your UILabel
  3. Connect your View's Label to your code's label variable.
  4. Have the label text change upon pressing the button.

Here's the solution:

Your view ViewController should look something like this:

class ViewController: UIViewController {
    @IBOutlet var label: UILabel!

Let's look at modifying the buttonTapped function to facilitate this.

@IBAction func buttonTapped(sender: AnyObject) {
    label.text = "wooo hoo"

Bonus Points

Have some fun; create other objects in your View and connect them. The best way to learn is to play.


Sometimes things go wrong in development. At times it can be challenging to find out why a certain piece of code isn't working. Xcode has a nice Debugger and it's relatively easy to use.

Let's jump in by adding a breakpoint.

  1. Open ViewController.swift
  2. Click on the left hand side of your code, across from print("Ouch"), you should see a blue highlight appear. image

Time to see it in action.

  1. Run your App
  2. Click on the Button in your App

Xcode will now change and you will be taken back into your code with debug mode enabled. Your App has been effectively halted at the Breakpoint and is waiting to execute the print line of code.


As you can see there is a lot of information disabled. We will be looking at the Variables view. Xcode will automatically present you with the variables in the current scope.

  1. Click on self to expand the current ViewController variable scope.
  2. Right click on label and select Print Description of "label"

You will notice there is a handy quick view of your label. Notice the label text has not been changed yet as this line of code has not been executed yet.


Debug Stepping

Let's step through the code together.

  1. Press the Step Over button. You will see your print code has now been executed and the output is in the debug window.
  2. Press Step Over once again and then select Print Description of "label". You will see this has been updated.


Bring your Simulator back into view and you will notice the label hasn't changed... This is because although the code has updated the labels text value, the App still needs to refresh its View to present this information.

  1. Select Continue Program Execution. It's the button beside Step Over

The App will resume running again and you will notice your Label has been updated. If you select the button again, the breakpoint will be triggered and you will be taken back to the debug mode as before.

In this brief tutorial you've worked with our main tool - Xcode - for the very first time. We've created a screencast that goes along with this tutorial and discusses many advanced features of Xcode:

When you're done watching the screencast, it's time to move on to the next project. Let's take all of this new knowledge and start to build the MakeSchool Notes App.


If you have feedback on this tutorial or find any mistakes, please open issues on the GitHub Repository.

Join Make School Icon

Join Make School

Prepare for your career as a founder or software developer

Apply now
Talk to Us Icon

Talk to Us

If you have any questions, please send us an email.

Email Us