Preview
Video Player
00:00
00:00
The Controller
4:45Now that we have the layout removed and we are using FXMLLoader to build our Scene Graph, we now need a place to put our code. That place is called a Controller.
So now that we have all of our
layout in the FXML file, and it's
0:00
automatically loaded from the FXML loader,
we need a place to put our action code.
0:03
Now if you remember before,
we set this code using the Set on Action
0:08
on the button, and
passing in our lambda function.
0:13
But now, we don't have a direct handle to
the button to be able to set our function.
0:15
Well, the good news is
that every FXML file
0:21
has the possibility to have
code that sits behind it.
0:24
This is called its controller.
0:27
Now, you might have heard of this term
before in the concept of model view
0:30
controller, or MVC.
0:33
It's an architectural pattern which
is quite common in UI frameworks.
0:35
Now we aren't gonna delve too deep here,
but you should know that the controller
0:39
is responsible for handling and
setting up our view, the FXML file.
0:43
Let's go wire up our controller and
handle our button click.
0:47
So we breezed past this before, but
if you look up here in the grid pane,
0:53
there's an attribute called fx
namespace named controller.
0:56
And this is using dot notation
to point to sample.Controller,
1:01
which is over here, right?
1:04
sample.Controller.
1:05
This file was created for
us when it started but
1:07
it's just basically
an empty class right now.
1:09
So if we just add an attribute
to the button for onAction.
1:12
So, just like everything else,
we're gonna say set onAction.
1:16
We put in the name of
the method that we want to run.
1:21
So let's make a new method
called #handleSaySup.
1:23
[LAUGH] That hashtag's never
gonna catch on, is it?
1:28
[LAUGH] JKLOL.
1:31
Okay so see how it's an error?
1:34
Now this is pretty cool.
1:36
The ID is checking for us,
it knows the method doesn't exist.
1:37
So let's go ahead and
create it using the intention action here.
1:42
And bam,
it created it over here in the controller.
1:45
So let's write our little
bit of code there, right?
1:48
So we had,
let's just make it say Sup first.
1:50
Right?
1:55
Awesome, there it is.
1:58
So, let's run that.
2:00
Just make sure that works.
2:01
Okay, cool, perfect.
2:05
So, we're back there, but we wanted
to make this field be filled out and
2:06
put the name in there.
2:10
So how do we do that now?
2:11
We don't have access to that
variable in the controller.
2:13
Well the trick is to add an FX
name spaced value called ID.
2:18
So let's go over here and on the text
field let's go ahead and give this a name.
2:22
Say fx:id =, and
we'll call this firstName.
2:27
This will allow us to reference it
specifically in the controller.
2:34
So, if we go in over in the controller,
and
2:38
here there is an annotation called FXML.
2:40
So if you do @FXML and
see it did the import for us.
2:44
What this does is it exposes things,
even private things.
2:51
So between the controller and the view.
2:54
So let's say private, and
we'll make a TextField.
2:56
Whoops.
3:03
Don't wanna import AWT, right?
3:04
That was the stuff from before.
3:06
It's bigger.
3:08
JavaFX one.
3:12
It's very common to
accidentally pick that and
3:14
then try to figure out what's going on.
3:16
Just so you know.
3:17
Glad that that happened by accident.
3:18
And we're gonna give it the same
name that we did as that ID.
3:20
Right.
So we called it firstName,
3:23
it's firstName here.
3:24
And now, in our event here,
if we switch this
3:27
over to being a printf we can do a %s,
give it a new line,
3:32
and we can push in firstName.getText().
3:39
Bam, and now we can access it.
3:44
Now this might seem like
a silly application but
3:53
note that this controller
here is just a Java file.
3:56
You could very easily pull
in the Twitter API and
3:59
make this actually tweet out with
just a few additional lines of code.
4:01
But it's still a little ugly right?
4:05
I mean, we have a couple of options,
what we could do is we could add a font
4:06
attribute on a bunch of
the elements directly,
4:10
but that kind of seems like we would
be repeating ourselves, right?
4:12
We live by the mantra DRY,
right, don't repeat yourself.
4:15
There is a better way.
4:20
So those are controllers.
4:22
They control the information
rendered into the view and
4:24
this information is also
known as the model.
4:27
They also control the actions
that are performed by the view.
4:29
Controller seems like a pretty
good name for it, eh?
4:32
Okay.
4:35
So the best practice for
4:36
styling our application is by employing
cascading style sheets, or CSS.
4:37
Let's dive into that right
after this challenge.
4:42