Preview
Video Player
00:00
00:00
Explore Existing Code
8:46Our awesome designer, Susan, wrote some HTML and CSS mockups for the project. I converted them to fxml and CSS. Let's go over it.
Okay, so like I said, Susan and
I talked through the problem space.
0:00
She made some mock-ups, and we used
the tool that we use here called Envision.
0:04
So Susan submitted these designs and
it blew me away.
0:09
It's so good, right?
0:12
So we started talking
through a couple of things.
0:14
Like see how the time is using
different elements for each digit?
0:16
We talked through how we should probably
just have a single element, for
0:19
training wise.
0:22
I did like the idea though.
0:23
It reminds me of one of those
old school alarm clocks.
0:24
Susan and I are in different offices,
so you can actually click the page and
0:27
leave a comment, and
it will shoot her an email and
0:31
she'll know exactly
what I'm talking about.
0:34
So she fixed that time to be a single
element and then marked it up.
0:36
Now she created HTML in CSS, and
I translated it, and I just finished.
0:40
Here, let me show you what I got.
0:45
So first, let me just start by saying
I'd love to have done this together, but
0:47
it would have taken forever, and
honestly we have better stuff to do.
0:51
These courses can only be so long, right?
0:53
This is basically just
an exercise in translating.
0:56
And with enough time, I'm sure you
could have done something similar and
0:58
probably even better.
1:01
Now I encourage you to try this and
do it on your own.
1:02
I learned a ton doing it, actually.
1:04
The code is available in
the Download section.
1:06
Please make sure to check
the teacher's notes on this video.
1:08
So let me do a quick walk through
of the shell that I built for us.
1:11
But first, let's go ahead and
let's run it.
1:15
Ooh right?
1:19
Now, none of it works, so
don't get too excited.
1:21
It's basically just place holders,
you know, scaffolding.
1:23
So let's take a quick look at the HTML and
CSS that Susan sent over.
1:26
I kept it in the mocks
directory over here.
1:30
Okay, so if you open this timer out of
HTML, this is the HTML for the focus time,
1:33
when things have gone into focus time,
1:37
now this will run in a web
browser just like this.
1:39
I'm gonna drag that over that opened
up on another monitor for me.
1:44
And see how this is the web browser and
this is what it looks like in the web
1:46
browser, so we did a pretty good job
of making that, translating that over.
1:49
So let's take a look at what that HTML is.
1:53
I really love how straightforward this is.
1:56
This is HTML, and
it's very much like what we've seen.
1:59
It's very much like XML, right.
2:02
Here's some tags.
2:04
They open and they close.
2:05
HTML's not strict, so it doesn't actually
always have to have a closing tag.
2:07
So you'll see here this link up
here doesn't have a closing tag.
2:12
Couple things I want to point out here.
2:16
Notice how it says class?
2:17
This is just like our style class, but
2:18
it's not a reserved
word over here in HTML.
2:20
In our FXML,
class of course means our Java class,
2:23
so it's called style class on our side and
class here in HTML.
2:25
So if we move down here,
this h1 here, this is a heading.
2:30
So it's like a semantic way of saying hey,
here, this is a heading.
2:34
She used a p tag for paragraph and
2:37
gave it the class of time so
that she could later style that.
2:39
She did a button, and
2:43
notice how she was able to put
an image inside of the button here, so
2:43
she was able to nest the image, and image
is one of those tags that's not closing.
2:48
And then she put the text there of resume.
2:53
Here's a form, and
inside there's a thing called a text area.
2:57
Now we haven't gotten to those yet, but
3:00
what that basically is is
a multi line text box.
3:03
JavaFX has a direct translation of this.
3:06
So this is all pretty digestible, right?
3:10
Let's go take a peek at her CSS.
3:11
So I'm gonna open up styles.css here.
3:13
You'll see a lot of familiar patterns
in here, namely the selector and
3:19
how we open things and
how we close things.
3:24
And also what you'll see is the key value.
3:26
Now notice that her keys don't
start with -fx- like ours do.
3:30
But what I wanna point out is that
we could combine these together and
3:34
it wouldn't break anything.
3:37
But I figured that we'd keep our files
separate just to keep things more clear.
3:38
All right, so
3:43
I think we're ready to take a look at our
FXML file that I built from her HTML file.
3:44
So as you can see,
3:55
we have everything in a vertical box
since everything is stacked that way.
3:55
And here,
we use the optional children tag.
4:00
And inside of it,
we'll use labels for title and time.
4:04
I'm gonna go ahead, I'm gonna open up,
I'm gonna run that again, so
4:09
we can have that sit right next to us.
4:12
Right?
So here's the label for the title.
4:18
Here's the time.
4:21
And then we have buttons.
4:23
And I used a horizontal box that allows
you to set two buttons next to each other,
4:24
so that's what I used.
4:28
Now for the buttons,
I had to do some interesting tricks and
4:30
this could probably be improved.
4:32
But let's look at restart first.
4:34
So I'm gonna scroll down to where
restart is, and it's right here.
4:35
So what I did was I used a stack pane.
4:42
And remember, stack panes allow you to
lay something on top of another thing.
4:45
So what I did,
was I put the icon on the first level, and
4:49
then I put a see-through
button on top of it.
4:52
So if you click, you click the button.
4:55
Now, I called this style a nested action,
4:57
so I could style them all
sort of the same way.
4:59
Cuz the buttons above are very similar,
they've got the picture next to the image.
5:02
I was unable to do exactly how
nice HTML was able to do that.
5:07
It was a little bit more difficult
over here in the FXML side of things.
5:10
Note how I'm using the SVGPath.
5:15
Now this is a bit weird,
but there currently
5:18
isn't way that I could find to embed
an SVG file, so I had to inline the path.
5:20
So if you haven't seen SVG before, and
5:25
I hadn't actually, I'm gonna take
the course here on Treehouse about it.
5:27
If you open one of these up you'll look,
hey look, here's some more markup.
5:31
And this is the way that
it defines itself, and
5:36
basically here is the path that
defines what it looks like.
5:38
So if you take this path here,
this is the path.
5:43
And so, that tells how to draw the shape.
5:47
That explains how to draw a shape.
5:50
So if we flip back,
5:54
I just in-lined it here because there
was no way to bring a file across.
5:55
I'm sure that's something
that they'll add here soon.
5:59
So let's scroll up to
the other two nested actions.
6:02
So what I did was I used the stack pane,
and
6:04
I placed two of these nested
actions on top of each other.
6:07
Because we want to show the play
button when it's playing and
6:10
show the pause button when it isn't.
6:13
So the way I did this was by hiding and
showing in CSS based on selectors.
6:15
Now this is a common pattern and
we'll go over it here in just a bit.
6:19
So let's get past these buttons here.
6:23
And if you get down here,
here's the text area.
6:25
Right, remember I said there
was a direct translation?
6:27
And finally, I converted the pomodoro was
an SVG, but I converted it to an image,
6:29
just so
I could show you here how images look.
6:34
It's pretty straightforward, right?
6:37
So if we look up,
it's just fairly clean mark up right?
6:38
Just a set of vertically aligned elements.
6:41
Okay.
Now for the CSS.
6:44
Now, since our backgrounds
are high contrast,
6:49
I always want to make sure that
all text on any element is white.
6:51
If you want otherwise,
you have to overwrite it.
6:55
So that's what star does for us.
6:58
It means everything.
6:59
That pound FFF here is hexidecimal.
7:01
Check the teacher's notes for
more on this.
7:04
It means white.
7:06
Now everything else on here selector
wise you've seen already, except for,
7:07
let's see.
7:12
Here's one that we haven't shown.
7:14
So see how the padding is overridden for
a normal button?
7:16
Now what this is saying is it's saying
when normal buttons are up here, so
7:21
these are normal buttons,
and this is saying,
7:25
anything that's inside of a restart class,
change the button.
7:26
So the restart button was
a little bit wider, so
7:30
I had to change the padding
between the two.
7:32
So here's the padding at 37, and
down here I had to change it to 43.
7:33
One thing that I found is that the SVG
path elements don't get a class of
7:39
.svg-path as you'd expect, and
7:42
I plan on filing an issue on
that with the JavaFX Project.
7:44
Oh yeah, and this font here, this Varela
Round, that might look a little bit weird.
7:48
I downloaded it from Google Fonts and
7:52
I included it in the resources
of this project.
7:54
Let's look at how I used
it in Main real quick.
7:58
So if we open up Main over here,
all right so this is again it's Main,
8:01
it extends the application and
Main calls and
8:05
it launches the args just
like we were doing before.
8:07
This is how you load a font.
8:10
You do the GIT resource, and
you call to external form on it.
8:11
The second parameter
here is the default size.
8:16
So you'll see that I put in a ten here.
8:18
So, if you don't specify a font size,
it will default to ten.
8:20
This is kind of a normal way to do things.
8:23
The other thing that's a little bit
different here is I said setResizable
8:26
is equal to false, what that means
is that we take a look at our app,
8:29
I can't resize it, right,
if I grab the corner of it.
8:33
Some windows you're able to that with,
and this application you are not.
8:35
All right, so
8:39
now that we've got our scaffolding
all set up, let's get to the coding.
8:42