Javafx Tutorial For Beginners Pdf

1- The requires

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


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  thee(fx)clipse
is not installed , you can see guidance at:

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
programming, you should install it.

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

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
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

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
application interface, you can write code in Java entirely. However, it takes so much time to do this,
JavaFX Scene Builder
is a okuler tool allowing you to design the interface of Scene. The code which is generated, is XML code saved on

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:

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

Preview the example:

  • File/New/Other…

file is created.

You can open the

file with
JavaFX Scene Builder.

Note: You are sure that you have installed
JavaFX Scene Builder, and integrated it into

The screen of
My Scene.fxml
interface design:

The components located on the

Finding Button and dragging it into

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

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

class will be created later.


            package org.o7planning.javafx;  import java.serok.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'n 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");                     // Arketipe Data         String dateTimeString = df.format(now);                 // Show in VIEW         myTextField.setText(dateTimeString);          }   }

            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 mulai(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));   ;                  } catch(Exception e) {             e.printStackTrace();         }     }         public static void main(String[] args) {         launch(args);     }     }