1
00:00:04,730 --> 00:00:06,859
Alright, so I digressed a bit in the

2
00:00:06,859 --> 00:00:09,230
previous video. We were trying to connect

3
00:00:09,230 --> 00:00:11,510
the button up to some code. So now that

4
00:00:11,510 --> 00:00:13,490
we've actually got references to the

5
00:00:13,490 --> 00:00:15,589
widgets, let's have a go at doing that.

6
00:00:15,589 --> 00:00:17,720
Now I said that the Android framework

7
00:00:17,720 --> 00:00:20,000
takes care of watching for user input,

8
00:00:20,000 --> 00:00:21,919
and notifies us when something

9
00:00:21,919 --> 00:00:23,840
interesting happens. Now the way it

10
00:00:23,840 --> 00:00:26,149
notifies our code of events that happen,

11
00:00:26,149 --> 00:00:28,610
is by calling special methods that we

12
00:00:28,610 --> 00:00:31,430
write called callbacks. So when a button

13
00:00:31,430 --> 00:00:33,170
is clicked, the Android framework will

14
00:00:33,170 --> 00:00:35,239
call an onClick method, if we'd written

15
00:00:35,239 --> 00:00:36,830
one and told Android that it's attached

16
00:00:36,830 --> 00:00:39,260
to the button. Now we can't just go

17
00:00:39,260 --> 00:00:41,180
creating any old method and call it on

18
00:00:41,180 --> 00:00:42,890
Click and expect Kotlin to be able to

19
00:00:42,890 --> 00:00:45,380
cope, though. Kotlin is a strongly typed

20
00:00:45,380 --> 00:00:47,240
language, which means that you have to

21
00:00:47,240 --> 00:00:49,220
provide exactly the right kind of object

22
00:00:49,220 --> 00:00:52,160
or method that something expects. Now the

23
00:00:52,160 --> 00:00:54,739
way that's defined in Kotlin is using

24
00:00:54,739 --> 00:00:57,110
interfaces, and Android uses an interface

25
00:00:57,110 --> 00:00:58,790
called onclickListener.

26
00:00:58,790 --> 00:01:00,800
Now this makes sure that only the

27
00:01:00,800 --> 00:01:02,690
correct type of object is attached to

28
00:01:02,690 --> 00:01:06,470
the button to respond to clicks. And once

29
00:01:06,470 --> 00:01:08,060
again, I'm going to type the code in and

30
00:01:08,060 --> 00:01:10,310
then explain what it's doing. So firstly,

31
00:01:10,310 --> 00:01:12,979
we need to add a line on line 13

32
00:01:12,979 --> 00:01:15,939
and we're going to type private var

33
00:01:15,939 --> 00:01:21,889
space numTimesClicked and put equals

34
00:01:21,889 --> 00:01:24,409
zero on the end of that. And when you're

35
00:01:24,409 --> 00:01:26,600
typing on with this next bit, pay careful

36
00:01:26,600 --> 00:01:28,280
attention to the suggestions that

37
00:01:28,280 --> 00:01:30,619
Android Studio is popping up, and you

38
00:01:30,619 --> 00:01:31,819
might well find that Android Studio

39
00:01:31,819 --> 00:01:33,229
completes more of the code for you

40
00:01:33,229 --> 00:01:35,270
than it does for me. And Google I'm

41
00:01:35,270 --> 00:01:37,819
improving this autocomplete all the time,

42
00:01:37,819 --> 00:01:39,950
and at the moment the autocomplete for

43
00:01:39,950 --> 00:01:41,569
Kotlin doesn't do nearly as much as it

44
00:01:41,569 --> 00:01:44,090
does for Java. But I fully expect that it

45
00:01:44,090 --> 00:01:46,340
will as time goes by, so keep an eye on

46
00:01:46,340 --> 00:01:48,859
what's happening, and also it's a good

47
00:01:48,859 --> 00:01:51,200
idea to watch the autocomplete carefully

48
00:01:51,200 --> 00:01:53,569
anyway. Now just because Android

49
00:01:53,569 --> 00:01:55,490
Studio is suggesting something first,

50
00:01:55,490 --> 00:01:57,859
that doesn't mean that it's what you

51
00:01:57,859 --> 00:02:00,560
want in all situations. At the moment, you

52
00:02:00,560 --> 00:02:02,209
probably won't know what to choose, so

53
00:02:02,209 --> 00:02:03,349
you really want to compare the options

54
00:02:03,349 --> 00:02:05,149
you're getting to what appears on my

55
00:02:05,149 --> 00:02:07,039
screen. Don't worry though, as it all

56
00:02:07,039 --> 00:02:08,330
starts to make sense you'll know which

57
00:02:08,330 --> 00:02:10,580
of the options you want. But firstly,

58
00:02:10,580 --> 00:02:12,560
I'm gonna come down here now, below the last

59
00:02:12,560 --> 00:02:17,520
line here on line 21, and I'm going to type button

60
00:02:17,520 --> 00:02:21,840
question mark dot, and I'm gonna type setOn

61
00:02:21,840 --> 00:02:24,090
Click, and eventually I've got this first

62
00:02:24,090 --> 00:02:25,470
option so I'm gonna press ENTER to that

63
00:02:25,470 --> 00:02:28,680
one. I can try that, and I can do some

64
00:02:28,680 --> 00:02:30,210
typing or I can also come back here

65
00:02:30,210 --> 00:02:35,910
again and do a .setOnClick, select the

66
00:02:35,910 --> 00:02:38,040
first option with the parentheses

67
00:02:38,040 --> 00:02:39,510
created automatically, as you can

68
00:02:39,510 --> 00:02:41,940
see there. I'm going to type object space

69
00:02:41,940 --> 00:02:45,270
colon space, View with a

70
00:02:45,270 --> 00:02:51,780
capital V, View.onClick, ClickListener,

71
00:02:51,780 --> 00:02:54,300
I'm going to press enter there. Next

72
00:02:54,300 --> 00:02:56,610
I'm going to type a left curly brace

73
00:02:56,610 --> 00:02:59,910
then press ENTER, and then I'm going to

74
00:02:59,910 --> 00:03:02,910
type, on the next line now, override, press

75
00:03:02,910 --> 00:03:04,170
ENTER there because that's the word we

76
00:03:04,170 --> 00:03:09,390
want, fun, f u n space onClick, and

77
00:03:09,390 --> 00:03:10,350
you can see I've got this option that

78
00:03:10,350 --> 00:03:12,000
has appeared on the screen there now. If

79
00:03:12,000 --> 00:03:14,610
I press ENTER there, you can see that's

80
00:03:14,610 --> 00:03:16,830
actually generated some code for us, and

81
00:03:16,830 --> 00:03:18,290
it's just saved a bit of typing there.

82
00:03:18,290 --> 00:03:20,190
But you're probably wondering now, what

83
00:03:20,190 --> 00:03:22,740
does all this mean? Well firstly, I

84
00:03:22,740 --> 00:03:25,050
started by this code on line

85
00:03:25,050 --> 00:03:28,050
14, adding a variable called numTimes

86
00:03:28,050 --> 00:03:30,120
Clicked, and that's there to keep track

87
00:03:30,120 --> 00:03:31,740
of how many times we click the button.

88
00:03:31,740 --> 00:03:34,020
Now I've initialized that to zero

89
00:03:34,020 --> 00:03:35,940
because to start with, the button

90
00:03:35,940 --> 00:03:38,460
obviously hasn't been clicked. Now in the

91
00:03:38,460 --> 00:03:41,640
onCreate method, starting on line 24, we

92
00:03:41,640 --> 00:03:43,650
call the setOnClickListener function

93
00:03:43,650 --> 00:03:46,110
of our button. Now as the name suggests,

94
00:03:46,110 --> 00:03:48,150
this function is used to tell Android

95
00:03:48,150 --> 00:03:50,370
what to do when the button is clicked,

96
00:03:50,370 --> 00:03:53,280
and I then created a new object of type

97
00:03:53,280 --> 00:03:56,070
onClickListener as the argument to setOn

98
00:03:56,070 --> 00:03:59,010
ClickListener. In fact, its View.On

99
00:03:59,010 --> 00:04:01,800
ClickListener because the interface is

100
00:04:01,800 --> 00:04:04,470
defined in the View class. Now because

101
00:04:04,470 --> 00:04:06,840
all widgets extend View, they'll all know

102
00:04:06,840 --> 00:04:09,120
about this interface. Now we can tap

103
00:04:09,120 --> 00:04:11,010
things other than buttons, as you will

104
00:04:11,010 --> 00:04:12,570
have seen using your Android phone if

105
00:04:12,570 --> 00:04:14,850
you've got one, in the past. I then added

106
00:04:14,850 --> 00:04:17,310
the onClick method to our onClick

107
00:04:17,310 --> 00:04:19,950
Listener, and it's this method that's

108
00:04:19,950 --> 00:04:22,170
called when the button is clicked. Now

109
00:04:22,170 --> 00:04:24,210
Android Studio doesn't know what we want

110
00:04:24,210 --> 00:04:26,250
to do to onClick, and that's why it's

111
00:04:26,250 --> 00:04:28,290
added this TODO not implemented, and

112
00:04:28,290 --> 00:04:31,330
we have to replace that with our own code.

113
00:04:31,330 --> 00:04:32,590
So actually, let's go ahead and do that, so I'm just going

114
00:04:32,590 --> 00:04:38,710
to delete that line now, this TODO. Now

115
00:04:38,710 --> 00:04:41,500
this is quite a simple method. It's just

116
00:04:41,500 --> 00:04:43,419
going to increase the number times

117
00:04:43,419 --> 00:04:45,969
clicked variable by one and then add a

118
00:04:45,969 --> 00:04:47,650
message to the textView widget. Now

119
00:04:47,650 --> 00:04:49,509
remember that we've now got a reference

120
00:04:49,509 --> 00:04:52,300
to the widget in the textView field, so

121
00:04:52,300 --> 00:04:53,949
we can call it's append method to add

122
00:04:53,949 --> 00:04:56,050
another line of text to it. So I'm going

123
00:04:56,050 --> 00:04:57,159
to go ahead and write the code for that.

124
00:04:57,159 --> 00:04:58,270
So we're going to start by typing

125
00:04:58,270 --> 00:05:01,330
numTimesClicked, select that one, then

126
00:05:01,330 --> 00:05:06,009
type space plus equals one, enter. Then

127
00:05:06,009 --> 00:05:09,400
we're going to type textView?

128
00:05:09,400 --> 00:05:12,580
dot append, and in parentheses

129
00:05:12,580 --> 00:05:16,360
double quotes \n and I'm going to type The

130
00:05:16,360 --> 00:05:23,110
button got tapped, then space then a

131
00:05:23,110 --> 00:05:26,800
dollar sign, numTimesClicked space

132
00:05:26,800 --> 00:05:30,639
time. So again, we've got a reference to

133
00:05:30,639 --> 00:05:32,500
the textView field and that's why we're able

134
00:05:32,500 --> 00:05:34,569
to call the append method there on line 27,

135
00:05:34,569 --> 00:05:38,889
and the \n that you can see here, sorry

136
00:05:38,889 --> 00:05:41,349
the backslash n, I said for /n. The

137
00:05:41,349 --> 00:05:43,840
backslash n at the start of a message

138
00:05:43,840 --> 00:05:46,330
causes a new line to be started, before

139
00:05:46,330 --> 00:05:49,479
the message is displayed. That way each

140
00:05:49,479 --> 00:05:52,029
new message starts on a new line, and

141
00:05:52,029 --> 00:05:53,770
without that the message would just

142
00:05:53,770 --> 00:05:55,150
display one after the other,

143
00:05:55,150 --> 00:05:56,620
wrapping when they reach the end of the

144
00:05:56,620 --> 00:05:59,409
right edge of the textView. Now

145
00:05:59,409 --> 00:06:00,849
you can use the special character

146
00:06:00,849 --> 00:06:02,500
backslash n in strings whenever you want

147
00:06:02,500 --> 00:06:04,330
to insert a line break, although it's

148
00:06:04,330 --> 00:06:06,039
more usual to put it at the end of a

149
00:06:06,039 --> 00:06:08,830
message, rather than at the beginning. So

150
00:06:08,830 --> 00:06:12,279
looking again at code on line 24, that

