WEBVTT

1
00:00:00.480 --> 00:00:04.360
that looks like i already saw
that in the package structure

2
00:00:04.360 --> 00:00:09.270
also like our pattern like model
 view and controller and we

3
00:00:09.270 --> 00:00:13.800
got all this for our little
counter exactly so we have an

4
00:00:13.800 --> 00:00:17.700
observer it's of type observer
 but actually it's a view

5
00:00:17.700 --> 00:00:22.410
okay and we have a
countercontroller which is

6
00:00:22.490 --> 00:00:25.780
our controller and then
we have the counter and

7
00:00:26.660 --> 00:00:30.460
probably you already noticed while
 we had the program running

8
00:00:30.460 --> 00:00:33.250
we have something that
counts clicks and then

9
00:00:33.480 --> 00:00:37.380
translates the data that is
collected by counting these clicks

10
00:00:37.380 --> 00:00:40.250
into the position of the
 square of the square

11
00:00:40.490 --> 00:00:44.560
and that's basically what
 the program does so

12
00:00:44.570 --> 00:00:50.100
we define them up here and
then in the setup method

13
00:00:50.350 --> 00:00:55.360
we actually get a new
instance of all these

14
00:00:55.720 --> 00:00:59.160
of all these classes so we we
instantiate the objects here

15
00:01:00.590 --> 00:01:04.350
and what we also see is
that we've got some yeah

16
00:01:04.360 --> 00:01:07.990
inheritance between them or some
 dependencies between them

17
00:01:07.990 --> 00:01:12.010
so our view in this
case is an observer

18
00:01:12.650 --> 00:01:17.670
and that our counter so the model
 is passed to the constructor

19
00:01:17.670 --> 00:01:20.930
of the controller
and that the view

20
00:01:21.280 --> 00:01:25.780
also gets passed in this
 case our main app

21
00:01:25.800 --> 00:01:29.360
this is necessary for processing
but it's also gets passed the

22
00:01:29.360 --> 00:01:35.590
actual model so we already
see the dependencies here

23
00:01:35.590 --> 00:01:39.880
exactly and this
maybe is worth

24
00:01:41.270 --> 00:01:45.930
one more sentence so asRalf
 already said we passed

25
00:01:45.940 --> 00:01:48.870
TheApp here

26
00:01:49.220 --> 00:01:54.550
a reference to TheApp so
that in each of the views

27
00:01:54.550 --> 00:01:58.600
we can we can kind of refer to
these methods that come with

28
00:01:58.820 --> 00:02:00.560
processing otherwise that
 wouldn't be possible

29
00:02:00.710 --> 00:02:05.250
or we would need to kind
of extend the PApplet

30
00:02:05.530 --> 00:02:09.240
with each of these
views and that's

31
00:02:09.240 --> 00:02:12.300
something we don't want to do we
want maintainable code and this

32
00:02:12.300 --> 00:02:17.900
is a way to do it
let's step into the

33
00:02:17.910 --> 00:02:21.100
model view controller of thing a
little but more in order to better

34
00:02:21.100 --> 00:02:24.600
understand and where should
we start i would say let's

35
00:02:24.940 --> 00:02:28.330
start right here with
 the controller so

36
00:02:28.500 --> 00:02:32.930
whenever somebody
clicks on the window

37
00:02:33.290 --> 00:02:38.250
it will call the handleevent
method of the controller so

38
00:02:38.250 --> 00:02:42.010
this is pretty general and we
can dive right into it so when

39
00:02:42.200 --> 00:02:46.920
we go to the countercontroller
 and the countercontroller

40
00:02:47.700 --> 00:02:54.030
pretty short so not much things
yeah it says counter.setcount

41
00:02:54.030 --> 00:02:59.520
counter.setcount plus one that's
 not so quite nice i would

42
00:02:59.520 --> 00:03:02.490
rather prefer to move the logic
i mean this is basically the

43
00:03:02.490 --> 00:03:05.240
logic that we have here
the getcount plus one

44
00:03:05.490 --> 00:03:07.630
i would prefer to move
that to the model and we

45
00:03:07.900 --> 00:03:09.470
will do that and
 in a second

46
00:03:09.620 --> 00:03:13.230
but let's go through it
 first it basically

47
00:03:13.230 --> 00:03:15.880
just has a reference to
 the counter and it

48
00:03:16.040 --> 00:03:19.210
manipulates the counter so it
 interacts with the model

49
00:03:19.550 --> 00:03:26.610
exactly so let's go to the
counter and here we see ok

50
00:03:26.980 --> 00:03:30.770
this is a list of observers that
 we talked about in the we

51
00:03:30.770 --> 00:03:34.260
first see that it's a
subject it's a subject

52
00:03:34.680 --> 00:03:39.490
it implements subject as you
remember maybe from the from the

53
00:03:39.500 --> 00:03:42.950
observer pattern
that we've shown

54
00:03:42.950 --> 00:03:45.640
in one of the videos
before in the last video

55
00:03:45.830 --> 00:03:50.070
so what does the subject
do i want to see that

56
00:03:50.070 --> 00:03:54.140
probably first i'm curios yeah
 you can have that actually

57
00:03:54.140 --> 00:03:57.540
you basically you see it already
here so i see two of the methods

58
00:03:57.540 --> 00:04:01.350
but is that
all? it's all

59
00:04:02.400 --> 00:04:06.580
the subject asks the counter
that it has to have at least

60
00:04:06.590 --> 00:04:11.870
the attach method and the notifyallobservers
 method so with the attach method

61
00:04:11.970 --> 00:04:15.980
we can register also with
the notifyallobservers

62
00:04:15.980 --> 00:04:19.160
we can notify all observers
and then there might also be

63
00:04:19.160 --> 00:04:22.860
for example a detachment method if
we want to get rid of observers

64
00:04:22.860 --> 00:04:26.950
this is also sometimes
 called observable

65
00:04:27.530 --> 00:04:31.920
as an interface because we
normally want to call interfaces

66
00:04:31.920 --> 00:04:34.790
with -able we talked about
 it in the java course

67
00:04:34.960 --> 00:04:38.650
and then the counter would implement
 an observable for example

68
00:04:39.600 --> 00:04:42.720
we just named it
subject here because

69
00:04:42.730 --> 00:04:46.120
we took that from
the design pattern

70
00:04:46.400 --> 00:04:51.050
so what we see here in the counter
 again so it overrides these

71
00:04:51.300 --> 00:04:55.530
methods and with the attach
method it basically just

72
00:04:55.670 --> 00:04:59.170
adds the observer that we pass
 that's one of our views

73
00:04:59.400 --> 00:05:03.700
to this list
of observers

74
00:05:03.700 --> 00:05:07.250
that we have here so it's an arraylist
 because it needs to continually

75
00:05:07.250 --> 00:05:11.580
grow whenever we have this new
thing that is interested in

76
00:05:11.580 --> 00:05:14.360
what we are doing here
and wants to observe us

77
00:05:14.690 --> 00:05:17.900
we want to edit and we don't
want to have fixed side and

78
00:05:18.200 --> 00:05:22.800
so we're using an arraylist
 and then we have the

79
00:05:22.850 --> 00:05:26.700
next method that is overwritten and
 this is the notifyallobservers

80
00:05:26.700 --> 00:05:30.350
can you be just like new
through the observer list

81
00:05:30.870 --> 00:05:35.770
and call the update method of the
observables and as you probably

82
00:05:36.160 --> 00:05:38.650
might notice we don't
as an argument here

83
00:05:38.840 --> 00:05:44.160
so we will use the pull on way
of accessing this data and we

84
00:05:44.160 --> 00:05:46.800
will kind of that's one of the
things i want to do here is

85
00:05:46.800 --> 00:05:50.900
where we will changed at
and kind of switch to a

86
00:05:51.240 --> 00:05:56.640
push method ok later and
 now we see also the

87
00:05:56.960 --> 00:06:01.880
set count and get congress it's
yeah and so z so logic which

88
00:06:01.880 --> 00:06:05.350
is happening there were less well
 actually the actually logic

89
00:06:05.350 --> 00:06:09.930
as as we just had is happening
here in this line in the control

90
00:06:09.930 --> 00:06:12.660
and that's something that we want
 to do we want to move this

91
00:06:12.660 --> 00:06:15.410
to the model that rather
the logic is happening

92
00:06:15.410 --> 00:06:19.760
here because we can set something
 and if it is set we notify

93
00:06:19.760 --> 00:06:23.540
all observers so yeah exactly so
 this is the least important

94
00:06:23.540 --> 00:06:26.420
god notify the observers
whenever something that

95
00:06:26.750 --> 00:06:32.120
good and finally what did
 without we have not

96
00:06:32.120 --> 00:06:34.400
seen if you spend
 about so on

97
00:06:37.320 --> 00:06:40.570
we have to count of you with
extensive observers so as i've

98
00:06:40.570 --> 00:06:44.810
probably i would say i want
to see the observer hertz

99
00:06:46.720 --> 00:06:49.790
this is

100
00:06:53.030 --> 00:06:57.300
the observer it provides and a
reference to the display this

101
00:06:57.300 --> 00:07:00.530
is where we passed the this from
 the at two different we can

102
00:07:00.530 --> 00:07:02.530
there is all the
processing things with

103
00:07:02.690 --> 00:07:07.230
which come with a with a p applet
 and then we have to construct

104
00:07:07.230 --> 00:07:10.320
of the observe and in the construct
 of the observer because

105
00:07:10.320 --> 00:07:12.950
the p after that's what
 we give over here

106
00:07:13.100 --> 00:07:17.490
so we just say meant nothing happened
 and then we have to subject

107
00:07:17.700 --> 00:07:22.440
and this is actually the thing
that is going to be observed

108
00:07:22.650 --> 00:07:27.580
by count up here in this case
and we say subject attach this

109
00:07:27.590 --> 00:07:30.780
so this is the attachment that
that we just had in the subject

110
00:07:30.780 --> 00:07:36.100
on it called and we attach
this also have a to do list

111
00:07:36.100 --> 00:07:39.660
of observers for the
model and this is a

