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