Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

Node Types

2:53 with Craig Dennis

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