Preview
Video Player
00:00
00:00
Separating the Layout
11:04Looking at all that Java code gets difficult to manage. Let's work on a best practice of using FXML.
The problem that we just encountered, with
the difficulty of being able to visualize
0:00
the way a screen is laid out through
simple linear code, is not a new one.
0:03
There have been many attempts
to tackle this problem, and
0:08
some clear winners have emerged.
0:10
And they've become the de facto
way to present legible layout.
0:12
When displaying a tree-like system, like
we have each element having a parent in
0:16
any number of children, typically,
a mark-up language is used.
0:21
A couple of markup languages that
you've probably heard of is XML,
0:25
Extensible Markup Language.
0:29
This is used all over the place
in our Java world, and
0:31
HTML, HyperText Markup Language, the
markup language used to describe webpages.
0:35
JavaFx has a similar markup language and
it's called FXML.
0:41
If you're familiar with XML or HTML, this
will probably become very easy to you.
0:46
If this is new to you, it's a lot.
0:50
But I promise it will make
sense with a little practice.
0:53
Let's go explore how to use it.
0:55
When we started our project, some best
practices defaults were all set up for us.
0:58
And I quickly made us comment it out so
we could do stuff the hard way.
1:02
So the line that we got
rid of uses a static
1:06
method on the FXML Loader
class called load.
1:09
And what that does is it takes an FXML
file and it brings it to life, and
1:12
as you can see here it
returns the parent node.
1:16
It's pretty powerful,
let's take a look at it.
1:19
So if we click over here
at the sample.FXML.
1:21
This is the file that was generated when
we first started on project creation.
1:24
And, you will notice up at the top here,
there's these things that are in
1:29
less than question mark and
greater than question mark.
1:33
And what these are called,
these are processing instructions.
1:36
And we've seen these before.
1:40
These are doing import statements here,
1:41
specifically, just like
we do in our Java code.
1:43
What happens is you input the stuff
here and then you can use it below.
1:45
Most IDEs in IntelliJ specifically
are really great at managing these in your
1:49
Java code and
it does the same thing for you in FXML.
1:53
I'm so glad that it does cuz it's so
much less typing.
1:57
So after the processing instructions,
we have our first element.
2:01
An element is created using the less
than and greater than sign.
2:04
Right?
2:08
So this element here, this GridPane,
2:08
there's a less-than and there's
a greater-than sign on the other side.
2:09
This word here, GridPane, is a tag name.
2:13
Now elements in FXML are strict XML, which
means that you need to close out the tags.
2:16
So you'll see here there's a GridPane,
and it says GridPane again.
2:22
But you see the front?
2:25
That's closing out the element.
2:26
So inside of the tag here,
there's some things called parameters.
2:29
And these are attributes on the element,
okay?
2:32
So the attribute, this is
the attribute name, fx:controller, and
2:37
this is the attribute value,
sample.Controller.
2:39
And we'll get to controllers
here in a moment but
2:41
what I want you to notice
here is there's this fx.
2:44
And the fx: is part of a namespace,
and it's an XML requirement.
2:47
So what's happening here is,
we're declaring a namespace.
2:54
XML ns stands for XML namespace,
and it says the fx
2:57
namespace is defined here at fx.com/fxml.
3:01
Now, you don't really need to worry about
this cuz it's auto populated for you, but
3:05
basically what this does is allow you to
validate anything with the fx prefix.
3:09
So we know that fx controller is valid.
3:14
If I spelled it wrong we would know.
3:17
Right.
3:20
And that's doing that
because it's using this here.
3:21
You'll see that there,
I didn't want that to be overwhelming.
3:24
If you're interested more in XML and
3:27
its structure, I've included
a link in the teacher's notes.
3:29
Okay, so if we continue to walk
through our attributes here,
3:32
you'll see some familiar properties.
3:35
So here, here's hgap.
3:37
Remember when we did that?
3:38
We called set hgap on the grid before,
and it's setting it to 10.
3:39
And here, the vertical gap is set to 10.
3:44
So this is a default and
the alignment is going to be centered.
3:47
These are the defaults that were provided
to us when we started the project.
3:49
So, let's go ahead and
let's flip back to our main class.
3:53
And let's uncomment the FXML Loader line.
3:57
Now we're gonna have a problem because we
had defined earlier we defined groups.
3:59
So I'm gonna go ahead, I'm gonna highlight
all of the stuff that we did up until
4:03
where the title gets set.
4:08
And so now we just have this one line,
right?
4:14
So it's a.
4:15
It's a root object, gets returned,
it's a parent object.
4:17
Huh, that's interesting.
4:20
It's a grid pane, though, but
it's coming out as a parent.
4:21
Hm, interesting.
4:25
Let's flip to the definition
of grid pane and
4:27
see if we can figure
out how that's working.
4:29
So if we look over here at GridPane,
much like interfaces,
4:31
we can use a class higher up
in the inheritance chain.
4:35
Now since GridPane extends Pane,
and it extends Region,
4:38
which extends Parent,
it will automatically upcast, right?
4:43
Because GridPane is a parent.
4:49
If that wasn't apparent.
4:54
Sorry.
4:56
So we could actually get to a grid
pane if we wanted to by casting.
4:57
Remember when we type cast we
can up cast if we wanted to.
5:01
We could say, GridPane.
5:04
Could cast it.
5:09
Right?
And that would work.
5:14
And now example has all
of the GridPanes done.
5:15
All right.
5:19
But we don't need to do that because root
works because all that C needs is a node,
5:24
and parent is a node.
5:30
Cool, right?
5:32
Okay.
5:34
So I'm going to leave this stuff here so
that we have this for reference.
5:34
But the first thing that we want to
do is we want to add a text node.
5:37
And how do we do that?
5:40
How do we add children in the FXML file?
5:41
Well it's actually pretty simple.
5:43
So, FXML is really great
at expressing nesting.
5:45
So, what we're gonna do here
is we're gonna add a new text
5:49
field and
see it automatically created that for me.
5:53
It created the closing for me now XML
allows you to auto-close a tag, right.
6:01
I don't need to have this here.
6:08
I can go like this, and
it's basically the same thing.
6:10
I prefer the style.
6:12
I think it's cleaner, and
you don't leave the dangling closing tags.
6:14
You have less text on the screen.
6:18
So we have text, so
let's make sure that that works.
6:21
Right?
So basically it's saying create
6:26
a GridPane, and then create a text
element with a text of sub, and
6:27
also set these parameters
on there to its children.
6:31
Right?
So we're gonna add to the children of
6:35
GridPane, let's take a look and
see what happened.
6:37
Perfect.
6:41
Okay, so let's add the remaining bits.
6:44
So the other things that we had on there,
we had a label, right?
6:46
So we had Label text="First Name" and
again, I'm gonna auto close that.
6:51
And we had a TextField.
7:00
And I will auto-close that.
7:03
Look.
It doesn't know what it is, so
7:04
I'm gonna press, just like in the editor,
I'm gonna press Alt+Enter, and
7:06
it automatically imported it.
7:09
And we're also gonna add a button and
the text of that is Say Sup!
7:12
All right.
And we're gonna close that.
7:17
Right.
7:21
Okay, so what we need to do now,
if we look back at our code,
7:23
what we did before is we set those grids,
right?
7:25
We set the columns and the rows.
7:29
So we need to do the same thing over here.
7:30
The other thing that's a little
bit different is the text is
7:32
now actually inside of the GridPane,
so let's make it so
7:36
the text has its own row,
this first, this header here.
7:38
So let's do that.
7:42
Let's say,
we'll put them in the first row.
7:43
GridPane.rowindex.
7:46
We are actually setting
properties on the parent here.
7:53
You see what it's doing.
7:55
It's in the parent.
7:56
It's GridPane.rowIndex I think this
is actually the only case that we're
7:57
going to do this.
8:00
But this is how you access
values about the element here.
8:01
It's a little strange right?
8:06
I'm talking about, I'm saying set the
rowIndex for this element on the GridPane.
8:09
Something we didn't talk
about is doing a column span.
8:16
A column span, what it allows you
to do is go across two columns.
8:20
You can do this in Microsoft Excel if
you highlight a thing and you can say,
8:28
span across these two things.
8:31
So this is basically the same thing.
8:32
We're saying span across
these two columns.
8:34
If there's gonna be two, and
I want you to go across two.
8:35
Okay?
8:39
And then, let's make that center.
8:40
So, H alignment, which is horizontal
alignment will make that center.
8:42
No, you can do this with your FXML,
if you want to.
8:47
Make things a little bit cleaner, so
everything's all on the same page.
8:51
And let's set this label.
8:58
So the label is going to be.
8:59
In the first row or the second row, right?
9:05
The first row is taken up by the zero
base and put it in the first column.
9:08
And then we have the text field, and
9:19
it has the grid pane in column index one.
9:23
Sorry, one, and.
9:30
Row index of one as well.
9:39
And last but not least, our button,
which is in row index of two.
9:43
And we want to have column index of one.
9:51
And we also,
why don't we align that right just so
9:59
that we can show that we
want to choose right here.
10:01
See how it had the options
there through that?
10:04
That's pretty cool.
10:06
All right, so let's take a look and
see how we did.
10:07
Awesome, doesn't look that pretty,
but we can fix it.
10:13
Wow!
10:17
I just dropped a lot of knowledge on you.
10:18
And like I said in the beginning,
if you were familiar with XML or
10:21
HTML that probably wasn't so bad,
but if that was new to you, yikes!
10:24
Sorry about that.
10:28
It's a lot and
I promise it will start to make sense.
10:29
I hope you're able to look
at our more laborious and
10:32
verbose code base approach in
comparison to the new mark up and
10:35
understand how the mark
up is much more legible.
10:39
I do highly recommend checking out
our awesome courses here on HTML and
10:42
design layout.
10:46
I've linked to a couple of my
favorites in the teacher's note.
10:47
All right.
10:50
So next, we have to wire up
the action on that button.
10:51
Since we removed the code for main,
we need to add the code somewhere.
10:55
Now that somewhere is
a concept named controller.
10:58
Let's check it out right
after this quick break.
11:02