1
00:00:00,400 --> 00:00:04,250
There are lots of different types of
nodes that we can add to the scene graph.

2
00:00:04,250 --> 00:00:05,850
Let's walk through some
of the most common ones.

3
00:00:07,610 --> 00:00:11,430
In my opinion, the most simple
to understand is the text node.

4
00:00:11,430 --> 00:00:16,058
Any text can be added as a node and
its property set, like what color it is,

5
00:00:16,058 --> 00:00:19,540
what size should it be,
should it be rotated?

6
00:00:19,540 --> 00:00:23,290
You can also add images and they have
their own set of properties as well.

7
00:00:23,290 --> 00:00:26,990
As your application, will need to provide
I/O, remember that means input and

8
00:00:26,990 --> 00:00:31,040
output, you'll be happy to know that
there's a great base UI library.

9
00:00:31,040 --> 00:00:35,410
It has things like text fields,
buttons, checkboxes, sliders, and

10
00:00:35,410 --> 00:00:37,610
file choosers and many more.

11
00:00:37,610 --> 00:00:41,350
Each of these UI controls
are implemented as nodes and

12
00:00:41,350 --> 00:00:43,890
can be added as children to any node.

13
00:00:43,890 --> 00:00:46,550
The next type of node to
talk about is shapes.

14
00:00:46,550 --> 00:00:47,950
This is just like it sounds.

15
00:00:47,950 --> 00:00:50,316
You can add circles,
squares, triangles, etc.

16
00:00:50,316 --> 00:00:53,240
You can set their properties,
like colors, size, and

17
00:00:53,240 --> 00:00:57,535
rotation, and you can combine them
to create all sorts of things.

18
00:00:57,535 --> 00:01:01,585
One of the most handy node
types is called the layout.

19
00:01:01,585 --> 00:01:06,475
The layout is a container that provides
a predefined organization of placeholders

20
00:01:06,475 --> 00:01:10,335
and behaviors to assist in
visual placement on the scene.

21
00:01:10,335 --> 00:01:12,505
Let's take a look at a few of them.

22
00:01:12,505 --> 00:01:16,855
HBox, this is a horizontal box
that lines its children up

23
00:01:16,855 --> 00:01:20,532
next to each other on a horizontal plane,
left to right, by default.

24
00:01:20,532 --> 00:01:24,142
[SOUND] So when you add a new one,
it just pops into where it should be.

25
00:01:24,142 --> 00:01:26,202
[SOUND] VBox.

26
00:01:26,202 --> 00:01:30,237
VBox [SOUND] is similar to an HBox but
items are entered vertically,

27
00:01:30,237 --> 00:01:31,182
top to bottom.

28
00:01:31,182 --> 00:01:33,102
[SOUND] BorderPane.

29
00:01:33,102 --> 00:01:35,172
This defines five regions.

30
00:01:35,172 --> 00:01:39,382
Top, [SOUND] left, [SOUND] center,
[SOUND] right and [SOUND] bottom.

31
00:01:39,382 --> 00:01:41,880
You can place any node in
any of those locations.

32
00:01:43,200 --> 00:01:43,746
StackPane.

33
00:01:43,746 --> 00:01:48,240
A StackPane allows you to stack
things on top of each other,

34
00:01:48,240 --> 00:01:50,460
producing a three dimensional effect.

35
00:01:50,460 --> 00:01:53,210
Things are added first to
the bottom of the stack and

36
00:01:53,210 --> 00:01:56,199
each consecutive node is placed on top.

37
00:01:56,199 --> 00:01:58,330
GridPane.

38
00:01:58,330 --> 00:02:03,800
[SOUND] A GridPane produces a nice clean
way to place things into rows and columns.

39
00:02:03,800 --> 00:02:08,490
Cells can be referred to by using row and
column indices.

40
00:02:08,490 --> 00:02:11,550
There are several more default
layouts available to you but

41
00:02:11,550 --> 00:02:13,390
we won't be using them in this course.

42
00:02:13,390 --> 00:02:16,610
Please make sure to check out the teacher
notes for more layout options.

43
00:02:16,610 --> 00:02:19,170
There is probably one exactly for
what you are trying to accomplish.

44
00:02:20,240 --> 00:02:21,980
Remember that you can nest layouts.

45
00:02:21,980 --> 00:02:25,490
You know, put layouts in other layouts
to create exactly what you need.

46
00:02:26,610 --> 00:02:28,890
Finally, if you want to
reuse other efforts,

47
00:02:28,890 --> 00:02:33,500
you could actually embed a web page as
a node, which is known as a web view.

48
00:02:33,500 --> 00:02:36,258
Now, the cool thing is,
you can interact with it back and forth.

49
00:02:36,258 --> 00:02:38,870
We're not gonna go into
it in this course but

50
00:02:38,870 --> 00:02:41,240
please make sure to check
the teacher's notes for more on these.

51
00:02:42,670 --> 00:02:44,160
All right.

52
00:02:44,160 --> 00:02:46,040
That was a lot of info.

53
00:02:46,040 --> 00:02:47,950
And we'll review them as we use them.

54
00:02:47,950 --> 00:02:50,140
Let's go get our feet wet
with some hands-on fun,

55
00:02:50,140 --> 00:02:52,630
and explore these different node
types that we just learned all about.