112
00:07:39.930 --> 00:07:43.010
pretty much bet whenever you find
 something like an observer

113
00:07:43.010 --> 00:07:45.670
model it will be constructed
 like this so if

114
00:07:45.880 --> 00:07:50.620
something is different you should
 be curious about it but if

115
00:07:50.620 --> 00:07:53.170
it looks like this it's
just a plain observer

116
00:07:54.280 --> 00:07:58.960
so and then we have an
african method update

117
00:07:58.970 --> 00:08:02.090
and this will be implemented
 than in the endangered

118
00:08:02.720 --> 00:08:05.260
and this can be in the
implemented differently in

119
00:08:06.640 --> 00:08:10.850
several views and seven reveal
several reviews can watch the

120
00:08:10.850 --> 00:08:15.370
same thing and rick such
observe deserted later

121
00:08:15.650 --> 00:08:20.020
and we already prepared a couple
 of all lines is always so

122
00:08:20.020 --> 00:08:24.910
i said we want to move
the on the logic to the

123
00:08:24.910 --> 00:08:30.810
control to the model and we
 want to on switch from

124
00:08:31.140 --> 00:08:36.900
pull to push as a first let's
 see the view not yeah

125
00:08:38.400 --> 00:08:44.120
so we've got the counter we want
to see if it's ok and so when

126
00:08:44.120 --> 00:08:47.580
we when we have the constructor
 we put the counter into

127
00:08:48.260 --> 00:08:53.940
this like we know first we call
super and this is so to just

128
00:08:53.940 --> 00:08:56.840
once repeated we already know
what super just from that of

129
00:08:56.850 --> 00:09:02.210
course is that we call the constructor
 authors so so superclass

130
00:09:02.450 --> 00:09:05.370
this is the observer and this
is what we just have so long

131
00:09:05.380 --> 00:09:10.600
as the displayed collected that
here and then you have to subject

132
00:09:10.610 --> 00:09:18.480
to list in and if we go
 there so the first

133
00:09:18.480 --> 00:09:20.990
thing if we create a kind
 of view as we attach

134
00:09:21.130 --> 00:09:25.790
this kind of you to the counter and
 then we also save a reference

135
00:09:25.790 --> 00:09:28.820
to the counter and
 then we update

136
00:09:29.280 --> 00:09:32.680
with your salary up through
 the lesser it's because

137
00:09:32.740 --> 00:09:35.650
we don't have any data from the
 model yet so we're going to

138
00:09:35.650 --> 00:09:39.440
retrieve it by
calling update

139
00:09:44.090 --> 00:09:46.380
what else do we
need are we i

140
00:09:46.670 --> 00:09:49.040
that's something that
we should talk about

141
00:09:49.310 --> 00:09:53.320
so this display this is kind of
 the pf that that we've been

142
00:09:53.340 --> 00:09:56.650
passing around her
 own tell you

143
00:09:56.880 --> 00:10:01.480
and now on this display
 we can call all

144
00:10:02.440 --> 00:10:06.550
what is it provided by processing
 so the food method and to

145
00:10:06.550 --> 00:10:09.540
set the color or we can call
that background method to set

146
00:10:09.550 --> 00:10:11.840
back on color we can call
 the wreck method to

147
00:10:11.970 --> 00:10:15.350
to to correcting and here
 you can see we have

148
00:10:15.420 --> 00:10:18.820
cooling wrecked it's a rectangle
we should maybe say that yeah

149
00:10:19.080 --> 00:10:24.660
rectan so and here we
pull the data from

150
00:10:24.800 --> 00:10:28.050
the object from from the
model to to use it here

151
00:10:28.970 --> 00:10:33.870
and then these are just fix
values and then we call the

152
00:10:34.020 --> 00:10:38.710
redrawn method of the
display so as we don't

153
00:10:38.880 --> 00:10:42.020
have something in the draw method
 in the initial problem of

154
00:10:42.020 --> 00:10:44.870
the we need to call this
re-draw method so that

155
00:10:44.870 --> 00:10:47.170
we see something you
see something that's

156
00:10:47.380 --> 00:10:52.060
that it's ok so what should
 we do first remove

157
00:10:54.370 --> 00:10:58.080
the kala and get rid of the
 reference look on and

158
00:10:58.090 --> 00:11:02.120
used to push yeah probably
 based sourcing yes

159
00:11:02.130 --> 00:11:05.980
so we'll want to we thought
 that when we click

160
00:11:06.080 --> 00:11:10.060
our own little rectangle
moves and this is done

161
00:11:10.060 --> 00:11:14.760
by retrieving the count here and
we when we have a higher number

162
00:11:14.760 --> 00:11:18.470
in there we've got a
different x position

163
00:11:18.790 --> 00:11:20.800
so therefore the thing
 moves right yeah

164
00:11:20.950 --> 00:11:25.070
and this is going to stay they
regardless of what we're doing

165
00:11:25.080 --> 00:11:26.980
with what the
concept is so

166
00:11:27.110 --> 00:11:30.900
yeah so what we will do basically
is we factoring so not nothing

167
00:11:30.900 --> 00:11:34.630
in the behavior will change which
as we can have we organised ok