The storyboard in XCode is one of the main ways used to create layouts for apps. You can add labels, buttons and many other objects to the storyboard. Once on the storyboard to connect them up to your code you can do so via actions our outlets.

What you will learn

• The difference between an action and outlet
• How to connect objects up to your code using actions & outlets

What is actions & outlets?

Outlet & Actions allow you to connect objects in your storyboard to your code.

By using an outlet you can access methods and properties of an object. An example of this is settings a label’s test, setting it’s background colour and placeholder text.

By using an action it allows you to execute code in response to events taken on the object connected up. The most simple example is clicking on a button which then in turn would set a label’s text.

Setup

To setup the app for this example create a new XCode project.  Go to the storyboard and add buttons & labels as follows with a label & button object.

Connecting up an outlet

To connect up an outlet in the storyboard, select the label. With the label selected in the upper right hand corner of XCode click the assistant editor button . This will split the screen up into two views, you will see your storyboard on the left and now you will also see your associated code with that storyboard (ViewController.swift) on the right.

Now hold in the control key when the label is selected. Start dragging and you will see a blue line come out of the label. To connect it up to your code drag this line and drop it in between the ViewController class and viewDidLoad(). You will see the following dialog box pop up.

By default the connection type is an Outlet so we can leave this as default. The name is a unique name to reference the label. In this case we are going to name it “lblWelcome”. The type is automatically detected as a UILabel and leave the storage as Strong.

Now in the viewDidLoad function add the following line:

lblWelcome.text = "Hello"

Run the application and you will see the label text is set to Hello. This is one of the properties we can access and set using the outlet.

Add the following code as well to set the background color, there are many other properties & also methods you can access in this way.

lblWelcome.backgroundColor = UIColor.redColor()

You would have also noticed when typing out lblWelcome.backgroundColor it will attempt to autocomplete the text, using this menu you can also scroll through to see the properties & methods, neat!

Connecting up an action

To connect up an action in the storyboard, select the button. With the label selected in the upper right hand corner of XCode click the assistant editor button . This will split the screen up into two views, you will see your storyboard on the left and now you will also see your associated code with that storyboard (ViewController.swift) on the right.

Now hold in the control key when the button is selected. Start dragging and you will see a blue line come out of the label. To connect it up to your code drag this line and drop it in between the ViewController class and viewDidLoad(). You will see the following dialog box pop up.

Change the connection from outlet to action, and name it btnPress. Have a look at what event options they are, but set it as Touch Up Inside. This means when you tap and lift of the button the code in this action will be run. Go connect then modify the btnPress code to look like the following:

    @IBAction func btnPress(sender: AnyObject) {
        lblWelcome.text = "Action"
    }

Run the app and press the button to see what happens. The lblWelcome test will be set to Hello, once you take action on the button in which this case is on the touch up inside event.