1
00:00:00,370 --> 00:00:03,370
One of the things that's important
to gather up at this beginning phase

2
00:00:03,370 --> 00:00:06,710
is to determine what makes the state
of our application change.

3
00:00:07,730 --> 00:00:10,470
So there's a couple of things from
the mockup that change the state.

4
00:00:10,470 --> 00:00:12,660
Now obviously, there are buttons, right?

5
00:00:12,660 --> 00:00:13,900
Play, Pause and Resume.

6
00:00:14,900 --> 00:00:17,180
Now clicking Start will
begin a new attempt and

7
00:00:17,180 --> 00:00:20,560
change the color of the screen and
start the timer.

8
00:00:20,560 --> 00:00:23,110
Let's take a look at the board, and
see if we can't see anything else.

9
00:00:24,360 --> 00:00:26,640
Okay, so let's pick up the story here.

10
00:00:26,640 --> 00:00:29,800
As a user, I should always know
what state I am in, focus, break or

11
00:00:29,800 --> 00:00:31,900
pause, so that I'm not distracted.

12
00:00:31,900 --> 00:00:34,380
So, let's pull that over
into the doing column and

13
00:00:34,380 --> 00:00:35,280
let's talk about that a little bit.

14
00:00:35,280 --> 00:00:40,370
So that was where we wanted to just
change the color of the screen, right,

15
00:00:40,370 --> 00:00:44,950
so the way that we solved that with a mock
ups was the screen color changes, right?

16
00:00:44,950 --> 00:00:48,850
Focus is one color, break is
another color and when it's paused,

17
00:00:48,850 --> 00:00:51,220
the pause button shows up.

18
00:00:51,220 --> 00:00:52,850
In addition to changing
the color of the screen,

19
00:00:52,850 --> 00:00:55,870
we also wanted to set the title
of the page of what's happening.

20
00:00:55,870 --> 00:00:58,010
Let's go set that up in our controller.

21
00:00:58,010 --> 00:01:00,480
So, in addition to changing
the color of the screen,

22
00:01:00,480 --> 00:01:04,040
we also wanted to set that title,
remember it's at focus time or break time.

23
00:01:04,040 --> 00:01:06,480
So, we need to set up our controller.

24
00:01:06,480 --> 00:01:07,490
Cuz we don't have one currently.

25
00:01:07,490 --> 00:01:10,890
So let's go to this home.fxml.

26
00:01:10,890 --> 00:01:13,010
I used home as the name there for
like the home screen.

27
00:01:14,335 --> 00:01:14,840
Make sense,

28
00:01:14,840 --> 00:01:18,040
because we don't have any other screens
here so this was the home, the main one.

29
00:01:19,312 --> 00:01:24,440
All right so one quick way to set up
the controller is you can just define it.

30
00:01:24,440 --> 00:01:25,435
Doesn't have to exist yet.

31
00:01:25,435 --> 00:01:28,799
Com.teamtreehouse.pomodoro.

32
00:01:28,799 --> 00:01:31,540
Even a package, right?

33
00:01:31,540 --> 00:01:33,860
Controllers, let's drop it
in a controllers package.

34
00:01:33,860 --> 00:01:34,720
And let's call it home.

35
00:01:36,240 --> 00:01:39,390
And if I come over here it's
gonna say create the class.

36
00:01:39,390 --> 00:01:40,040
Yeah, that's what we want.

37
00:01:41,280 --> 00:01:41,910
Cool.

38
00:01:41,910 --> 00:01:45,750
And now we have,
under our controller package we have home.

39
00:01:45,750 --> 00:01:46,680
Awesome.

40
00:01:46,680 --> 00:01:50,630
So, we know that we want to know
what the current attempt is that's

41
00:01:50,630 --> 00:01:51,180
happening, right?

42
00:01:51,180 --> 00:01:52,977
So let's go ahead and
let's make that a private variable.

43
00:01:59,837 --> 00:02:03,290
It's gonna ask and yep,
that's what we mean, okay.

44
00:02:05,790 --> 00:02:06,620
First things first.

45
00:02:06,620 --> 00:02:09,270
Let's set up a method that
starts a new attempt.

46
00:02:09,270 --> 00:02:11,280
We'll use this for
all of our attempt kinds.

47
00:02:11,280 --> 00:02:13,610
So it should take an attempt kind.

48
00:02:13,610 --> 00:02:15,940
Right.
So let's keep it private.

49
00:02:15,940 --> 00:02:16,970
Nobody needs to know about it yet.

50
00:02:18,770 --> 00:02:20,090
Nobody on the outside, that is.

51
00:02:20,090 --> 00:02:21,630
We can use this internally all we want.

