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.