JavaFX Tutorial for Beginners - Hello JavaFX

The requires
Create Hello World Project
Explanation of Hello World Example
JavaFX Scene Builder
Example with JavaFX Scene Builder

1. The requires

In this post, I will guide you to perform the JavaFX programming on IDE Eclipse.

e(fx)eclipse

e(fx)clipse is a set of tools and necessary libraries which helps you to perform the JavaFX programming, let's be sure that you have installed it as a Plugin for eclipse. If the e(fx)clipse is not installed , you can see guidance at:

Install efxclipse for Eclipse

JavaFX Scene Builder

JavaFX Scene Builder is a visual design tool which allows you to create an application interface quickly by dragging and dropping. And the code is created as XML. This is an option in order to perform the JavaFX programming, you should install it.

If not install JavaFX Scene Builder, you can see the instructions at:

Install JavaFX Scene Builder for Eclipse

2. Create Hello World Project

In Eclipse select:

File/New/Others..

Project is created:

The Code of the Hello World example is also created.

First of all, let's be sure that you run the example of Hello World successfully. Right click on Main class and select:

Run As/Java Application

The application of Hello World JavaFX is running:

3. Explanation of Hello World Example

In the above step, you have created and run Hello World JavaFX successfully.

The below illustration shows the relationship between Stage, Scene, Container, Layout and Controls:

In JavaFX, Stage is the application window, which contains the space called as Scene. Scene contains the components of the interface such as Button, Text,... or containers.

4. JavaFX Scene Builder

In order to create a JavaFX application interface, you can write code in Java entirely. However, it takes so much time to do this, JavaFX Scene Builder is a visual tool allowing you to design the interface of Scene. The code which is generated, is XML code saved on *.fxml file.

5. Example with JavaFX Scene Builder

This is a small example, I use Scene Builder to design application interface. The model of MVC applied to the example is illustrated as below:

After seeing it on VIEW
Users use CONTROLLER
Manipulate data (Update, modify, delete, ..), the data on MODEL has been changed.
Displaying the data of MODEL on VIEW.

Preview the example:

File/New/Other...

MyScene.fxml file is created.

You can open the fxml file with JavaFX Scene Builder.

Note: You are sure that you have installed JavaFX Scene Builder, and integrated it into Eclipse.
Install efxclipse for Eclipse

The screen of My Scene.fxml interface design:

The components located on the Scene:

Finding Button and dragging it into AnchorPane:

Set ID for Button as "myButton", you can have access to the Button from Java code via its ID. Set the method will be called when the button is clicked.

Dragging and dropping TextField into AnchorPane. Set ID for TextField which is newly dragged and dropped into AnchorPane as "myTextField", you can have access to the TextField on Java code via its ID.

Selecting File/Save to save the changes. And selecting Preview/Show Preview in Window to preview your design.

Closing Scene Builder windows and refreshing Project on Eclipse. You can see the code generated on the MyScene.fxml file:

Adding the attribute fx:controller to <AnchorPane>, the Controller will be useful to the Controls lying inside AnchorPane such as myButton and myTextField.

Note: org.o7planning.javafx.MyController class will be created later.

Controller

MyController.java

package org.o7planning.javafx;

import java.net.URL;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.ResourceBundle;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;

public class MyController implements Initializable {

   @FXML
   private Button myButton;
 
   @FXML
   private TextField myTextField;
 
   @Override
   public void initialize(URL location, ResourceBundle resources) {

       // TODO (don't really need to do anything here).
     
   }

   // When user click on myButton
   // this method will be called.
   public void showDateTime(ActionEvent event) {
       System.out.println("Button Clicked!");
     
       Date now= new Date();
     
       DateFormat df = new SimpleDateFormat("dd-MM-yyyy HH:mm:ss.SSS");
     
     
        // Model Data
        String dateTimeString = df.format(now);
       
        // Show in VIEW
        myTextField.setText(dateTimeString);
     
   }
 
}

MyApplication.java

package org.o7planning.javafx;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class MyApplication  extends Application {
   
 
    @Override
    public void start(Stage primaryStage) {
        try {
            // Read file fxml and draw interface.
            Parent root = FXMLLoader.load(getClass()
                    .getResource("/org/o7planning/javafx/MyScene.fxml"));

            primaryStage.setTitle("My Application");
            primaryStage.setScene(new Scene(root));
            primaryStage.show();
        
        } catch(Exception e) {
            e.printStackTrace();
        }
    }
   
    public static void main(String[] args) {
        launch(args);
    }
   
}

Running MyApplication class: