Workshop 7: Connect The View’s Objects in IB

In the previous lesson you learned how to resolve auto layout issues for the application’s user interface. Now, you have to connect objects placed on the Main.storyboad scene’s canvas to code you’ll add in the ViewController.swift class file. I call this process connecting the view’s objects in IB and it is done in two steps.

  1. You have to declare an instance variable (ivar) or a function for a control you placed on the storyboard scene’s canvas.
  2. Connect the ivar or the function to the storyboard scene’s object, in Interface Builder (IB).

You could perform above tasks your self or let the Assistant editor do them for you.

Before you begin, I assume you read workshop 1-6 and performed tasks presented in the workshops

Here are the Assistant Editor steps for connecting the view’s objects (Text View and Button) in Interface Builder-IB for short.

1. Click the storyboard file to load it in IB. 2. Click the Assistant editor button to show the Assistant editor window. 3. Select Assistant pop up menu. It is the first item to the right of the back and forward arrows in the Assistant editor jump bar-see the image on the left of Figure 1 below. From list that appear on your screen select Automatic | ViewController.swift-see the image on the right of Figure 1 below.

workshop7-fig01
Figure 1

2. In the ViewController.swift file that’s shown in the Assistant editor window, add a few spaces between code line 11 and 13. Your screen should look like Figure 2 below.

workshop7-fig02
Figure 2

quicktipIf line numbers doesn’t appear in the Assistant editor’s gutter-see Figure 2 above. You have to access Xcode Preferences window (⌘ + ,) and tick the Line numbers checkbox in the Text Editing tab-see image below.

xcode-preferences

3. Control-drag from the Text View object to the Assistant editor. Release your mouse when you see a horizontal blue line in the Assistant editor window.

workshop7-fig03
Figure 3

4. In the pop-up shown on your screen, enter outputTextView in the Name box, and click  the Connect button.

workshop7-fig04
Figure 4

When you clicked the Connect button, Xcode:

  1. declared this instance variable (ivar) in the ViewController.swift class file
    @IBOutlet weak var outputTextView: UITextView!
  2. connected the ivar to the Text View object in IB. The black dot you see in the Assistant editor’s gutter shows the connection Xcode made for the Text View object.

5. Control-drag from the “Show Output” button to the Assistant editor. Release you mouse when you see a blue line in the Assistant editor.

workshop7-fig05
Figure 5

6. In the pop-up shown on your screen, select Action from the Connection menu. Enter actionShowOutput in the Name box, and click the Connect button.

workshop7-fig06
Figure 6

When you clicked the Connect button, Xcode:

  • implemented this function in the ViewController.swift file.
    @IBAction func actionShowOutput(sender: AnyObject) {
    }
  • connected the “Show Output” button in to the function in IB. Again, the black dot in the Assistant editor’s gutter shows the connection Xcode made for the button.

You are done using the Assistant editor, so click the Standard editor button. By performing above steps, you told Xcode’s Assistant editor to do the following:

  • declare and connect an ivar to the Text View object in IB.
  • declare and connect a function to the Button object in IB.

Now, if you were to discount the ivar and the function from corresponding objects in IB; you wouldn’t be able to access the Text View and the Button objects in the ViewController.swift class file. By the way, an instance variable is also called an IBOutlet property variable. An IB button’s function is also called an IBAction function.