Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
In iOS, views manage the layout of the app while a view controller connects this view to the main logic of the app. In this video, we’ll take a look what a view controller is and how we can interact with our views using IBAction.
Teacher's Notes
-
0:00
In the last video, we added a button to our view.
-
0:03
We can click that button but, unfortunately, it doesn't do anything.
-
0:07
To control what goes on in our view, we need to use a View Controller.
-
0:12
A view controller is an important component of our app
-
0:15
that links the app's data to its visual appearance.
-
0:18
Now, our app is somewhat minimal and has only two objects but most apps have a fair
-
0:24
amount of information to display in a limited amount of space.
-
0:27
The showing and hiding of this information is handled by a view controller.
-
0:32
And by having different view controllers control different sections of our
-
0:35
app's information, we can separate our code into more manageable chunks and
-
0:40
keep it somewhat neat and tidy.
-
0:43
If we navigate to our project directory in the navigator area, we can see that when
-
0:48
we created our project template, Xcode added some files for us automatically,
-
0:54
including a file called view controller that has two separate files here.
-
0:58
Objects in interface builder, that is in our main.storyboard file, can be
-
1:04
associated with a class so that we can talk to these objects through our code.
-
1:10
Now, if we go back to our main.storyboard file and in the document outline here,
-
1:15
which you can bring up using this icon, if you don't have it up.
-
1:18
Click on the View Controller Scene at the very top.
-
1:22
Now, go to the identity inspector, which is the third icon in the Utilities area.
-
1:28
Over here, where it says Custom Class, it lists our view controller file,
-
1:32
which is this same file that you see here.
-
1:35
You can even verify that by clicking on the arrow to go to that file, and
-
1:39
it's selected over here.
-
1:41
Now, this Custom class means that this object in
-
1:45
interface builder is controlled by this class in our code.
-
1:50
So we can write code in our view controller files that manipulate what we
-
1:54
see in our storyboard, but there are two files here.
-
1:58
So, which one do we use to add code?
-
2:00
Well, we actually use both.
-
2:02
Now, we've covered this in the Objective C basics content, but
-
2:06
let's revise what we've learned.
-
2:09
Our two view controller files have different extensions each.
-
2:12
One ends with a .h, and is known as a header file,
-
2:17
while the other ends with a .m, and is called an implementation file.
-
2:22
Some programming languages, of which objective C is one,
-
2:26
uses files called a header file that allows you to
-
2:29
separate certain elements of our code into reusable files.
-
2:33
Generally, everything public in our classes, that is,
-
2:37
anything we want to expose to other parts of our app, we place in the header file.
-
2:42
Everything else then goes into the implementation file.
-
2:46
The header file also makes it easier for others to understand how your class is
-
2:51
structured by quickly glancing at the public properties and methods.
-
2:56
Now, this distinction will become more clear as we write more code.
-
3:01
Head back to the main.storyboard file.
-
3:04
Now, to wire things up from our visual interface to our code, we use
-
3:09
a feature of Xcode called the Assistant Editor that displays files side by side.
-
3:15
Let's make some more room.
-
3:16
I'm going to get rid of the document outline and
-
3:19
you can also get rid of the project navigator and utility areas by clicking
-
3:23
the Show Hide navigator area and utilities areas button in the Tool bar.
-
3:29
In the toolbar, on the top right, this first set of icons, the second icon,
-
3:35
which is the set of inter locking circles here, is the Assistant Editor button.
-
3:39
Click it, now the assistant editor is somewhat smart and
-
3:43
tries to figure out which file you need to work on.
-
3:46
As you can see, it automatically brought up the view controller implementation file
-
3:51
for me, but if it did not do that for you, you can bring it up manually.
-
3:55
Up on top over here we have a fin bar called the jump bar.
-
4:00
Click right here where it says Automatic and go to Manual instead.
-
4:04
From there you can navigate through your project directory to
-
4:07
find the file that you need.
-
4:08
Look for viewcontroller.m.
-
4:12
The first thing we want to do is hook up our button so
-
4:15
that when we click on it we can make it do something.
-
4:19
To do that, click on the button.
-
4:21
And then with the Ctrl key on your keyboard pressed, click and
-
4:25
drag over to the implementation file, below the didReceiveMemoryWarning method,
-
4:31
until you have a pop up that says Insert Action and let go.
-
4:35
When naming our actions we want to give it a name that signifies what we're
-
4:39
doing when the action executes.
-
4:42
In our app, every time we tap on a button, we want to see a different fun fact.
-
4:48
So let's name our action, showFunFact.
-
4:52
You'll notice that I wrote out the action name with no spaces.
-
4:56
With the first letter lowercase and
-
4:59
the first letter of subsequent words as uppercase.
-
5:02
This is called Camel Casing, and it is the naming convention for
-
5:06
methods when writing Objective C code.
-
5:09
You can see that over here and in the viewDidLoad method as well.
-
5:13
Let's leave the event as it is and change the arguments to none.
-
5:17
And hit Connect.
-
5:19
Let's take a look at this function that we created for a second.
-
5:22
First we have the keyword IBAction in
-
5:25
parenthesis which indicates a return type of IB action.
-
5:30
What is an IB action?
-
5:32
The keyword IB action lets Interface Builder know that this
-
5:36
method is linked up to an object in Interface Builder by an action.
-
5:42
The IB over here stands for Interface Builder.
-
5:45
Now, when you click on this control, that is, the button,
-
5:48
you instruct the app to reference this method in our ViewController class and
-
5:53
execute the code inside this function.
-
5:56
This is a common design pattern when writing iOS apps, and
-
6:00
it's known as Target Action.
-
6:02
The action is the message that the control sends and
-
6:05
the receiving object is our target.
-
6:08
So in our case,
-
6:09
the ViewController class is the target, and the showFunFact is the action.
-
6:15
The action and its target is tied to an event.
-
6:18
In our case, that's the touch event.
-
6:21
And when the touch event occurs on this control, the sequence is initiated.
-
6:26
With the target action method, you can also send information about the sender and
-
6:30
the event that took place.
-
6:32
Okay, let's write our first bit of code.
-
6:35
Inside this showFunFact method, let's add NSLog, and
-
6:40
then in between parentheses, let's add a string that says, You pressed me.
-
6:46
Whoops, I need to close the string off, there you go.
-
6:49
Now NSLog is a function that simply writes out text to the console when executed.
-
6:55
In our case, we're passing in a string to the function saying, you pressed me.
-
6:59
Now, remember, we need to start our string with an at symbol, and
-
7:02
enclose the string with double quotes, which I almost forgot.
-
7:06
We then end the line of code with a semicolon.
-
7:08
Let's give this a try.
-
7:10
I'm gonna run the app, and when I press the button,
-
7:13
it should execute the action and run the code inside this method.
-
7:18
Look at that.
-
7:19
In your console,
-
7:19
the text, you pressed me appears, meaning that our code is getting executed.
-
7:24
Also, this seems super simple, but it's just the start.
-
7:29
We're going to build on top of this to do some really cool stuff.
You need to sign up for Treehouse in order to download course files.
Sign up