Master the building blocks of an app: code architecture, UI elements, animations and interactions

As we established earlier in this course, the primary responsibility of the ViewController (ViewController.swift file) is to control the view. So let's make it be aware of all the elements we have composed within our interface.

We are going to create 2 types of connections:

• elements to variables

• actions to functions

Creating IBOutlets

Let's switch to assistant view with the Main Storyboard on the left and the ViewController on the right (you can hide the Navigator and Utilities panel to make more space):

Select the frame view and right click on it to display the context menu:

Select the dot next to 'New Referencing Outlet' and drag to the view controller file until you see the blue guiding line:

Provide a name for the variable that will represent our view and click 'Create':

We can see a new connection has been created:

Repeat the same for the rest of the components that require an outlet:

• image view:  creationImageView 

• start over button:  startOverButton

• color label:  colorLabel

• color swatches container:  colorsContainer 

• share button:  shareButton

You should have the following outlet variables in your controller:

@IBOutlet weak var creationFrame: UIView!
@IBOutlet weak var creationImageView: UIImageView!
@IBOutlet weak var startOverButton: UIButton!
@IBOutlet weak var colorLabel: UILabel!
@IBOutlet weak var colorsContainer: UIView!
@IBOutlet weak var shareButton: UIButton!

Creating IBActions

We need to create actions for the 'TouchUpInside' event for the following buttons:

• Startover

• Colors

• Share

We'll start with Startover button. Select the button and right click to access the context menu. This time,  select the circle against 'TouchUpInside' and drag to the controller file until the blue guidelines appear:

Provide a name for the function that will represent our action and click 'Create':

And observe a function added to the ViewController file:

@IBAction func startOver(_ sender: Any) {
        
}

Next, select the first color button and repeat the process, but this time, select UIButton for type:

Then, we are going to repeat the same thing for the rest of the buttons except, instead of creating an individual function for each action, we are going to connect them to the same function. Then we'll be able to tell the buttons apart by the sender parameter of that function. Drag the 'TouchUpInside' handle to the controller file hovering the applyColor function we previously created until it gets wrapped in a blue bubble:

Now all our color buttons are connected to the same function.

The last button to connect is "share". Go ahead and connect it on your own with the function name Share.

Then, let's add test code for each button using the print function. As a result your code should look like this:

@IBAction func startOver(_ sender: Any) {
    print("Starting over")
}
    
@IBAction func applyColor(_ sender: UIButton) {
    print("Applying color")
}
    
@IBAction func share(_ sender: Any) {
    print("Sharing")
}

Test it out, run the app in simulator, click all the buttons, and when you observe the console it should display the following output:

Startingover
Applyingcolor
Applyingcolor
Applyingcolor
Applyingcolor
Applyingcolor
Sharing

Good progress!

Oh, that! That's already done!

Xcode has already made our data model available in our code! The way Swift projects work is that we don't need to explicitly connect the files. The code in all files is sharable between the files. For now, let's create a variable for our creation and place the declaration right after our outlets:

var creation = Creation.init()

That didn't trigger any errors!

Done & Done!

• To connect View with controller, we need to create variables associated with view elements and functions associated with the actions of those elements by creating Outlets and Actions. 

• Model components are available by default in all controller files of the application.