52
00:02:21,630 --> 00:02:29,477
So we'll say prepareAttempt and it takes
an AttemptKind, We'll just call it kind.

53
00:02:32,557 --> 00:02:35,644
Okay, and let's go ahead and
we'll build a brand new attempt for

54
00:02:35,644 --> 00:02:37,370
each time this method gets called.

55
00:02:37,370 --> 00:02:45,910
So we're gonna set our CurrentAttempt
= new Attempt and it takes a kind.

56
00:02:45,910 --> 00:02:49,800
And we don't yet have what that message
is, so let's leave it blank for now.

57
00:02:49,800 --> 00:02:54,020
A common approach to handling design
changes is to add and remove a CSS class.

58
00:02:55,150 --> 00:02:56,510
Now we can do that here, right?

59
00:02:56,510 --> 00:02:59,200
Let's add a class for the kind.

60
00:02:59,200 --> 00:03:02,730
Then we can put whatever styles
we want in that class definition.

61
00:03:02,730 --> 00:03:03,960
Right?
Does that make sense?

62
00:03:03,960 --> 00:03:06,290
So, let's do that.

63
00:03:06,290 --> 00:03:10,770
But first, let's make sure that we
have a handle on the root node,

64
00:03:10,770 --> 00:03:11,480
which is what we want.

65
00:03:11,480 --> 00:03:12,677
Let's look at what's over there.

66
00:03:12,677 --> 00:03:14,717
So, here, fx:id="container".

67
00:03:14,717 --> 00:03:22,017
So, remember, in your controller,
there is that FXML annotation.

68
00:03:22,017 --> 00:03:29,397
And, we want to bring in a private
VBox and its name is container.

69
00:03:29,397 --> 00:03:33,690
Perfect, awesome.

70
00:03:33,690 --> 00:03:36,510
If you click this, over here,
it flips to right where the thing is.

71
00:03:36,510 --> 00:03:37,510
It's kind of handy.

72
00:03:37,510 --> 00:03:39,667
It flips back.

73
00:03:39,667 --> 00:03:41,850
Does not.

74
00:03:41,850 --> 00:03:46,720
Okay, and now let's make our method,
column method that we haven't yet created.

75
00:03:46,720 --> 00:03:50,100
We'll call it add attempt style,
that makes sense right?

76
00:03:50,100 --> 00:03:52,770
That's what we're going to do, we're going
to have the style of what this attempt is,

77
00:03:52,770 --> 00:03:58,720
so we'll say addAttemptStyle and
let's have that take a kind.

78
00:03:59,770 --> 00:04:02,210
Okay so, a method doesn't exist yet.

79
00:04:02,210 --> 00:04:02,820
Let's go ahead, and

80
00:04:02,820 --> 00:04:05,896
let's use this intention action
to create the method for us.

81
00:04:05,896 --> 00:04:07,588
Okay?

82
00:04:07,588 --> 00:04:10,552
Awesome.

83
00:04:10,552 --> 00:04:16,230
All right, so
we have a handle on our container,

84
00:04:16,230 --> 00:04:20,580
and containers have things that
are called get style class.

85
00:04:20,580 --> 00:04:24,040
Now, that sounds like that returns one,
but

86
00:04:24,040 --> 00:04:25,680
actually what happens
is it returns a list.

87
00:04:25,680 --> 00:04:30,330
It's a little weird of language, maybe
get style classes would have been better,

88
00:04:30,330 --> 00:04:31,940
but it is what it is.

89
00:04:31,940 --> 00:04:33,840
It's called StyleClass on the other side,
right.

90
00:04:33,840 --> 00:04:36,870
It's not StyleClasses even though
there could be multiple ones.

91
00:04:36,870 --> 00:04:42,180
So, it returns a list, and because it's
a list, we can just add to it, right.

92
00:04:42,180 --> 00:04:48,980
So we're going to .add and
let's push in the name of the kind.

93
00:04:48,980 --> 00:04:51,090
And we already have the name, right?

94
00:04:51,090 --> 00:04:54,310
That was the word in all caps
that we wrote out before.

95
00:04:54,310 --> 00:04:56,270
But let's make the class
a little bit quieter, right?

96
00:04:56,270 --> 00:04:57,640
So, we'll say kind.

97
00:04:57,640 --> 00:05:01,090
If you do toString,
it will use that name that we gave it.

98
00:05:02,190 --> 00:05:04,170
And then, we'll do toLowerCase.

99
00:05:06,860 --> 00:05:09,790
Now I remember in the notes from what

100
00:05:09,790 --> 00:05:13,710
Susan gave me when I transferred something
over, I actually already made this for us.

