0
1
00:00:00,660 --> 00:00:07,950
So in the last lesson, we looked at how we can change these UI Elements and their properties programmatically
1

2
00:00:08,250 --> 00:00:14,170
by creating an IBOutlets which gives us a reference to that particular thing,
2

3
00:00:14,190 --> 00:00:22,370
be it an image view or a button or a label, and then we can use our code to actually change its value.
3

4
00:00:22,380 --> 00:00:27,120
Now, in this lesson, we're going to look more closely at how can we do it the other way,
4

5
00:00:27,210 --> 00:00:34,040
how can we detect user interaction on the screen, and then respond to it in our code.
5

6
00:00:34,080 --> 00:00:37,640
Notice currently on our screen, we have four UI Elements.
6

7
00:00:37,650 --> 00:00:40,440
We have a logo which is an image view.
7

8
00:00:40,440 --> 00:00:45,600
We have two dice image views which are already linked up through IBOutlets.
8

9
00:00:45,600 --> 00:00:49,760
And finally, we have a button which is the roll button.
9

10
00:00:49,800 --> 00:00:56,880
Now, given that we need to change the appearance of these two image views, we need that reference or that
10

11
00:00:56,970 --> 00:01:05,310
IBOutlet to be able to grab hold of the correct image view, and then set its image using code.
11

12
00:01:05,310 --> 00:01:08,880
But with our button, we actually don't need to change it at all.
12

13
00:01:08,880 --> 00:01:14,430
We don't want to change its background or its text or its appearance. So we don't actually need an IB
13

14
00:01:14,460 --> 00:01:21,960
outlets, but what we need instead is a way to detect user interaction with this particular UI Element,
14

15
00:01:22,320 --> 00:01:25,800
and then for our code to do something when it detects that.
15

16
00:01:26,520 --> 00:01:30,200
So to achieve this, we have to create a different kind of link.
16

17
00:01:30,390 --> 00:01:32,520
But the process is pretty similar.
17

18
00:01:32,520 --> 00:01:38,970
We hold down the control button, click and drag, and I'm actually going to drop it right here just above
18

19
00:01:38,970 --> 00:01:43,570
that final curly brace. And when I let go,
19

20
00:01:43,570 --> 00:01:49,900
notice that the Connection type is usually automatically selected as an Action.
20

21
00:01:49,990 --> 00:01:53,440
Now, this is because this Roll button is a button.
21

22
00:01:53,440 --> 00:01:59,460
So the natural way of interacting with it or the natural connection you would want to create is an Action.
22

23
00:01:59,590 --> 00:02:04,510
We're going to leave it as it is. But if you needed to change the appearance of that button, you could
23

24
00:02:04,510 --> 00:02:08,870
also change it to an outlet which would be very similar to these two.
24

25
00:02:08,950 --> 00:02:13,210
Now, the next thing we have to add is the name for this button.
25

26
00:02:13,210 --> 00:02:18,310
And whereas previously, our IP outlet describes the UI Element,
26

27
00:02:18,310 --> 00:02:23,040
so the dice imagery one or the left diceImageView, whatever it may be.
27

28
00:02:23,230 --> 00:02:26,230
In this case, we're actually describing the Action.
28

29
00:02:26,350 --> 00:02:30,370
And notice that this Action is going to be triggered by a particular Event.
29

30
00:02:30,610 --> 00:02:37,140
And there's loads of different events, but the most commonly needed one is Touch Up Inside.
30

31
00:02:37,180 --> 00:02:39,400
Now, there's nothing naughty about Touch Up Inside.
31

32
00:02:39,670 --> 00:02:47,710
All it means is that the user's finger fell within the boundary of this button and they lifted up their
32

33
00:02:47,710 --> 00:02:49,780
finger while they're inside the boundary.
33

34
00:02:49,990 --> 00:02:57,730
So it basically is describing a common tap gesture just in a lot of words. The name that we want to give
34

35
00:02:57,730 --> 00:03:02,170
this action is something that describes the trigger.
35

36
00:03:02,170 --> 00:03:04,360
So, in this case I'm going to call it
36

37
00:03:04,360 --> 00:03:09,250
rollButtonPressed to describe the fact that it was tapped or it was pressed.
37

38
00:03:09,340 --> 00:03:13,720
And finally, I'm going to change the type of thing that triggered the action.
38

39
00:03:13,750 --> 00:03:18,700
So if you click on the dropdown list you can see that we can select that it was a button that triggered
39

40
00:03:18,730 --> 00:03:20,510
this particular Action.
40

41
00:03:20,530 --> 00:03:23,710
So now we're going to leave the rest of them as they are,
41

42
00:03:23,790 --> 00:03:25,990
and we're going to click connect.
42

43
00:03:26,110 --> 00:03:31,180
Now, notice that this time the code that gets generated is pretty different.
43

44
00:03:31,180 --> 00:03:33,020
It's no longer an IBOutlet.
44

45
00:03:33,070 --> 00:03:36,910
It's instead an IBAction, an Interface Builder action.
45

46
00:03:36,910 --> 00:03:44,170
So it's a bit of code that will be triggered when an action occurs on this particular User Interface
46

47
00:03:44,200 --> 00:03:45,100
Element.
47

48
00:03:45,100 --> 00:03:51,610
So, in this case, what should happen is whenever we write in between these curly braces.
48

49
00:03:51,610 --> 00:03:58,240
So here's the block of code that we can define, so that we trigger something. For example, a change in
49

50
00:03:58,240 --> 00:03:59,760
our image views.
50

