Preview
Video Player
00:00
00:00
Adding Interactivity
6:26Our app is really boring at the moment. Let's allow our users to interact with it!
All right, so our sub-app,
super boring at the moment, right?
0:00
I mean,
it definitely isn't gonna win any awards.
0:04
We should do something about that.
0:07
Let's allow users of our app to
take control of the application.
0:09
Let's implement our killer feature.
0:12
Let's give them a button that
allows them to say, sup, okay.
0:15
So let's add a button.
0:20
Let's go ahead and add it right below
the title node that we had added before.
0:22
So let's give this a go.
0:26
So we'll do Button.
0:27
We'll just call it btn = new Button.
0:28
And it does not know what that is.
0:33
See here again,
it's looking at the awt button or javafx.
0:35
Always choose the javafx one.
0:39
Cool, so
then we'll set the text on that, right?
0:42
So that's what we want it to read.
0:44
And we're gonna make it say, Say Sup!
0:47
All right, and we are going to
0:49
say root.getChildren and
0:54
we'll do .add(btn).
0:59
Let's move that down here.
1:03
Good.
And let's give that a go and
1:10
see what happens.
1:11
Oh weird,
the title is showing up below the button.
1:13
Oh, that's because I hard-coded
the Y-coordinate setting there.
1:16
Hm, does that mean I should figure
out the size of the button and
1:20
do some math to set it below?
1:23
Well I could do that.
1:26
But why don't we try using one
of those layouts that we saw?
1:27
So let's see, I want them to be one
below the other one, vertically.
1:31
Oh, I know, let's use the V box,
it does just that.
1:35
So let's go ahead and stop that.
1:40
So let's make a new, let's put it here.
1:45
Say, new V Box.
And we'll call it, box.
1:49
Equals new box.
1:54
Oops, spelled that wrong.
1:58
There we go.
Okay and
2:01
then, Lists have an item called add all.
2:02
So we're going to say getChildren,
and inside of this we're just
2:06
going to add first the text and
then we'll add the button.
2:13
Cool and I'm going to get rid of these.
2:17
Get rid of this one.
2:20
And instead of adding to the root now,
we want to add the box, right?
2:21
So the box is there and created and
we've added text and the button to it.
2:24
And now we're gonna add, to the root,
2:28
we're gonna add that
vertical box that we put.
2:30
So let's save it and we'll run it.
2:34
There we go.
2:37
Much better.
2:38
All right.
2:39
And if we click it.
2:40
Mm, nothing.
2:41
Okay, let's make it do something.
2:44
So when dealing with GUIs, often we are
waiting for the users to take action and
2:46
to cause something to happen.
2:50
Well, this something that happens
is referred to as an event.
2:52
When a user clicks a button,
it is an event.
2:56
So to catch the event and
2:59
run some code based on that event, you
can write things known as event handlers.
3:00
Now the javafx EventHandler
is a functional interface
3:05
which means it has one method
that needs to be implemented.
3:09
And that one method's called, handle.
3:12
Now, the expected function
takes an event as an argument.
3:14
So because it's a functional interface,
we can use a lambda.
3:18
Now if lambdas are new to you,
3:23
make sure to check the teachers' notes
to learn more about these handy tools.
3:24
So let's write an event handler
using a lambda for the button click.
3:28
Let's put that up by the definition here.
3:31
So, buttons have a set on action method.
3:34
So we'll say btn.setOnAction.
3:38
And you'll see there it
takes an event handler.
3:42
So what we'll write is
we'll write the event.
3:44
This is the landis index, right.
3:47
And let's just for
right now print out Sup.
3:49
Cool, so then if you look over here,
3:59
it says that it overrides the method in
javafx EventHandler, which is handle.
4:01
So if you happened to see a message
about lambdas not being allowed at this
4:08
language level just set the language
level to 8 using Attention Action.
4:11
All right lets see if we have
event handled appropriately.
4:14
Let's run this,
4:19
all right awesome there it goes you see
down here it's saying Sup was clicked.
4:20
So we're catching that and
riding out so there we go.
4:25
Huh, now what if we wanted to add
a way for a user to add their name
4:28
through a text input field and
then use that in our event handler.
4:32
Well, let's do just that.
4:35
So there's a UI control.
4:37
Let's stop this first.
4:38
There's a UI control called a text
field and we will put this here.
4:41
TextField, and
we'll call it nameFld = new TextField.
4:49
So we wanna make sure that we
choose the Java effects one.
4:56
Okay, and inside of our action
here why don't we use a print,
5:01
and we'll say Sup %s!%n,
5:07
and the %s that we want there.
5:12
We want to make a name field.
5:18
And that nameFld.
5:19
has a property called getText and
5:20
that will get whatever has
been entered in the field.
5:22
All right, so let's go ahead,
5:25
we need to add the text field
with the name field as well.
5:26
So we want the text,
then we want the name field.
5:30
Then we want the button.
5:34
So let's see that and let's run.
5:34
Okay, so here's our text field,
so we'll say name in there.
5:38
And you'll see down here it says,
Sup Craig.
5:41
It's working, nice.
5:44
Now we have interaction and the user is in
clear control of when actions are taken.
5:45
Awesome job!
5:51
By catching that event, we've now
done some event driven programming.
5:52
When the user triggered the event,
5:55
we handled it by setting
an on action event handler.
5:57
In the handler,
6:01
we were then able to access
the current state of the input fields.
6:02
With these two pieces in place,
you could probably actually go recreate
6:06
all of the other console projects that
we have built in the prerequisites.
6:11
But wait, let me show you how to make
6:14
better use of your new
graphical tools first.
6:16
I mean, come on.
6:19
Our app is pretty ugly at the moment.
6:20
We can do so
much better on the beauty front.
6:22
Let's get to it right after this break.
6:24