1
00:00:00,190 --> 00:00:04,700
Okay, so like I said, Susan and
I talked through the problem space.

2
00:00:04,700 --> 00:00:07,980
She made some mock-ups, and we used
the tool that we use here called Envision.

3
00:00:09,360 --> 00:00:12,520
So Susan submitted these designs and
it blew me away.

4
00:00:12,520 --> 00:00:14,230
It's so good, right?

5
00:00:14,230 --> 00:00:16,290
So we started talking
through a couple of things.

6
00:00:16,290 --> 00:00:19,470
Like see how the time is using
different elements for each digit?

7
00:00:19,470 --> 00:00:22,190
We talked through how we should probably
just have a single element, for

8
00:00:22,190 --> 00:00:23,400
training wise.

9
00:00:23,400 --> 00:00:24,770
I did like the idea though.

10
00:00:24,770 --> 00:00:27,700
It reminds me of one of those
old school alarm clocks.

11
00:00:27,700 --> 00:00:31,870
Susan and I are in different offices,
so you can actually click the page and

12
00:00:31,870 --> 00:00:34,010
leave a comment, and
it will shoot her an email and

13
00:00:34,010 --> 00:00:36,330
she'll know exactly
what I'm talking about.

14
00:00:36,330 --> 00:00:40,300
So she fixed that time to be a single
element and then marked it up.

15
00:00:40,300 --> 00:00:45,120
Now she created HTML in CSS, and
I translated it, and I just finished.

16
00:00:45,120 --> 00:00:46,000
Here, let me show you what I got.

17
00:00:47,660 --> 00:00:51,250
So first, let me just start by saying
I'd love to have done this together, but

18
00:00:51,250 --> 00:00:53,940
it would have taken forever, and
honestly we have better stuff to do.

19
00:00:53,940 --> 00:00:56,560
These courses can only be so long, right?

20
00:00:56,560 --> 00:00:58,750
This is basically just
an exercise in translating.

21
00:00:58,750 --> 00:01:01,150
And with enough time, I'm sure you
could have done something similar and

22
00:01:01,150 --> 00:01:02,500
probably even better.

23
00:01:02,500 --> 00:01:04,680
Now I encourage you to try this and
do it on your own.

24
00:01:04,680 --> 00:01:06,630
I learned a ton doing it, actually.

25
00:01:06,630 --> 00:01:08,700
The code is available in
the Download section.

26
00:01:08,700 --> 00:01:10,770
Please make sure to check
the teacher's notes on this video.

27
00:01:11,900 --> 00:01:15,100
So let me do a quick walk through
of the shell that I built for us.

28
00:01:15,100 --> 00:01:16,925
But first, let's go ahead and
let's run it.

29
00:01:19,505 --> 00:01:21,215
Ooh right?

30
00:01:21,215 --> 00:01:23,400
Now, none of it works, so
don't get too excited.

31
00:01:23,400 --> 00:01:26,520
It's basically just place holders,
you know, scaffolding.

32
00:01:26,520 --> 00:01:30,240
So let's take a quick look at the HTML and
CSS that Susan sent over.

33
00:01:30,240 --> 00:01:32,270
I kept it in the mocks
directory over here.

34
00:01:33,420 --> 00:01:37,590
Okay, so if you open this timer out of
HTML, this is the HTML for the focus time,

35
00:01:37,590 --> 00:01:39,645
when things have gone into focus time,

36
00:01:39,645 --> 00:01:42,220
now this will run in a web
browser just like this.

37
00:01:44,260 --> 00:01:46,870
I'm gonna drag that over that opened
up on another monitor for me.

38
00:01:46,870 --> 00:01:49,960
And see how this is the web browser and
this is what it looks like in the web

39
00:01:49,960 --> 00:01:53,320
browser, so we did a pretty good job
of making that, translating that over.

40
00:01:53,320 --> 00:01:55,320
So let's take a look at what that HTML is.

41
00:01:56,390 --> 00:01:58,380
I really love how straightforward this is.

42
00:01:59,830 --> 00:02:02,580
This is HTML, and
it's very much like what we've seen.

