JavaFX

JavaFX tutorial provides basic and advanced concepts of JavaFX.

Our JavaFX tutorial is designed for beginners and professionals.
JavaFX is a Java library that is used to develop Desktop
applications as well as Rich Internet Applications (RIA). The
applications built in JavaFX, can run on multiple platforms
including Web, Mobile and Desktops.
Our JavaFX tutorial includes all topics of JavaFX library such as
Fundamentals, 2D Shapes, 3D Shapes, Effects, Animation, Text,
Layouts, UI Controls, Transformations, Charts, JavaFX with CSS,
JavaFX with Media etc.
What is JavaFX?
JavaFX is intended to replace swing in Java applications as a GUI
framework. However, It provides more functionalities than
swing. Like Swing, JavaFX also provides its own components and
doesn't depend upon the operating system. It is lightweight and
hardware accelerated. It supports various operating systems
including Windows, Linux and Mac OS.
Features of JavaFX

Feature Description

Java Library It is a Java library which consists of

many classes and interfaces that are
written in Java.

FXML FXML is the XML based Declarative

mark up language. The coding can be
done in FXML to provide the more
enhanced GUI to the user.
Scene Builder Scene Builder generates FXML mark-
up which can be ported to an IDE.

Web view Web pages can be embedded with

JavaFX applications. Web View uses
WebKitHTML technology to embed
web pages.

Built in UI controls JavaFX contains Built-in components

which are not dependent on operating
system. The UI component are just
enough to develop a full featured
application.

CSS like styling JavaFX code can be embedded with

the CSS to improve the style of the
application. We can enhance the view
of our application with the simple
knowledge of CSS.

Swing The JavaFX applications can be

interoperability embedded with swing code using the
Swing Node class. We can update the
existing swing application with the
powerful features of JavaFX.

Canvas API Canvas API provides the methods for

drawing directly in an area of a
JavaFX scene.

Rich Set of APIs JavaFX provides a rich set of API's to

develop GUI applications.
 Integrated An integrated set of classes are
Graphics Library provided to deal with 2D and 3D
graphics.

Graphics Pipeline JavaFX graphics are based on

Graphics rendered pipeline(prism). It
offers smooth graphics which are
hardware accelerated.

High Performance The media pipeline supports the

Media Engine playback of web multimedia on a low
latency. It is based on a Gstreamer
Multimedia framework.

Self-contained Self Contained application packages

application have all of the application resources
deployment model and a private copy of Java and JavaFX
Runtime.

javaFX Application Structure

JavaFX application is divided hierarchically into three main
components known as Stage, Scene and nodes. We need to
import javafx.application.Application class in every JavaFX
application. This provides the following life cycle methods for
JavaFX application.
o public void init()
o public abstract void start(Stage primaryStage)
o public void stop()
in order to create a basic JavaFX application, we need to:
1. Import javafx.application.Application into our code.
 2. Inherit Application into our class.
3. Override start() method of Application class.
Stage
Stage in a JavaFX application is similar to the Frame in a Swing
Application. It acts like a container for all the JavaFX objects.
Primary Stage is created internally by the platform. Other stages
can further be created by the application. The object of primary
stage is passed to start method. We need to call show method on
the primary stage object in order to show our primary stage.
Initially, the primary Stage looks like following.

However, we can add various objects to this primary stage. The

objects can only be added in a hierarchical way i.e. first, scene
graph will be added to this primaryStage and then that scene
graph may contain the nodes. A node may be any object of the
user's interface like text area, buttons, shapes, media, etc.
Scene
Scene actually holds all the physical contents (nodes) of a JavaFX
application. Javafx.scene.Scene class provides all the methods to
deal with a scene object. Creating scene is necessary in order to
visualize the contents on the stage.
At one instance, the scene object can only be added to one stage.
In order to implement Scene in our JavaFX application, we must
import javafx.scene package in our code. The Scene can be
created by creating the Scene class object and passing the layout
object into the Scene class constructor. We will discuss Scene class
and its method later in detail.
Scene Graph
Scene Graph exists at the lowest level of the hierarchy. It can be
seen as the collection of various nodes. A node is the element
which is visualized on the stage. It can be any button, text box,
layout, image, radio button, check box, etc.
The nodes are implemented in a tree kind of structure. There is
always one root in the scene graph. This will act as a parent node
for all the other nodes present in the scene graph. However, this
node may be any of the layouts available in the JavaFX system.
The leaf nodes exist at the lowest level in the tree hierarchy. Each
of the node present in the scene graphs represents classes
of javafx.scene package therefore we need to import the package
into our application in order to create a full featured javafx
application.
JavaFX Key Features
JavaFX's key features include:
1. From JavaFX 2.0, JavaFX is written in Java (no need to learn a
new language). Starting from JDK 8, JavaFX is part of JDK.
2. Support CSS for skinning.
3. Support FXML: a XML-based declarative language to define
the structure of the user interface separated from the
application code.
4. Swing interoperability: You can use Swing UI in JavaFX
application.
5. WebView: for embedding HTML contents.
6. 2D/3D Graphics
7. Media: audio (mp3, wav, aiff), video (flv) and image.
8. Provide a JavaScript engine.
9. ......
In this article, I assume that you have some knowledge in Swing,
such as container/component, event-handling, and layout.
1. JavaFX By Examples

