← back to the blog


Intro to JavaFX

Posted in JavaFX

JavaFx is a GUI framework that comes prepackaged with JDK>1.7 update 6. In this tutorial I will walk you through the basics of JavaFX .This is my first blog and I will be creating a list of tutorials on JavaFx . Here though, we will start with a basic “Hello world” example and gradually build on top of it.

Prerequisites:

  • Basic knowledge of Java
  • JDK 7/8(for jdk<1.7 update 6, you will need to externally add JavaFX’s jar files)
  • Any IDE of your choice

Go ahead and copy paste this code in a file (named Main.java) and add all the imports. On running this program you will see a a window with the label “Hello world” somewhere at the centre.


public class Main extends Application {

    public static void main(String[] args) {
        launch(args);
    }


    @Override
    public void start(Stage primaryStage) throws Exception{

        Pane pane= new Pane();
        Label helloWorldLabel=new Label("Hello World");
        helloWorldLabel.setLayoutX(125);
        helloWorldLabel.setLayoutY(100);
        pane.getChildren().add(helloWorldLabel);
        primaryStage.setTitle("Title");
        primaryStage.setScene(new Scene(pane, 300, 275));
        primaryStage.show();
    }
}

The first thing you will notice is the Application class which the Main class extends. It has an abstract method  “start(Stage primaryStage)”  that our class “Main” needs to implement. This method acts as the main entry point for our JavaFx application. If you noticed ,the main method only calls a static method “launch” which internally creates an instance of the calling class(Main in this case) and calls its start method.

In JavaFx, every view(such a Labels,Text,Buttons etc) is referred to as a Node. These nodes are arranged in a hierarchical fashion forming a tree data structure, making up whats call the Scene Graph. Each node can have zero or one parent. The root node has no parent.

In the first three lines of the start method, we are creating the Scene Graph.In line 1, we instantiate a Pane.A Pane is a simple view container that allows it children nodes to be positioned anywhere in the “contained space”.In line 2,we create a Label titled “Hello world”.In the next two lines we position the label  by specifying the layoutX and layoutY properties (125,100).Note that in JavaFx, Y increases as we go down. Finally, we add the Label as a child to the Pane(line 5).So right now our simple scene graph looks like this.

Now a scene graph needs to be contained in a Scene.This is where the Scene class comes in.By specifying just the root element along with the dimensions of the window, our Scene is “said to be created”. The Scene itself is contained in a top level container called the Stage.Think of a stage as a window,which houses the scene that it needs to show.

The start method provides us with “primaryStage” argument that will act as the main window for our application. We will later see, how we can create additional windows in the application.In the last three lines of the start method, we set the title of the window to “Tutorial”(line 6). In line 7, we set the Scene of the primaryStage by instantiating a new Scene class and providing it a Scene Graph(root) along with the dimensions(300,275). At the very end(line 8) we issue the show method on the primaryStage . This is where our Scene graph is fired and we see the main window.

At this point, we got the basics covered. Lets experiment with some more types of views, here I will add a button titled “My Button” and a TextField with the default value “My Textfield”. Notice that now we are using the addAll method to add all our views at once.Also keep in mind the order in which we added the our views.We will come to this in a second.

 

 @Override
    public void start(Stage primaryStage) throws Exception{

        Pane pane= new Pane();

        Label helloWorldLabel=new Label("Hello World");
        helloWorldLabel.setLayoutX(125);
        helloWorldLabel.setLayoutY(100);

        Button button=new Button("My Button");
        button.setLayoutX(150);
        button.setLayoutY(125);

        TextField textField=new TextField("My Textfield");
        textField.setLayoutX(50);
        textField.setLayoutY(200);

        pane.getChildren().addAll(helloWorldLabel,button,textField);

        primaryStage.setTitle("Title");
        primaryStage.setScene(new Scene(pane, 300, 275));
        primaryStage.show();
    }

So now our scene graph will look something like this:

On running the above code, you will notice that the TextField overlaps on top of the button. This is where the order of the nodes plays a crucial role. In JavaFX, nodes don’t have an explicit “z-index” property which could dictate the order in which nodes are drawn, one on top of the other. Instead, its the order of nodes in the children list of a parent node(Pane,in this case) which decides which node gets drawn on top. Fortunately, we have some very convenient ways to change this order. But we will cover those later.

That wraps up this introductory tutorial on javaFx. Going forward, we will learn about the different types of containers and views, and later ,event handling. As said before, this is my first blog. If I missed out or misspoke any detail , please feel free to correct me. Comments will be appreciated.