101
00:05:13,710 --> 00:05:16,797
So let's take a look in
the CSS that we're using here.

102
00:05:16,797 --> 00:05:21,457
And if we scroll down here into
the state based selectors.

103
00:05:21,457 --> 00:05:24,557
Down here, so look, here's focus,
that was the name of the focus.

104
00:05:24,557 --> 00:05:28,580
And what's gonna happen is it's gonna
change the background color to this.

105
00:05:28,580 --> 00:05:31,250
And break will change the background
color to that, whatever that is.

106
00:05:31,250 --> 00:05:32,310
Oh look, it's a bug.

107
00:05:32,310 --> 00:05:32,880
I'll fix that.

108
00:05:34,010 --> 00:05:36,400
Okay, so let's think this through.

109
00:05:36,400 --> 00:05:37,380
Let's walk back through this.

110
00:05:37,380 --> 00:05:40,430
So it's gonna come in,
we're gonna call prepareAttempt, and

111
00:05:40,430 --> 00:05:42,870
it's gonna set the CurrentAttempt to
a new one, which is totally cool.

112
00:05:42,870 --> 00:05:43,940
And it's gonna add an AttemptStyle.

113
00:05:43,940 --> 00:05:46,740
So let's say that we pushed
in one that was focus.

114
00:05:46,740 --> 00:05:49,040
It's gonna come through,
it will add focus and

115
00:05:49,040 --> 00:05:50,540
let's say that we push
one in that's break.

116
00:05:51,570 --> 00:05:53,410
Oh, it's gonna add two.

117
00:05:53,410 --> 00:05:55,520
We don't want that,
we don't want it to say focus and break.

118
00:05:55,520 --> 00:05:56,320
Cuz then what's gonna happen?

119
00:05:56,320 --> 00:06:00,430
Both of those classes are gonna be there
and both of those are gonna apply, and

120
00:06:00,430 --> 00:06:01,620
the last one defined will apply.

121
00:06:01,620 --> 00:06:03,680
So it will always be that color break.

122
00:06:03,680 --> 00:06:04,290
We don't wanna do that.

123
00:06:04,290 --> 00:06:06,490
So, we wanna remove them too, right?

124
00:06:06,490 --> 00:06:08,130
So let's do that.

125
00:06:08,130 --> 00:06:12,130
You can, let's make something for
exactly what we're trying to do.

126
00:06:12,130 --> 00:06:17,070
We gonna say private and then it'll be
a void, let's make a clearAttemptStyles.

127
00:06:17,070 --> 00:06:21,859
What we can do here is we can loop through
everything that's in that enum, and

128
00:06:21,859 --> 00:06:23,933
just remove it, just pop it off.

129
00:06:23,933 --> 00:06:27,227
Right.
So for AttemptKind kind, and

130
00:06:27,227 --> 00:06:31,776
if you say on an enum
attempt kind dot values,

131
00:06:31,776 --> 00:06:38,144
it will loop through each one of
the values that are in the enum.

132
00:06:38,144 --> 00:06:40,500
Now again, that's a list.

133
00:06:40,500 --> 00:06:46,480
So get style class is a list,
and lists have a thing

134
00:06:46,480 --> 00:06:50,550
that's handy called remove, which it will
pop the object off, should it exist.

135
00:06:50,550 --> 00:06:52,180
It won't give you an error if it doesn't,

136
00:06:52,180 --> 00:06:56,740
so let's just loop through all of them and
pop off what's on there.

137
00:06:58,000 --> 00:07:02,680
Probably a little cleaner way to do this,
but it'll work for

138
00:07:02,680 --> 00:07:07,220
now and because we've put it in our own
method we can fix this however we want.

139
00:07:07,220 --> 00:07:08,110
As long as it does that.

140
00:07:08,110 --> 00:07:11,280
As long as it clears the attempt styles we
can change this however we want, right?

141
00:07:12,420 --> 00:07:15,090
So I'm gonna put that right at
the top of the prepare attempt, right?

142
00:07:15,090 --> 00:07:16,580
Let's start with a clean slate.

143
00:07:16,580 --> 00:07:17,800
So we'll say clear attempt styles.

144
00:07:19,120 --> 00:07:21,060
And then we'll add the attempt style.

145
00:07:21,060 --> 00:07:23,950
Okay, and so the next thing
that we wanna do, is we wanna

146
00:07:23,950 --> 00:07:28,370
set the text label with the name of
the kind of attempt that's going on.

147
00:07:28,370 --> 00:07:31,490
So let's get a handle to
the title in our controller.

148
00:07:31,490 --> 00:07:32,720
So, what was that?