51
00:03:59,980 --> 00:04:05,230
We can test this out using something called a print statement. And you can create one of these by simply
51

52
00:04:05,230 --> 00:04:12,550
writing "print," and then inside some round brackets or some parentheses, you put down whatever it is that
52

53
00:04:12,550 --> 00:04:13,810
you want to print.
53

54
00:04:13,810 --> 00:04:21,100
In this case, I'm going to print some text which says button got tapped. And noticed that in order to
54

55
00:04:21,100 --> 00:04:27,700
describe what you're writing as text, namely telling Xcode that this is not code, it's in fact just some
55

56
00:04:27,910 --> 00:04:32,160
texts that I want to have printed into the debug console,
56

57
00:04:32,170 --> 00:04:38,380
well, then you have to wrap it inside some quotation marks. And in Swift, the convention is to use double
57

58
00:04:38,380 --> 00:04:43,750
quotes, whereas in other languages you might have seen people use single quotes, but this is what we're
58

59
00:04:43,750 --> 00:04:49,060
going to be using from now on when we're just describing NONCODE or text.
59

60
00:04:49,060 --> 00:04:56,650
Now, if we go ahead and run our app, now what we expect to happen is when we press on the Roll button
60

61
00:04:57,070 --> 00:05:02,560
which we know we've linked to this particular IBAction, then it should trigger all the code that we
61

62
00:05:02,560 --> 00:05:04,390
have in this block.
62

63
00:05:04,390 --> 00:05:10,630
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

64
00:05:11,140 --> 00:05:14,250
So let's test it out. As soon as I press on the roll button,
64

65
00:05:14,410 --> 00:05:21,850
you can see the text button got tapped printed down here and it will do that for every single time I
65

66
00:05:21,850 --> 00:05:27,910
press the roll button. If you think about the fact that we have our design file on the left our code
66

67
00:05:27,910 --> 00:05:34,850
file on the right, out IBOutlets are essentially when we want to go from here to here.
67

68
00:05:34,870 --> 00:05:40,110
So where we want our code to change something in our user interface.
68

69
00:05:40,690 --> 00:05:44,370
Whereas IBActions are going from left to right,
69

70
00:05:44,410 --> 00:05:51,920
they are when a interaction with the user interface leads to something happening in our code.
70

71
00:05:52,180 --> 00:05:59,680
If we want these dice faces to change when we press the Roll button rather than simply when the view
71

72
00:05:59,680 --> 00:06:04,270
loads up, well, then we have to connect these two things.
72

73
00:06:04,300 --> 00:06:11,440
So here's a challenge for you. Given that at the moment, where not uploads up, the six dice is shown on
73

74
00:06:11,440 --> 00:06:14,760
the left and the second dice is shown on the right,
74

75
00:06:14,920 --> 00:06:22,270
try and change the code, so that when you press on the Roll button after you run the app that both these
75

76
00:06:22,390 --> 00:06:30,810
image views change the show DiceFour. Pause the video and see if you can complete this challenge. All right.
76

77
00:06:30,840 --> 00:06:38,640
So given that we know that we can change the properties of our images programmatically just as we have
77

78
00:06:38,640 --> 00:06:45,200
done right here by using that Who.What=Value equation,
78

79
00:06:45,260 --> 00:06:47,270
we could do the same thing down here, right?
79

80
00:06:47,310 --> 00:06:53,150
Let's delete this print statements and I'm gonna tap into the diceImageView1 and I'm gonna
80

81
00:06:53,190 --> 00:07:00,450
change its image property, and I'm gonna set it to a new image literal. And in this case, it's going to
81

82
00:07:00,450 --> 00:07:07,980
be a DiceFour that's going to be shown and I'm going to do the same for the second image view.
82

83
00:07:08,460 --> 00:07:17,880
And it should be exactly the same process. But now if we run our app, what happens is that the first thing
83

84
00:07:17,880 --> 00:07:24,270
that gets triggered is the block in viewDidLoad, so our left dice gets changed to six, our right dice
84

85
00:07:24,270 --> 00:07:31,620
gets changed to two. But then this part of the code is actually not going to happen unless I trigger
85

86
00:07:31,620 --> 00:07:33,240
it through this IBAction.
86

87
00:07:33,360 --> 00:07:40,800
So remember that touch up inside? So touch and then as long as I lift my mouse up inside the boundaries,
87

88
00:07:40,890 --> 00:07:48,070
then it's going to trigger this block of code and change both image views to show DiceFour.
88

89
00:07:48,060 --> 00:07:49,620
So did you manage to get that right?
89

90
00:07:50,160 --> 00:07:56,370
If not I recommend taking a look at the previous lesson and revisiting how we figured out to change
90

91
00:07:56,430 --> 00:07:59,760
these properties through using our code.
91

92
00:08:00,060 --> 00:08:05,640
Now, the next lesson is an optional lesson and we're going to talk more in-depth about some of the things
92

93
00:08:05,640 --> 00:08:07,430
that we've used and we've really covered,
93

94
00:08:07,470 --> 00:08:14,460
for example, naming conventions other than camel casing or commenting in your code, as well as print statements
94

95
00:08:14,460 --> 00:08:15,900
and string interpolation.
95

96
00:08:16,380 --> 00:08:22,260
So if you're already an advanced programmer, then feel free to skip the next lesson and continue building
96

97
00:08:22,260 --> 00:08:25,070
out the app and learn more about iOS development.
97

98
00:08:25,290 --> 00:08:29,400
But if you want to do a deep dive on some of these things I've just mentioned, then head over to the
98

99
00:08:29,400 --> 00:08:30,060
next lesson.