43
00:02:02,580 --> 00:02:04,120
It's very much like XML, right.

44
00:02:04,120 --> 00:02:05,690
Here's some tags.

45
00:02:05,690 --> 00:02:06,830
They open and they close.

46
00:02:07,890 --> 00:02:12,140
HTML's not strict, so it doesn't actually
always have to have a closing tag.

47
00:02:12,140 --> 00:02:14,610
So you'll see here this link up
here doesn't have a closing tag.

48
00:02:16,110 --> 00:02:17,250
Couple things I want to point out here.

49
00:02:17,250 --> 00:02:18,700
Notice how it says class?

50
00:02:18,700 --> 00:02:20,480
This is just like our style class, but

51
00:02:20,480 --> 00:02:23,150
it's not a reserved
word over here in HTML.

52
00:02:23,150 --> 00:02:25,800
In our FXML,
class of course means our Java class,

53
00:02:25,800 --> 00:02:29,590
so it's called style class on our side and
class here in HTML.

54
00:02:30,790 --> 00:02:34,040
So if we move down here,
this h1 here, this is a heading.

55
00:02:34,040 --> 00:02:36,770
So it's like a semantic way of saying hey,
here, this is a heading.

56
00:02:37,770 --> 00:02:39,950
She used a p tag for paragraph and

57
00:02:39,950 --> 00:02:43,250
gave it the class of time so
that she could later style that.

58
00:02:43,250 --> 00:02:43,980
She did a button, and

59
00:02:43,980 --> 00:02:48,520
notice how she was able to put
an image inside of the button here, so

60
00:02:48,520 --> 00:02:53,280
she was able to nest the image, and image
is one of those tags that's not closing.

61
00:02:53,280 --> 00:02:55,790
And then she put the text there of resume.

62
00:02:57,490 --> 00:03:00,620
Here's a form, and
inside there's a thing called a text area.

63
00:03:00,620 --> 00:03:03,239
Now we haven't gotten to those yet, but

64
00:03:03,239 --> 00:03:06,330
what that basically is is
a multi line text box.

65
00:03:06,330 --> 00:03:08,800
JavaFX has a direct translation of this.

66
00:03:10,090 --> 00:03:11,800
So this is all pretty digestible, right?

67
00:03:11,800 --> 00:03:13,310
Let's go take a peek at her CSS.

68
00:03:13,310 --> 00:03:17,280
So I'm gonna open up styles.css here.

69
00:03:19,630 --> 00:03:24,060
You'll see a lot of familiar patterns
in here, namely the selector and

70
00:03:24,060 --> 00:03:26,330
how we open things and
how we close things.

71
00:03:26,330 --> 00:03:30,160
And also what you'll see is the key value.

72
00:03:30,160 --> 00:03:34,450
Now notice that her keys don't
start with -fx- like ours do.

73
00:03:34,450 --> 00:03:37,560
But what I wanna point out is that
we could combine these together and

74
00:03:37,560 --> 00:03:38,740
it wouldn't break anything.

75
00:03:38,740 --> 00:03:42,270
But I figured that we'd keep our files
separate just to keep things more clear.

76
00:03:43,490 --> 00:03:44,332
All right, so

77
00:03:44,332 --> 00:03:49,120
I think we're ready to take a look at our
FXML file that I built from her HTML file.

78
00:03:55,140 --> 00:03:55,944
So as you can see,

79
00:03:55,944 --> 00:04:00,090
we have everything in a vertical box
since everything is stacked that way.

80
00:04:00,090 --> 00:04:03,479
And here,
we use the optional children tag.

81
00:04:04,550 --> 00:04:09,160
And inside of it,
we'll use labels for title and time.

82
00:04:09,160 --> 00:04:12,863
I'm gonna go ahead, I'm gonna open up,
I'm gonna run that again, so

83
00:04:12,863 --> 00:04:14,788
we can have that sit right next to us.

84
00:04:18,798 --> 00:04:21,050
Right?
So here's the label for the title.

85
00:04:21,050 --> 00:04:23,180
Here's the time.

86
00:04:23,180 --> 00:04:24,440
And then we have buttons.