149
00:07:32,720 --> 00:07:34,968
That was title, so
let's get a handle over here.

150
00:07:34,968 --> 00:07:39,714
We'll say @FXML private it was

151
00:07:39,714 --> 00:07:44,290
label and it's called title.

152
00:07:46,420 --> 00:07:49,790
And we want gamma Java FX version of that.

153
00:07:51,130 --> 00:07:53,920
You can have this on the same line or
below.

154
00:07:55,050 --> 00:07:56,480
Sometimes it auto corrects to that.

155
00:07:56,480 --> 00:07:59,280
So I like to at least have it in the same
style, whatever that's going on the file,

156
00:07:59,280 --> 00:07:59,980
keep it the same way.

157
00:07:59,980 --> 00:08:05,430
It's really up to your team on a style
decision for that sort of thing.

158
00:08:05,430 --> 00:08:08,050
And this prepare attempt,
we could set the title, right.

159
00:08:08,050 --> 00:08:12,350
We could do this title.setText and
we could just set it to the kind, and

160
00:08:12,350 --> 00:08:15,580
we could get the two
string version of that.

161
00:08:15,580 --> 00:08:18,230
But that's not really what we want, right.

162
00:08:18,230 --> 00:08:20,900
Like what if we changed
the word from being focused?

163
00:08:20,900 --> 00:08:22,130
And it's in all caps, too.

164
00:08:22,130 --> 00:08:23,870
We don't want to have to
play around with stuff.

165
00:08:23,870 --> 00:08:26,180
So we want a display name.

166
00:08:26,180 --> 00:08:30,030
And why don't we just set that as
a constant as part of the enum.

167
00:08:30,030 --> 00:08:30,590
Let's do that, so

168
00:08:30,590 --> 00:08:35,560
we'll say get DisplayName,
that sounds like a good function, right?

169
00:08:35,560 --> 00:08:37,470
We're wanna say, how do we display this?

170
00:08:38,800 --> 00:08:42,680
So we'll save that and
I am going to click here.

171
00:08:42,680 --> 00:08:47,420
Let's use the intention action and
we'll create a method, getDisplayName.

172
00:08:49,040 --> 00:08:49,926
There we go.

173
00:08:49,926 --> 00:08:54,866
And let's do a private

174
00:08:54,866 --> 00:09:00,070
String m DisplayName.

175
00:09:00,070 --> 00:09:01,950
Didn't work out exactly
the way that I wanted it to.

176
00:09:01,950 --> 00:09:05,950
[LAUGH] And
we'll pop it in the constructor here, too.

177
00:09:05,950 --> 00:09:10,694
So, let's do displayName and

178
00:09:10,694 --> 00:09:17,445
we'll say mDisplayName = displayName and

179
00:09:17,445 --> 00:09:21,830
of course that's a string.

180
00:09:23,270 --> 00:09:25,700
Okay so now these are complaining
obviously, and so

181
00:09:25,700 --> 00:09:31,230
we want this to be called Focus time, and
we want this to be called Break time.

182
00:09:31,230 --> 00:09:34,940
Now of course, if that changes,
if the way that these words change,

183
00:09:34,940 --> 00:09:40,880
what's nice is this focus could,
we could have something totally,

184
00:09:40,880 --> 00:09:42,270
concentration time over here, right.

185
00:09:42,270 --> 00:09:45,210
But we could still call it focus in
our code, whenever we use focus and

186
00:09:45,210 --> 00:09:46,360
then this could kind of change.

187
00:09:46,360 --> 00:09:47,840
So that helps keep things dynamic.

188
00:09:49,220 --> 00:09:50,650
I'm really liking this enum usage.

189
00:09:50,650 --> 00:09:54,030
I mean, imagine if we had to go
through a big if else switch here.

190
00:09:54,030 --> 00:09:57,370
Since everything else is already defined,
we can just use it, right.

191
00:09:57,370 --> 00:10:00,818
So we're using this kind.getDisplayName,
perfect.

192
00:10:00,818 --> 00:10:03,230
All right,
I'm ready to see if this is working.

193
00:10:03,230 --> 00:10:05,090
But how do we do that?

194
00:10:05,090 --> 00:10:09,090
One trick that I like to use is I like
to drop in, right at the top here,

195
00:10:09,090 --> 00:10:09,960
let's just add a Button.

196
00:10:12,140 --> 00:10:14,040
And this works really well in

197
00:10:15,270 --> 00:10:19,520
things where you don't have much
control of when input comes in.

198
00:10:19,520 --> 00:10:21,870
Because this program will just run and
it will be sitting there.