JavaFX is huge, with 36 packages. These are the commonly-used

packages:
 javafx.application: JavaFX application
 javafx.stage: top-level container
 javafx.scene: scene and scene graph.
 javafx.scene.*: control, layout, shape, etc.
 javafx.event: event handling
 javafx.animation: animation
1.1 Example 1: Hello World

1import javafx.application.Application;
2import javafx.event.ActionEvent;
3import javafx.event.EventHandler;
4import javafx.scene.Scene;
5import javafx.scene.control.Button;
6import javafx.scene.layout.StackPane;
7import javafx.stage.Stage;
8
9public class JavaFXHello extends Application {
10 private Button btnHello; // Declare a "Button" control
11
12 @Override
 13 public void start(Stage primaryStage) {
14 // Construct the "Button" and attach an "EventHandler"
15 btnHello = new Button();
16 btnHello.setText("Say Hello");
17 // Using JDK 8 Lambda Expression to construct an EventHandler<A
18 btnHello.setOnAction(evt -> System.out.println("Hello World!"));
19
20 // Construct a scene graph of nodes
21 StackPane root = new StackPane(); // The root of scene graph is a la
22 root.getChildren().add(btnHello); // The root node adds Button as a
23
24 Scene scene = new Scene(root, 300, 100); // Construct a scene given
25 primaryStage.setScene(scene); // The stage sets scene
26 primaryStage.setTitle("Hello"); // Set window's title
27 primaryStage.show(); // Set visible (show it)
28 }
29
30 public static void main(String[] args) {
31 launch(args);
32 }
33}
How It Works
1. A JavaFX GUI Program extends
from javafx.application.Application (just like a Java Swing
GUI program extends from javax.swing.JFrame).
2. JavaFX provides a huge set of controls (or components) in
package javafx.scene.control,
including Label, Button and TextField.
3. We declare and construct a Button control, and attach
a javafx.event.EventHandler<ActionEvent> to the Button, via
 method setOnAction() (of ButtonBase superclass), which
takes an EventHandler<ActionEvent>, as follows:
public final void setOnAction(EventHandler<ActionEvent>
value)
The EventHandler is a Functional Interface with an abstract
method handle(), defined as follows:

package javafx.event;
@FunctionalInterface
public interface EventHandler<T extends Event> extends
EventListener {
void handle(T event); // public abstract
}
We can trigger the handle() by firing the button, via clicking
the button with the mouse or touch, key press, or invoke
the fire() method programmatically.
In this example, we use a one-liner Lambda Expression (JDK
8) to construct an instance of Functional
Interface EventHandler. You can also use an anonymous
inner class (Pre JDK 8), as follows:

btnHello.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent evt) {
System.out.println("Hello World!");
}
});
4. JavaFX uses the metaphor of a theater to model the graphics
application. A stage (defined by the javafx.stage.Stage class)
represents the top-level container (window). The individual
 controls (or components) are contained in a scene (defined by
the javafx.scene.Scene class). An application can have more
than one scenes, but only one of the scenes can be displayed
on the stage at any given time. The contents of a scene is
represented in a hierarchical scene graph of nodes (defined
by javafx.scene.Node).

5. To construct the UI:

1. Prepare a scene graph.
2. Construct a scene, with the root node of the scene graph.
3. Setup the stage with the constructed scene.
6. In this example, the root node is a "layout" node (container)
named javafx.scene.layout.StackPane, which layouts its
children in a back-to-front stack. This layout node has one
child node, which is the Button. To add child node(s) under a
layout, use:
7. aLayout.getChildren().add(Node node) // Add one
node

aLayout.getChildren().addAll(Node... nodes) // Add all

nodes
 Notes: A JavaFX's Pane is similar to Swing's JPanel. However,
JavaFX has layout-specific Pane, such
as FlowPane, GridPane and BorderPane, which is similar to a
Swing's JPanel with FlowLayout, GridLayout and BorderLay
out.

8. We allocate a javafx.scene.Scene by specifying the root of the

scene graph, via constructor:

public Scene(Parent root, double width, double height)

where javafx.scene.Parent is a subclass of javafx.scene.Node,

which serves as the base class for all nodes that have children
in the scene graph.

9. We then set the stage's scene, title, and show it.