Preview
Video Player
00:00
00:00
Getting Started
6:09Let's spin up a new JavaFX app in IntelliJ IDEA.
So now that you know about
all those node types,
0:00
let's go see how to make one of those
JavaFX applications that uses them.
0:02
The great news is that there's
a template included in IntelliJ IDEA.
0:07
All right.
0:12
Now all we need to do is just
think of a simple app to build.
0:12
One thing to remember is that
simple doesn't mean bad.
0:17
I mean, do you remember that
one app that got built?
0:20
And all it did was say, yo.
0:22
Then it ended up getting millions
in funding and downloads.
0:25
Huh.
0:28
Why don't we start with
something like that?
0:29
Okay, and just so we're clear here, if you
end up creating that next app that has
0:31
a windfall of sorts and you're sitting
there swimming in your cash, don't forget
0:35
your old teacher here that showed
you your JavaFX app building skills.
0:39
All right, let's go blow the world away.
0:43
Okay, so
let's make a new IntelliJ project.
0:46
So I'm gonna click Create New Project.
0:49
And you'll see, over here,
that there's an option for JavaFX.
0:51
So let's do that, we'll select that.
0:57
All right.
So instead of making our app say, yo,
1:00
how about we make our app say, sup?
1:02
You know?
Like the short form of what's up.
1:06
All right, so let's name our project, sup.
1:07
This is gonna create a little
more than we need at first.
1:12
It uses some best practices that
we'll touch on here in a bit.
1:14
For now, though, let's just focus on the
main JavaClass that got created over here
1:17
in the sample package, so
under Source, Sample, Main.
1:21
Okay, so
1:25
if we look at the class definition
here it says Main extends Application.
1:26
You might not have encountered
this keyword extends before so
1:31
let's discuss it briefly.
1:34
What this is saying is, essentially,
Main is an Application.
1:35
Again this means that Main will
inherit all public methods and
1:39
fields from Application.
1:44
Now, you've seen inheritance at play
before with objects and the two string and
1:45
equals methods, so extends is the way
that you can specify inheritance.
1:49
Each class can use extends once, and
1:53
only once since Java is a single
inheritance based language.
1:55
So the way that Java FX applications
are kicked off is that you
1:59
override the start
method from Application.
2:02
You'll see what our template did right
here was it overrides the start method.
2:06
What happens is the Stage,
this primaryStage is passed in.
2:10
Now remember the analogy.
2:14
The stage is where
the performance is happening.
2:15
So the first line here is for
a future topic.
2:18
So let's go ahead and comment that out.
2:21
A very simple thing that we can start
practicing with is a root node,
2:25
which you know,
the first node of our graph.
2:28
So we can make one called the group.
2:31
So let's add that, we'll call it root.
2:33
So we'll say root equals new Group.
2:34
Okay and
it's saying that it's not sure what to do.
2:41
Now, there's multiple choices available so
I'm gonna press that option enter.
2:43
And I'm going to choose the thing that
does down here, the JavaFX Scene group.
2:47
Now be careful not to
grab the Java X Swing.
2:51
Quite a few of these share
the same names as they're,
2:54
they come from a similar background.
2:56
So I'm gonna choose the Group, all right.
2:58
So next up, there's the setTitle line
here and that's the window's title.
3:00
So let's go ahead and let's make
it the name of our app, say Sup.
3:04
And continuing on, we'll see that there
is a new scene that is created and
3:08
it takes the root node.
3:13
Okay, the root node is
the one that we've created.
3:15
And the sizes and pixels,
you know the dots on the screen, so
3:16
this is 300 pixels wide
by 275 pixels tall.
3:21
So that new scene is passed into
the set scene method of the stage.
3:25
And once our stage is all set up,
the next line calls show,
3:30
which I guess can be likened
to opening the curtains.
3:34
Okay, so let's run that.
3:37
But how does that work?
3:40
Okay, let's look down here,
here's this method here.
3:41
It's a public static method,
that returns nothing and
3:46
it's named main and
it accepts a string of arguments.
3:50
That sounds familiar doesn't it?
3:52
So this is what runs when
the program's kicked off.
3:55
You'll notice here that it calls
the launch method that is inherited from
3:57
the application class and
it's passed the commands from args.
4:00
Cool, so let's go ahead and run it.
4:03
So I'm gonna choose Run.
4:06
Run Main.
All right, that's not very impressive, but
4:08
it's something to work with.
4:11
So note here that things
are still running.
4:13
See down here?
4:15
See, this run is still running,
the stop buttons here.
4:15
Otherwise, there's be a play button here.
4:17
So you could stop it here if you wanted to
or you could just click the close button.
4:20
And you'll see here, it says, run main.
4:23
If I click this close, it'll go away.
4:25
It will stop.
4:27
All right, so
what do you say let's add a node.
4:28
Let's add a text node to the scene graph.
4:31
Okay.
So let's say, Text.
4:35
We'll just call it txt = new Text and
we'll pass in Sup.
4:38
Okay, so again there's
multiple choices available and
4:44
we want to choose the Scene text text.
4:47
And then we want to add it
to the root's children.
4:51
So root is that group object there.
4:54
So it has, all root objects have,
the ability to get their children.
4:56
What this does is it returns a list, and
it returns an object reference to a list.
5:00
So we're gonna do getChildren, and
5:05
then we're gonna chain and
call add and add txt to that.
5:08
Cool.
All right so we'll run it and hm.
5:13
I don't see it.
5:17
Oh wait.
5:18
There it is.
It's hidden up in the corner.
5:18
I think I see the bottom
little pieces here.
5:20
Let's tweak some of our properties
there and try to scoot it down a bit.
5:23
So I can scoot it down with
the setY method that's on a node.
5:28
So let's say txt.setY and
5:34
we'll move it down 50 pixels.
5:38
Aha, there it is.
5:45
Cool, well, that little starter project
provided a nice quick review of some
5:49
object oriented concepts.
5:52
We saw how to cause inheritance and
5:54
how the JavaFX application can be started
by overwriting the inherited start method.
5:56
So now we have a very silly little
app to start working out of.
6:03
Why don't we add some interactivity?
6:06
Right after this quick break.
6:08