JavaFX: Introduction

This entry is part 1 of 55 in the series JavaFX

JavaFX is a set of Graphical UI tools that allow us to develop applications that run across multiple platforms.

Some of those common UI tools or elements are the button, stack panel, drop down boxes etc.

Before, we have been using Java Swing to implement the different sets of Graphical components in our applications.

JavaFX is a super set of Java Swing.  The main features implemented in JavaFX are developing UI elements using XML or CSS.

The XML markup language used in JavaFX is called FXML and I believe this is how JavaFX name is derived.

When you are learning JavaFX, you are in a way also learning Java Swing!

 

JavaFX: Creating the first application

This entry is part 2 of 55 in the series JavaFX

If you have been using the full bundle Netbeans package, the only other kit that you need to have in your PC is the Java JDK 8. Java JDK 8 is the latest Java Development kit.

You can also check if you can create a JavaFX application by clicking on the menu File -> New Project.

j1

If JavaFX is listed as one of the categories, you are good to go.  Else you might have to download the JDK again.

Now we will create the default JavaFX program that comes with Netbeans.

1. From the menu, click on File -> New Project.

j1

2. Select JavaFX, JavaFX Application.  Click on Next.

j2

3. We can use the default settings in the above screenshot and proceed to click on Finish to let the Netbeans create for us the first application.

4.  Do take note of that the application class will be called JavaFXApplication5.

5. Once you have clicked Finish, a basic button program would have been created for us.

Netbeans Default Button Application
/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package javafxapplication5;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

/**
 *
 * @author daryl
 */
public class JavaFXApplication5 extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        Button btn = new Button();
        btn.setText("Say 'Hello World'");
        btn.setOnAction(new EventHandler<ActionEvent>() {
            
            @Override
            public void handle(ActionEvent event) {
                System.out.println("Hello World!");
            }
        });
        
        StackPane root = new StackPane();
        root.getChildren().add(btn);
        
        Scene scene = new Scene(root, 300, 250);
        
        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
    
}

6.  Notice that the class name is called JavaFXApplication5.  This is actually an extension of the JavaFX Application class.

7.  If you run the program, we will have a window as shown below.

j3

JavaFX: Structure of a JavaFX application

This entry is part 3 of 55 in the series JavaFX

Using the example created by Netbeans, let’s look the structure of a JavaFX application.

The class that we have created here is called JavaFXApplication5, this is an extension of the main class javafx.application.Application.

JavaFX applications need a start() method but not the main() method. But for backward compatibility with Java Swing, we always include the main() method in the application.

The UI Interface of a FX application always contains a stage and scene.  The stage is the top-level or outermost container.  Inside the outermost container is the scene.

When we create a button, we are creating it in the scene.

Structure of A JavaFX App
/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package javafxapplication5;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

/**
 *
 * @author daryl
 */
public class JavaFXApplication5 extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        Button btn = new Button();
        btn.setText("Say 'Hello World'");
        btn.setOnAction(new EventHandler<ActionEvent>() {
            
            @Override
            public void handle(ActionEvent event) {
                System.out.println("Hello World!");
            }
        });
        
        StackPane root = new StackPane();
        root.getChildren().add(btn);
        
        Scene scene = new Scene(root, 300, 250);
        
        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
    
}

j3

JavaFX: How The Button Is Created

This entry is part 4 of 55 in the series JavaFX

We look back at the same default example and see how the button is created and displayed in the scene of the interface.

There are basically 3 sequence of actions involved.

1. We first set up the button by putting the text “Click Me” inside the button.

btn.setText("Click Me");

2. We put the button inside a Stackpane by using Stackpane’s getChildren() and add() methods.

root.getChildren().add(btn);

3.  We display the button in the scene.

primaryStage.setScene(scene);

This really shows why many of us took a long time to master Java Swing or Microsoft Foundation Class.  It is easy to be overwhelmed by these sequence of procedures that we need to set up just to display a button!

Take note that in the program below, I have made a slight modification to display a different button text when it is clicked.

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package javafxapplication5;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

/**
 *
 * @author daryl
 */
public class JavaFXApplication5 extends Application {

    @Override
    public void start(Stage primaryStage) {
        Button btn = new Button();
        btn.setText("Click Me");
        btn.setOnAction(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent event) {
                btn.setText("Presto!");
            }
        });

        StackPane root = new StackPane();
        root.getChildren().add(btn);

        Scene scene = new Scene(root, 300, 250);

        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }

}

button

JavaFX: Common classes

This entry is part 5 of 55 in the series JavaFX

The default program created by Netbeans has event and we will cover event in our later posts.

Using our 3 sequence of procedures, let’s create another more straight forward example to illustrate some common JavaFX classes.

In the example program below, we have 7 import statements which mean that we are using 7 JavaFX classes to display a Hello World text in our program.

In this example, we have used Stage and Scene classes similar to the previous example.

What are new here are actually the Text, Font and Color classes.

I will explain how I have used the 3 classes to display the text in the scene in the next post.

package javafxapplication4;

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.text.Text;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;


public class JavaFXApplication4 extends Application {

    @Override
    public void start(Stage primaryStage) {

        primaryStage.setTitle("JavaFX Program!");

        StackPane stackpane = new StackPane();

        Scene scene = new Scene(stackpane, 300, 250);
        primaryStage.setScene(scene);

        Text txt = new Text();
        txt.setFill(Color.BLUE);
        txt.setFont(Font.font("Times New Roman", 36));
        txt.setText("Hello World");

        stackpane.getChildren().add(txt);

        primaryStage.show();
    }

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

}

h1