199
00:10:21,870 --> 00:10:26,700
So let's give this an ID, and I like to
use all caps so I don't forget about it.

200
00:10:27,740 --> 00:10:33,710
And we'll say onAction DEBUG, all right?

201
00:10:33,710 --> 00:10:37,430
And, of course, debug doesn't
exist cuz we just made that up.

202
00:10:38,900 --> 00:10:41,280
So we will create a method over here.

203
00:10:41,280 --> 00:10:44,570
Void DEBUG, and
we'll just make it do something silly.

204
00:10:48,530 --> 00:10:51,610
All right, so
now if we kick off things in debugger mode

205
00:10:59,390 --> 00:11:01,110
Something is wrong.

206
00:11:01,110 --> 00:11:02,660
Oh, I forgot to close the tag.

207
00:11:02,660 --> 00:11:04,120
That's what it's angry about.

208
00:11:05,760 --> 00:11:08,530
So let's try that again,
let's run in debug mode.

209
00:11:11,510 --> 00:11:16,100
Okay, so there is a button there
that I forgot to label Debug.

210
00:11:16,100 --> 00:11:18,130
Let's do that really quick.

211
00:11:19,780 --> 00:11:20,490
So you can.

212
00:11:23,770 --> 00:11:24,290
See that.

213
00:11:24,290 --> 00:11:28,260
And I will close main there.

214
00:11:28,260 --> 00:11:29,930
Let's do that again.

215
00:11:29,930 --> 00:11:30,920
Let's run DEBUG.

216
00:11:33,420 --> 00:11:35,380
There we go, there's the DEBUG button.

217
00:11:35,380 --> 00:11:37,620
Got some weird styling that it's
inherited, but that's all right.

218
00:11:38,660 --> 00:11:43,210
And if I click it and say hi mom,
we don't necessarily want that.

219
00:11:43,210 --> 00:11:49,400
We want to put a break point on
where it says hi mom, right?

220
00:11:49,400 --> 00:11:50,750
So now, if we do debug.

221
00:11:52,850 --> 00:11:53,620
There's our app.

222
00:11:53,620 --> 00:11:55,650
When we click it, we're going to pause.

223
00:11:57,260 --> 00:11:59,990
And now we can use that trick
that we learned before with

224
00:11:59,990 --> 00:12:01,260
this Evaluate Expression.

225
00:12:03,070 --> 00:12:06,885
And I can say prepareAttempt(AttemptKind),
and we'll do FOCUS first,

226
00:12:06,885 --> 00:12:08,530
(AttemptKind.FOCUS).

227
00:12:08,530 --> 00:12:13,878
What that should do, is it should.

228
00:12:17,118 --> 00:12:23,000
So it returned void, but
it should have, as we continue our app.

229
00:12:23,000 --> 00:12:27,760
Now if we look at our app,
it should be, There we go.

230
00:12:27,760 --> 00:12:31,490
So it says Focus time, and
it's changed its color.

231
00:12:31,490 --> 00:12:33,950
Awesome.
Let's make sure that it also works for

232
00:12:33,950 --> 00:12:35,440
Break time.

233
00:12:35,440 --> 00:12:36,430
So, here we are, broken again.

234
00:12:36,430 --> 00:12:41,812
And we'll say run, Evaluate Expression,

235
00:12:41,812 --> 00:12:48,220
prepare attempt,
we'll do attempt kind, break.

236
00:12:48,220 --> 00:12:50,220
Evaluate.

237
00:12:53,460 --> 00:12:54,610
And we close that.

238
00:12:54,610 --> 00:12:55,820
And we can continue running.

239
00:12:57,720 --> 00:12:58,330
Now, if we look at our app.

240
00:12:59,820 --> 00:13:01,070
There we go, Break time blue.

241
00:13:01,070 --> 00:13:02,440
Beautiful, it's working.

242
00:13:03,970 --> 00:13:07,130
Great, we got most of
our states all set up.

243
00:13:07,130 --> 00:13:09,320
But I left an important one out.

244
00:13:09,320 --> 00:13:11,600
We need to start the timer
with the appropriate time.

245
00:13:12,740 --> 00:13:15,300
I wanted to explore
another way to do things.

246
00:13:15,300 --> 00:13:20,110
We just saw how to essentially bring the
reference of the node into the controller

247
00:13:20,110 --> 00:13:22,050
from the FXML.

248
00:13:22,050 --> 00:13:24,020
But I wanna show you things the other way.

249
00:13:24,020 --> 00:13:27,000
The FXML can actually bind to
a property on the controller.

250
00:13:28,340 --> 00:13:31,130
Let's explore the binding way of
doing things right after this break.