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.

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.

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.


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.

Figure 3

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

Figure 4

When you clicked the Connect button, Xcode:

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.

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.

Figure 6

When you clicked the Connect button, Xcode:

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:

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.