151
00:06:12,279 --> 00:06:13,839
code's using the button's set

152
00:06:13,839 --> 00:06:16,029
OnclickListener method, to tell the

153
00:06:16,029 --> 00:06:18,339
button that we want to use our onClick

154
00:06:18,339 --> 00:06:20,319
Listener when it's clicked. When the

155
00:06:20,319 --> 00:06:21,940
button's clicked it calls the onClick

156
00:06:21,940 --> 00:06:24,069
method that we've created. Now it may

157
00:06:24,069 --> 00:06:25,360
look complicated but this is the

158
00:06:25,360 --> 00:06:27,849
standard pattern for attaching code to

159
00:06:27,849 --> 00:06:30,039
an event, so that your method is used

160
00:06:30,039 --> 00:06:32,440
when the event happens. Now our code

161
00:06:32,440 --> 00:06:34,000
doesn't have to worry about checking the

162
00:06:34,000 --> 00:06:36,310
button. The onClick method will be called

163
00:06:36,310 --> 00:06:38,469
for us when the button's clicked, and

164
00:06:38,469 --> 00:06:40,240
that's known as event-driven programming

165
00:06:40,240 --> 00:06:43,000
and it's used by most GUI frameworks,

166
00:06:43,000 --> 00:06:44,740
including Microsoft Windows,

167
00:06:44,740 --> 00:06:48,040
gnome or KDE or Linux and the Mac OS X

168
00:06:48,040 --> 00:06:50,919
GUI aqua. Now in fact, you wouldn't

169
00:06:50,919 --> 00:06:52,540
normally write this code in this way.

170
00:06:52,540 --> 00:06:55,060
This is like another longhand version of

171
00:06:55,060 --> 00:06:57,580
the code that we'd normally use. Once

172
00:06:57,580 --> 00:06:59,620
again though, I've done it this way, just

173
00:06:59,620 --> 00:07:00,820
so you can get to see what's really

174
00:07:00,820 --> 00:07:03,669
happening. In the next section, we'll see

175
00:07:03,669 --> 00:07:05,830
the more usual way of writing this code,

176
00:07:05,830 --> 00:07:07,419
and we're going to look at an

177
00:07:07,419 --> 00:07:09,040
alternative way of setting an onClick

178
00:07:09,040 --> 00:07:11,020
Listener and why you'd want to use that

179
00:07:11,020 --> 00:07:13,630
alternative. The important thing, though,

180
00:07:13,630 --> 00:07:16,360
is that however the code's written, what

181
00:07:16,360 --> 00:07:17,919
we've got here is what really happens.

182
00:07:17,919 --> 00:07:20,500
When we call setOnClickListener, we're

183
00:07:20,500 --> 00:07:22,870
given an object that's guaranteed to have an

184
00:07:22,870 --> 00:07:25,270
onClick function that Android can call.

185
00:07:25,270 --> 00:07:27,760
And remember from the Kotlin tutorial

186
00:07:27,760 --> 00:07:30,280
section, that this means the object must

187
00:07:30,280 --> 00:07:31,870
be of a type that has the onClick

188
00:07:31,870 --> 00:07:34,330
function, or must implement an interface

189
00:07:34,330 --> 00:07:37,990
that defines the function. Alright, so

190
00:07:37,990 --> 00:07:40,330
we're passing an object of type View.

191
00:07:40,330 --> 00:07:42,040
onClickListener to the setOnClick

192
00:07:42,040 --> 00:07:44,320
Listener function, so we have to define

193
00:07:44,320 --> 00:07:46,990
its onClick function. Now we do that by

194
00:07:46,990 --> 00:07:48,460
overriding the function with the same

195
00:07:48,460 --> 00:07:51,310
name, that's defined but not implemented

196
00:07:51,310 --> 00:07:53,950
in the interface. So does it work?

197
00:07:53,950 --> 00:07:56,050
Well let's end the video here, and in the next

198
00:07:56,050 --> 00:07:57,370
video we'll give it a bit of a test run

199
00:07:57,370 --> 00:07:59,530
and see what happens. So I'll see you in

200
00:07:59,530 --> 00:08:02,070
the next video.