1. Computing

The JavaFX Scene Graph


To build a JavaFX application you need to understand how the JavaFX Scene Graph API handles the graphical user interface. The scene graph is a tree structure that defines an application's user interface. To build the user interface you are effectively filling the tree with graphical elements.

The Scene Graph API

The core set of classes for the JavaFX Scene Graph are held in the JavaFX.scene package.

The Scene Graph Tree Structure

The scene graph of a JavaFX application can be thought of as a family tree of visual elements (e.g., UI controls, 2D shapes, images, etc..) The relationship between these elements is defined by their position in the tree. In the same way that your father would be above you in your family tree, a visual element's parent will be about it in the scene graph. If a visual element has children then they will be below it in the scene graph

Each position in the scene graph tree is called a node. The node at the top of the scene graph tree is called the root. The root node is the only node within the scene graph without a parent, every other node must fit into the tree structure and therefore must have a parent.

 Nodes can be placed into one of two categories:

  • Branch Nodes - These are objects which have the Parent class as part of their hierarchy. The Parent class allows for the possibility of having child nodes. For example, Group objects (a collection of nodes), Region objects (i.e., StackPane, FlowPane) can have child nodes. But it also includes Control objects (e.g., Button, ChoiceBox) which can't have child nodes.
  • Leaf Nodes - These nodes cannot have child nodes. For example, Shape objects (e.g, Circle, Rectangle), ImageView objects (for displaying images) and MediaView objects (used for playing music or video).

The distinction of node type is not that important apart from reaffirming the tree-like nature of the scene graph.

Here's some code to build a Scene:

//extends the abstract Application interface 
public class SceneGraphStructure extends Application {

    //There's still a main class. All it does is launch application.
    public static void main(String[] args) {
    //The starting point for the application
    public void start(Stage primaryStage) {
        //Set the application window title
        primaryStage.setTitle("Hello World!");
        //Add a button.
        Button btn = new Button();
        btn.setText("Say 'Hello World'");

        //Event handler for the button
        btn.setOnAction(new EventHandler() {

            public void handle(ActionEvent event) {
                System.out.println("Hello World!");
        StackPane root = new StackPane();
        primaryStage.setScene(new Scene(root, 300, 250));

The root node is made from a StackPane. It's a region object which means it's a branch node. That allows it to have children and where the button fits into the hierarchy. The primaryStage Stage object is the overall container for the application. It gets passed to the start method. It takes the root node (i.e, the StackPane) and sets the size of the application window.

The button still has an event handler to pick up the button clicks. It's just that the syntax is different from what you would expect with the normal Java API.

Once you understand the scene graph structure it's just a case of picking the components you want to appear on the graphical user interface and adding them on. Much in the same way as you would when buliding a Swing application.

  1. About.com
  2. Computing
  3. Java
  4. Create User Interfaces
  5. JavaFX
  6. JavaFX: The JavaFX Scene Graph

©2014 About.com. All rights reserved.