Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
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 up