This course will be retired on July 14, 2025.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Build a JavaFX Application!
You have completed Build a JavaFX Application!
Preview
Nodes are the different types of elements that you can add to your Scene Graph. Let's learn about what you have at your disposal.
Additional Reading
Terminology
- Text - Used to display strings of characters. Can be rotated and sized.
- Images - All types of images can be added, from JPG, GIF, PNG, SVG etc.
- Shapes - Triangles, circles squares etc.
- UI Controls - Allows users to interact, like textboxes, checkboxes, file choosers etc.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
There are lots of different types of
nodes that we can add to the scene graph.
0:00
Let's walk through some
of the most common ones.
0:04
In my opinion, the most simple
to understand is the text node.
0:07
Any text can be added as a node and
its property set, like what color it is,
0:11
what size should it be,
should it be rotated?
0:16
You can also add images and they have
their own set of properties as well.
0:19
As your application, will need to provide
I/O, remember that means input and
0:23
output, you'll be happy to know that
there's a great base UI library.
0:26
It has things like text fields,
buttons, checkboxes, sliders, and
0:31
file choosers and many more.
0:35
Each of these UI controls
are implemented as nodes and
0:37
can be added as children to any node.
0:41
The next type of node to
talk about is shapes.
0:43
This is just like it sounds.
0:46
You can add circles,
squares, triangles, etc.
0:47
You can set their properties,
like colors, size, and
0:50
rotation, and you can combine them
to create all sorts of things.
0:53
One of the most handy node
types is called the layout.
0:57
The layout is a container that provides
a predefined organization of placeholders
1:01
and behaviors to assist in
visual placement on the scene.
1:06
Let's take a look at a few of them.
1:10
HBox, this is a horizontal box
that lines its children up
1:12
next to each other on a horizontal plane,
left to right, by default.
1:16
[SOUND] So when you add a new one,
it just pops into where it should be.
1:20
[SOUND] VBox.
1:24
VBox [SOUND] is similar to an HBox but
items are entered vertically,
1:26
top to bottom.
1:30
[SOUND] BorderPane.
1:31
This defines five regions.
1:33
Top, [SOUND] left, [SOUND] center,
[SOUND] right and [SOUND] bottom.
1:35
You can place any node in
any of those locations.
1:39
StackPane.
1:43
A StackPane allows you to stack
things on top of each other,
1:43
producing a three dimensional effect.
1:48
Things are added first to
the bottom of the stack and
1:50
each consecutive node is placed on top.
1:53
GridPane.
1:56
[SOUND] A GridPane produces a nice clean
way to place things into rows and columns.
1:58
Cells can be referred to by using row and
column indices.
2:03
There are several more default
layouts available to you but
2:08
we won't be using them in this course.
2:11
Please make sure to check out the teacher
notes for more layout options.
2:13
There is probably one exactly for
what you are trying to accomplish.
2:16
Remember that you can nest layouts.
2:20
You know, put layouts in other layouts
to create exactly what you need.
2:21
Finally, if you want to
reuse other efforts,
2:26
you could actually embed a web page as
a node, which is known as a web view.
2:28
Now, the cool thing is,
you can interact with it back and forth.
2:33
We're not gonna go into
it in this course but
2:36
please make sure to check
the teacher's notes for more on these.
2:38
All right.
2:42
That was a lot of info.
2:44
And we'll review them as we use them.
2:46
Let's go get our feet wet
with some hands-on fun,
2:47
and explore these different node
types that we just learned all about.
2:50
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up