87
00:04:24,440 --> 00:04:28,580
And I used a horizontal box that allows
you to set two buttons next to each other,

88
00:04:28,580 --> 00:04:30,170
so that's what I used.

89
00:04:30,170 --> 00:04:32,890
Now for the buttons,
I had to do some interesting tricks and

90
00:04:32,890 --> 00:04:34,270
this could probably be improved.

91
00:04:34,270 --> 00:04:35,718
But let's look at restart first.

92
00:04:35,718 --> 00:04:38,718
So I'm gonna scroll down to where
restart is, and it's right here.

93
00:04:42,518 --> 00:04:44,600
So what I did was I used a stack pane.

94
00:04:45,630 --> 00:04:49,750
And remember, stack panes allow you to
lay something on top of another thing.

95
00:04:49,750 --> 00:04:52,670
So what I did,
was I put the icon on the first level, and

96
00:04:52,670 --> 00:04:55,460
then I put a see-through
button on top of it.

97
00:04:55,460 --> 00:04:57,430
So if you click, you click the button.

98
00:04:57,430 --> 00:04:59,660
Now, I called this style a nested action,

99
00:04:59,660 --> 00:05:02,220
so I could style them all
sort of the same way.

100
00:05:02,220 --> 00:05:05,930
Cuz the buttons above are very similar,
they've got the picture next to the image.

101
00:05:07,110 --> 00:05:10,530
I was unable to do exactly how
nice HTML was able to do that.

102
00:05:10,530 --> 00:05:15,830
It was a little bit more difficult
over here in the FXML side of things.

103
00:05:15,830 --> 00:05:17,395
Note how I'm using the SVGPath.

104
00:05:18,460 --> 00:05:20,950
Now this is a bit weird,
but there currently

105
00:05:20,950 --> 00:05:25,470
isn't way that I could find to embed
an SVG file, so I had to inline the path.

106
00:05:25,470 --> 00:05:27,360
So if you haven't seen SVG before, and

107
00:05:27,360 --> 00:05:31,610
I hadn't actually, I'm gonna take
the course here on Treehouse about it.

108
00:05:31,610 --> 00:05:34,610
If you open one of these up you'll look,
hey look, here's some more markup.

109
00:05:36,050 --> 00:05:38,180
And this is the way that
it defines itself, and

110
00:05:38,180 --> 00:05:43,850
basically here is the path that
defines what it looks like.

111
00:05:43,850 --> 00:05:45,670
So if you take this path here,
this is the path.

112
00:05:47,490 --> 00:05:50,790
And so, that tells how to draw the shape.

113
00:05:50,790 --> 00:05:52,310
That explains how to draw a shape.

114
00:05:54,440 --> 00:05:55,260
So if we flip back,

115
00:05:55,260 --> 00:05:59,070
I just in-lined it here because there
was no way to bring a file across.

116
00:05:59,070 --> 00:06:00,830
I'm sure that's something
that they'll add here soon.

117
00:06:02,380 --> 00:06:04,580
So let's scroll up to
the other two nested actions.

118
00:06:04,580 --> 00:06:07,750
So what I did was I used the stack pane,
and

119
00:06:07,750 --> 00:06:10,930
I placed two of these nested
actions on top of each other.

120
00:06:10,930 --> 00:06:13,530
Because we want to show the play
button when it's playing and

121
00:06:13,530 --> 00:06:15,530
show the pause button when it isn't.

122
00:06:15,530 --> 00:06:19,950
So the way I did this was by hiding and
showing in CSS based on selectors.

123
00:06:19,950 --> 00:06:22,440
Now this is a common pattern and
we'll go over it here in just a bit.

124
00:06:23,610 --> 00:06:25,180
So let's get past these buttons here.

125
00:06:25,180 --> 00:06:27,100
And if you get down here,
here's the text area.

126
00:06:27,100 --> 00:06:29,690
Right, remember I said there
was a direct translation?

127
00:06:29,690 --> 00:06:34,680
And finally, I converted the pomodoro was
an SVG, but I converted it to an image,

128
00:06:34,680 --> 00:06:37,400
just so
I could show you here how images look.

129
00:06:37,400 --> 00:06:38,870
It's pretty straightforward, right?

