So in the last lesson, we looked at how we can change these UI Elements and their properties programmatically 1
by creating an IBOutlets which gives us a reference to that particular thing, 2
be it an image view or a button or a label, and then we can use our code to actually change its value. 3
Now, in this lesson, we're going to look more closely at how can we do it the other way, 4
how can we detect user interaction on the screen, and then respond to it in our code. 5
Notice currently on our screen, we have four UI Elements. 6
We have a logo which is an image view. 7
We have two dice image views which are already linked up through IBOutlets. 8
And finally, we have a button which is the roll button. 9
Now, given that we need to change the appearance of these two image views, we need that reference or that 10
IBOutlet to be able to grab hold of the correct image view, and then set its image using code. 11
But with our button, we actually don't need to change it at all. 12
We don't want to change its background or its text or its appearance. So we don't actually need an IB 13
outlets, but what we need instead is a way to detect user interaction with this particular UI Element, 14
and then for our code to do something when it detects that. 15
So to achieve this, we have to create a different kind of link. 16
But the process is pretty similar. 17
We hold down the control button, click and drag, and I'm actually going to drop it right here just above 18
that final curly brace. And when I let go, 19
notice that the Connection type is usually automatically selected as an Action. 20
Now, this is because this Roll button is a button. 21
So the natural way of interacting with it or the natural connection you would want to create is an Action. 22
We're going to leave it as it is. But if you needed to change the appearance of that button, you could 23
also change it to an outlet which would be very similar to these two. 24
Now, the next thing we have to add is the name for this button. 25
And whereas previously, our IP outlet describes the UI Element, 26
so the dice imagery one or the left diceImageView, whatever it may be. 27
In this case, we're actually describing the Action. 28
And notice that this Action is going to be triggered by a particular Event. 29
And there's loads of different events, but the most commonly needed one is Touch Up Inside. 30
Now, there's nothing naughty about Touch Up Inside. 31
All it means is that the user's finger fell within the boundary of this button and they lifted up their 32
finger while they're inside the boundary. 33
So it basically is describing a common tap gesture just in a lot of words. The name that we want to give 34
this action is something that describes the trigger. 35
So, in this case I'm going to call it 36
rollButtonPressed to describe the fact that it was tapped or it was pressed. 37
And finally, I'm going to change the type of thing that triggered the action. 38
So if you click on the dropdown list you can see that we can select that it was a button that triggered 39
this particular Action. 40
So now we're going to leave the rest of them as they are, 41
and we're going to click connect. 42
Now, notice that this time the code that gets generated is pretty different. 43
It's no longer an IBOutlet. 44
It's instead an IBAction, an Interface Builder action. 45
So it's a bit of code that will be triggered when an action occurs on this particular User Interface 46
Element. 47
So, in this case, what should happen is whenever we write in between these curly braces. 48
So here's the block of code that we can define, so that we trigger something. For example, a change in 49
our image views. 50
We can test this out using something called a print statement. And you can create one of these by simply 51
writing "print," and then inside some round brackets or some parentheses, you put down whatever it is that 52
you want to print. 53
In this case, I'm going to print some text which says button got tapped. And noticed that in order to 54
describe what you're writing as text, namely telling Xcode that this is not code, it's in fact just some 55
texts that I want to have printed into the debug console, 56
well, then you have to wrap it inside some quotation marks. And in Swift, the convention is to use double 57
quotes, whereas in other languages you might have seen people use single quotes, but this is what we're 58
going to be using from now on when we're just describing NONCODE or text. 59
Now, if we go ahead and run our app, now what we expect to happen is when we press on the Roll button 60
which we know we've linked to this particular IBAction, then it should trigger all the code that we 61
have in this block. 62
And what we've told it to do is just to print this text to the debug console which is going to pop up. 63
So let's test it out. As soon as I press on the roll button, 64
you can see the text button got tapped printed down here and it will do that for every single time I 65
press the roll button. If you think about the fact that we have our design file on the left our code 66
file on the right, out IBOutlets are essentially when we want to go from here to here. 67
So where we want our code to change something in our user interface. 68
Whereas IBActions are going from left to right, 69
they are when a interaction with the user interface leads to something happening in our code. 70
If we want these dice faces to change when we press the Roll button rather than simply when the view 71
loads up, well, then we have to connect these two things. 72
So here's a challenge for you. Given that at the moment, where not uploads up, the six dice is shown on 73
the left and the second dice is shown on the right, 74
try and change the code, so that when you press on the Roll button after you run the app that both these 75
image views change the show DiceFour. Pause the video and see if you can complete this challenge. All right. 76
So given that we know that we can change the properties of our images programmatically just as we have 77
done right here by using that Who.What=Value equation, 78
we could do the same thing down here, right? 79
Let's delete this print statements and I'm gonna tap into the diceImageView1 and I'm gonna 80
change its image property, and I'm gonna set it to a new image literal. And in this case, it's going to 81
be a DiceFour that's going to be shown and I'm going to do the same for the second image view. 82
And it should be exactly the same process. But now if we run our app, what happens is that the first thing 83
that gets triggered is the block in viewDidLoad, so our left dice gets changed to six, our right dice 84
gets changed to two. But then this part of the code is actually not going to happen unless I trigger 85
it through this IBAction. 86
So remember that touch up inside? So touch and then as long as I lift my mouse up inside the boundaries, 87
then it's going to trigger this block of code and change both image views to show DiceFour. 88
So did you manage to get that right? 89
If not I recommend taking a look at the previous lesson and revisiting how we figured out to change 90
these properties through using our code. 91
Now, the next lesson is an optional lesson and we're going to talk more in-depth about some of the things 92
that we've used and we've really covered, 93
for example, naming conventions other than camel casing or commenting in your code, as well as print statements 94
and string interpolation. 95
So if you're already an advanced programmer, then feel free to skip the next lesson and continue building 96
out the app and learn more about iOS development. 97
But if you want to do a deep dive on some of these things I've just mentioned, then head over to the 98
next lesson.