Node Types

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