Preview
Video Player
00:00
00:00
Grids
5:56Grids provide a way to align elements in rows and columns. Let's use them to clean up our app.
[MUSIC]
0:00
Our up and
coming app is in a bit of weird state.
0:04
We have a floating unlabeled text field
that we're expecting our users to
0:07
enter their name into.
0:11
How are they gonna know what
to enter in that field?
0:12
A common solution is to label form
fields using a table-like solution.
0:16
The first column contains the definition
of what is expected, or the label, and
0:20
the second column contains
the field to accept the input.
0:24
This can be achieved in
JavaFX using a built-in
0:28
layout we talked about earlier,
a grid pane.
0:31
Let's add one and
get our form under control.
0:34
Okay, so first things first.
0:37
There is a data type called Label.
0:39
Let's add one of those.
0:41
So, we'll come here and we'll say Label.
0:43
We'll just call it label = new Label,
and it takes a parameter.
0:45
And it's the text that you
want to be in the label.
0:51
So, we'll say Name, and
we'll put a colon there.
0:53
There's multiple choices, and
we want to have this one, the javafx one.
0:57
All right, so next what we
want to create is a grid pane.
1:01
Okay, so that is, so GridPane, and
1:05
we'll call it grid = new GridPane.
1:10
Again, it must have known what that was.
1:15
Yep, layout.GridPane.
1:19
Okay, so to populate your grid,
you just add elements, right?
1:22
So, we're gonna say grid.add, and
first, we're gonna add the label, okay?
1:26
And the next parameter is the column,
and they're zero based.
1:32
So, the first column is at 0, and
we want the first row, which is 0, okay.
1:36
So, next to that label,
what we're going to add is the field.
1:42
So we're gonna say grid.add,
and we'll do nameFld.
1:46
And we want it to be in the second column,
so we'll do a 1,
1:51
and the first row so
that we want it next to it.
1:56
So much like a spreadsheet, each one
of these locations is called a cell.
2:00
All right, so
let's see what that looks like.
2:04
Oh, looks like I forgot to add that to
the box, so let's go ahead and close that.
2:08
So let's add the grid pane.
2:11
So we don't need the name field
here anymore, we'll add grid.
2:13
Great, so let's see what that looks like.
2:18
Ooh, that's a little squished together.
2:22
Now, you can deal with that area between
cells with properties called, gap.
2:24
So let's set a higher Hgap, or
horizontal gap, between those cells.
2:28
So we can say, grid.setHgap.
2:33
Oops, that's a lowercase g.
2:40
setHgap, and
we're going to set that to 20.
2:41
Let's take a look and
see what that looks like.
2:45
Much better.
2:48
That button seems a little off now though,
doesn't it?
2:50
And it's on a row of its own.
2:52
Let's go ahead and let's add the button.
2:54
Let's add the button to the second.
2:56
Let's add a new row, and
we'll add the button to it.
2:59
So, we'll say grid.add, btn.
3:01
And, we'll put it in the second column,
and the second row.
3:05
And just going to move this down
below the declaration there.
3:12
Good, and
we can remove from adding the button.
3:19
There, okay.
3:23
There, so
now we see it's in the second row of that.
3:27
And now that we have a grid set up,
it will get more and
3:30
more tempting to align things using it.
3:33
Now sometimes you might be confused as
to what your current grid looks like.
3:36
So to help, you can turn on a debugging
featured called GridLines on.
3:39
So let's do that,
we'll say grid.setGridLinesVisible(true).
3:43
Let's run that.
3:51
Here you go, and now you can see
here's the spacing that we had.
3:54
And here's the different grids there,
cool.
3:56
So, let's set a specific
font on the title.
4:00
And now you can do that like so.
4:03
So let's go ahead.
4:06
I'm gonna comment this
GridLines out just for now.
4:08
And let's set a font.
4:12
So let's say text.setFont.
4:16
And, let's use that font that those blue
folks use on those USB ported horses.
4:19
Remember that movie?
4:26
Let's do that.
So, new font Papyrus,
4:27
that is that old timey, ancient font.
4:30
It's kind of like comic sans nouveau.
4:39
Okay, so let's go ahead and run that.
4:42
There we go.
4:46
Look at that.
4:47
So this is the size, and
that's the font name.
4:48
But you know what?
4:52
In order to make all of
those look the same,
4:53
I'd have to set the font on
every single one of those nodes.
4:56
This is starting to feel wrong, isn't it?
4:59
It sure feels a lot like we're
repeating ourselves, doesn't it?
5:02
We can take care of this, but
first, we have bigger fish to fry.
5:06
Other thing that is getting hard for
me, and I'm assuming you,
5:09
too, is picturing what this
layout looks like, right?
5:12
Imagine looking at this
code with fresh eyes.
5:15
Would you know what it is?
5:19
I don't think I would.
5:20
I definitely wouldn't feel
comfortable moving things around.
5:22
So, now we have a nice grid, and
we have things lining up really well.
5:26
But, it's starting to get a little
difficult to visualize through
5:29
just looking at that Java code, isn't it?
5:32
There comes a time in building any decent
size graphical application where you'll
5:35
need to separate
the layout from the logic.
5:39
JavaFX offers us the ability to do that.
5:42
It's called FXML.
5:44
It will help us more easily
visualize the layout
5:47
instead of having it all
written out in Java.
5:49
Let's learn more about how to separate
our layout right after this break.
5:52