130
00:06:38,870 --> 00:06:41,300
So if we look up,
it's just fairly clean mark up right?

131
00:06:41,300 --> 00:06:44,220
Just a set of vertically aligned elements.

132
00:06:44,220 --> 00:06:45,470
Okay.
Now for the CSS.

133
00:06:49,510 --> 00:06:51,957
Now, since our backgrounds
are high contrast,

134
00:06:51,957 --> 00:06:55,780
I always want to make sure that
all text on any element is white.

135
00:06:55,780 --> 00:06:58,220
If you want otherwise,
you have to overwrite it.

136
00:06:58,220 --> 00:06:59,790
So that's what star does for us.

137
00:06:59,790 --> 00:07:01,610
It means everything.

138
00:07:01,610 --> 00:07:04,480
That pound FFF here is hexidecimal.

139
00:07:04,480 --> 00:07:06,620
Check the teacher's notes for
more on this.

140
00:07:06,620 --> 00:07:07,920
It means white.

141
00:07:07,920 --> 00:07:12,230
Now everything else on here selector
wise you've seen already, except for,

142
00:07:12,230 --> 00:07:14,120
let's see.

143
00:07:14,120 --> 00:07:15,450
Here's one that we haven't shown.

144
00:07:16,850 --> 00:07:21,160
So see how the padding is overridden for
a normal button?

145
00:07:21,160 --> 00:07:25,130
Now what this is saying is it's saying
when normal buttons are up here, so

146
00:07:25,130 --> 00:07:26,850
these are normal buttons,
and this is saying,

147
00:07:26,850 --> 00:07:30,180
anything that's inside of a restart class,
change the button.

148
00:07:30,180 --> 00:07:32,144
So the restart button was
a little bit wider, so

149
00:07:32,144 --> 00:07:33,970
I had to change the padding
between the two.

150
00:07:33,970 --> 00:07:39,100
So here's the padding at 37, and
down here I had to change it to 43.

151
00:07:39,100 --> 00:07:42,767
One thing that I found is that the SVG
path elements don't get a class of

152
00:07:42,767 --> 00:07:44,631
.svg-path as you'd expect, and

153
00:07:44,631 --> 00:07:47,630
I plan on filing an issue on
that with the JavaFX Project.

154
00:07:48,950 --> 00:07:52,780
Oh yeah, and this font here, this Varela
Round, that might look a little bit weird.

155
00:07:52,780 --> 00:07:54,420
I downloaded it from Google Fonts and

156
00:07:54,420 --> 00:07:56,590
I included it in the resources
of this project.

157
00:07:58,280 --> 00:08:01,100
Let's look at how I used
it in Main real quick.

158
00:08:01,100 --> 00:08:05,240
So if we open up Main over here,
all right so this is again it's Main,

159
00:08:05,240 --> 00:08:07,470
it extends the application and
Main calls and

160
00:08:07,470 --> 00:08:10,180
it launches the args just
like we were doing before.

161
00:08:10,180 --> 00:08:11,850
This is how you load a font.

162
00:08:11,850 --> 00:08:16,520
You do the GIT resource, and
you call to external form on it.

163
00:08:16,520 --> 00:08:18,800
The second parameter
here is the default size.

164
00:08:18,800 --> 00:08:20,280
So you'll see that I put in a ten here.

165
00:08:20,280 --> 00:08:23,800
So, if you don't specify a font size,
it will default to ten.

166
00:08:23,800 --> 00:08:26,680
This is kind of a normal way to do things.

167
00:08:26,680 --> 00:08:29,750
The other thing that's a little bit
different here is I said setResizable

168
00:08:29,750 --> 00:08:33,150
is equal to false, what that means
is that we take a look at our app,

169
00:08:33,150 --> 00:08:35,650
I can't resize it, right,
if I grab the corner of it.

170
00:08:35,650 --> 00:08:39,330
Some windows you're able to that with,
and this application you are not.

171
00:08:39,330 --> 00:08:42,280
All right, so

172
00:08:42,280 --> 00:08:45,500
now that we've got our scaffolding
all set up, let's get to the coding.