Chapter- Three

Java GUI using JAVAFX

BY:
Andargie Mekonnen
 JavaFX Overview
JavaFX is a modern framework for building rich, cross-platform graphical
user interfaces (GUIs) in Java.

It is the successor to the older Swing and AWT toolkits and offers a more
flexible, feature-rich, and hardware-accelerated way to create desktop and
embedded applications.

5/22/2025 Andargie Mekonnen 2

 Key Features
Scene Graph Architecture :All UI components are treated as nodes in a
hierarchical tree structure.

Modern UI Components: Includes controls like buttons, sliders, tables,

combo boxes, charts, and [Link] Styling: Allows UI styling using
Cascading Style Sheets similar to web development.

FXML Support: XML-based UI description language for separating layout

from logic.

5/22/2025 Andargie Mekonnen 3

 Key Features
Animation and Effects: Built-in support for 2D/3D graphics and various
transitions/animations.

Media Support: Built-in capabilities to play audio and video files.

WebView: Embeds web content via a mini-browser based on WebKit.

Bindings and Properties: Powerful data binding system for synchronizing

UI and data.

Responsive Layouts: Various layout managers for creating flexible user

interfaces.
5/22/2025 Andargie Mekonnen 4
JavaFX vs Swing

5/22/2025 Andargie Mekonnen 5

 JAVAFX Packages
[Link]: Launch and manage JavaFX apps.
[Link]: Top-level window management (Stage).
[Link]: Scene graph, Nodes, UI elements.
[Link]: UI controls like buttons, text fields, etc.
[Link]: Layout panes.
[Link]: Event classes and interfaces.
[Link]: Transitions and animations.
[Link]: Loading FXML files and linking controllers.
[Link]: Properties and bindings.
5/22/2025 Andargie Mekonnen 6
 JAVAFX architecture and Program structure
The following illustration shows the architecture of JavaFX API. Here you can see the
components that support JavaFX API.

5/22/2025 Andargie Mekonnen 7

 JAVAFX architecture and Program structure
Scene Graph
A Scene Graph is the starting point of the construction of the GUI Application. It holds the
(GUI) application primitives that are termed as nodes.
A node is a visual/graphical object and it may include:
Geometrical (Graphical) objects − (2D and 3D) such as circle, rectangle, polygon, etc.
UI controls − such as Button, Checkbox, Choice box, Text Area, etc.
Containers − (layout panes) such as Border Pane, Grid Pane, Flow Pane, etc.
Media elements − such as audio, video and image objects.

5/22/2025 Andargie Mekonnen 8

 JAVAFX architecture and Program structure
Scene Graph
In general, a collection of nodes makes a scene graph. All these nodes are arranged in a
hierarchical order as shown below.

5/22/2025 Andargie Mekonnen 9

 JAVAFX architecture and Program structure
Scene Graph rule
Each node in the scene graph has a single parent, and the node which does not contain any
parents is known as the root node.

In the same way, every node has one or more children, and the node without children is
termed as leaf node; a node with children is termed as a branch node.

A node instance can be added to a scene graph only once.

The nodes of a scene graph can have Effects, Opacity, Transforms, Event Handlers, Event
Handlers, Application Specific States.

5/22/2025 Andargie Mekonnen 10

 JAVAFX architecture and Program structure
Quantum Toolkit
It is an abstraction over the low-level components of Prism, Glass, Media Engine, and Web
Engine. It ties Prism and GWT together and makes them available to JavaFX.

GWT (Glass Windowing Toolkit)

As the name suggests, GWT provides services to manage Windows, Timers, Surfaces
and Event Queues. GWT connects the JavaFX Platform to the Native Operating
System.

5/22/2025 Andargie Mekonnen 11

 JAVAFX architecture and Program structure
Prism
Prism is a high performance hardware–accelerated graphical pipeline that is used to render
the graphics in JavaFX. It can render both 2-D and 3-D graphics.

To render graphics, a Prism uses :

DirectX 9 on Windows XP and Vista.

DirectX 11 on Windows 7.

OpenGL on Mac and Linux, Embedded Systems.

5/22/2025 Andargie Mekonnen 12

 JAVAFX architecture and Program structure
WebView
Using JavaFX, you can also embed HTML content in to a scene graph. WebView is the
component of JavaFX which is used to process this content. It uses a technology called Web
Kit, which is an internal open-source web browser engine. This component supports
different web technologies like HTML5, CSS, JavaScript, DOM and SVG.

Using WebView, you can:

Render HTML content from local or remote URL.

Support history and provide Back and Forward navigation.

Reload the content.

5/22/2025 Andargie Mekonnen 13
 JAVAFX architecture and Program structure
Media Engine
The JavaFX media engine is based on an open-source engine known as a Streamer. This
media engine supports the playback of video and audio content.
The JavaFX media engine provides support for audio for the following file formats
 Audio: MP3,MAV,AIFF
 Video : FLV

The package [Link] contains the classes and interfaces to provide media
functionality in JavaFX. It is provided in the form of three components, which are
 Media Object − This represents a media file
 Media Player − To play media content.
 Media View − To display media.
5/22/2025 Andargie Mekonnen 14
 JavaFX Application Structure
In general, a JavaFX application will have three major components namely Stage, Scene
and Nodes as shown in the following diagram.

5/22/2025 Andargie Mekonnen 15

 JavaFX Application Structure
Stage and its Type
A stage (a window) contains all the objects of a JavaFX application. It is represented by
Stage class of the package [Link].

Primary Stage: The main application [Link] automatically by the JavaFX

runtime in the start(Stage primaryStage) method. Only one per application.

5/22/2025 Andargie Mekonnen 16

 JavaFX Application Structure
Stage and its Type

Secondary Stage: Any additional window created using new Stage().Used

for things like tools, popups, settings windows, etc.

5/22/2025 Andargie Mekonnen 17

 JavaFX Application Structure
Stage and its Type
Modal Stage: A stage that blocks interaction with other windows until it is [Link]
using [Link](...)..

Example:

5/22/2025 Andargie Mekonnen 18

 JavaFX Application Structure
Stage and its Type
Transparent Stage: A stage without window decorations or [Link] for
custom-shaped or styled windows.

Example:

Undecorated Stage: A stage without a title bar, minimize/maximize/close buttons.

Example:

Utility Stage: A small, simple window used for toolboxes or palette windows.

Example:
5/22/2025 Andargie Mekonnen 19
 JavaFX Application Structure
Stage and its Type
Full-Screen Stage: Covers the entire screen..

Example:

Summary:

5/22/2025 Andargie Mekonnen 20

 JavaFX Application Structure
Stage Type by its Style

Example:

5/22/2025 Andargie Mekonnen 21

 JavaFX Application Structure
Scene
A scene represents the physical contents of a JavaFX application. It contains all the
contents of a scene graph. The class Scene of the package [Link] represents the
scene object. At an instance, the scene object is added to only one stage.

Key Points:

Each Scene has a root node (usually a layout like VBox, BorderPane, etc.).

A Stage can have only one Scene at a time, but you can switch between multiple
scenes.

Scenes manage the UI layout, event handling, and rendering.

5/22/2025 Andargie Mekonnen 22
 JavaFX Application Structure
Scene Graph and Nodes
A Scene Graph is a hierarchical tree structure that represents all the visual elements
(nodes) of a JavaFX application's user interface. Think of it like a family tree of UI
elements, where each element is called a Node, and they are all organized under a single
root node in a Scene.
Basic Structure:

5/22/2025 Andargie Mekonnen 23

 JavaFX Application Structure
Scene Graph and Nodes
 A Node is the fundamental building block for all UI elements in JavaFX. Every
graphical element you see in a JavaFX application is a subclass of [Link].
Think of a node as:"Any item that can be placed on the screen such as a button, label,
text box, shape, image, or layout."

Node can be divided to:

 Container (Parent) Nodes: These nodes can contain other nodes (used to organize layout).
Example: Vbox, GridPane, AnchorPane etc.
 Leaf Nodes: These nodes do not contain children. They display information or accept input.
Example: Text, Label, Button , Circle etc.
5/22/2025 Andargie Mekonnen 24
 JavaFX Application Structure
Scene Graph and Nodes
 Root-Level Nodes (Layout / Container Nodes): These nodes hold and organize child
nodes.
 Base class for all layout containers)
 Package: [Link]

Common Layout Subclasses

5/22/2025 Andargie Mekonnen 25

 JavaFX Application Structure
Scene Graph and Nodes
 Root-Level Nodes (Layout / Container Nodes):

5/22/2025 Andargie Mekonnen 26

 JavaFX Application Structure
Scene Graph and Nodes
 Root-Level Nodes (Layout / Container Nodes):

5/22/2025 Andargie Mekonnen 27

 JavaFX Application Structure
Scene Graph and Nodes
 Root-Level Nodes (Layout / Container Nodes):

5/22/2025 Andargie Mekonnen 28

 JavaFX Application Structure
Scene Graph and Nodes
 Leaf-Level Nodes (No Children): These are the end nodes of the tree. You interact
with these the most.
Control Nodes (Interactive UI)Package: [Link]

5/22/2025 Andargie Mekonnen 29

 JavaFX Application Structure
Scene Graph and Nodes
 Shape Nodes (2D Graphics):
Package: [Link]

5/22/2025 Andargie Mekonnen 30

 JavaFX Application Structure
Scene Graph and Nodes
Media & Image Nodes :
Package: [Link] and [Link]

Text Nodes Package: [Link]

Web Content Package: [Link]

5/22/2025 Andargie Mekonnen 31

 JavaFX Application Structure
Rules & Best Practices

5/22/2025 Andargie Mekonnen 32

 Creating a JavaFX Application
To create a JavaFX application, you need to instantiate the Application class and
implement its abstract method start(). In this method, we will write the code for the
JavaFX Application.

Application Class

The Application class of the package [Link] is the entry point of the
application in JavaFX.

To create a JavaFX application, you need to inherit this class and implement its abstract
method start(). In this method, you need to write the entire code for the JavaFX graphics

5/22/2025 Andargie Mekonnen 33

 Creating a JavaFX Application
In the main method, you have to launch the application using the launch() method. This
method internally calls the start() method of the Application class as shown in the
following program.
Example:
public class JavafxSample extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
/* Code for JavaFX application. (Stage, scene, scene graph) */
}
public static void main(String args[]){
launch(args);
}}
5/22/2025 Andargie Mekonnen 34
 Creating a JavaFX Application
Within the start() method, in order to create a typical JavaFX application, you need to
follow the steps given below :
Prepare a scene graph with the required nodes.
Prepare a Scene with the required dimensions and add the scene graph (root node of
the scene graph) to it.
Prepare a stage and add the scene to the stage and display the contents of the stage.

5/22/2025 Andargie Mekonnen 35

 Creating a JavaFX Application
Preparing the Scene Graph
As per your application, you need to prepare a scene graph with required
nodes. Since the root node is the first node, you need to create a root node.
Steps to Create Scene Graph
Create leaf nodes (like Button, Label, TextField)
Create layout containers (like VBox, HBox, GridPane)
Add nodes to layout using .getChildren().add(...)
Create a Scene and add the layout
Set the scene to a Stage
5/22/2025 Andargie Mekonnen 36
 Creating a JavaFX Application
Create leaf nodes (like Button, Label, TextField)
Syntax:
NodeType nodeName = new NodeType();
// Set Node Properties
[Link](value);
[Link](value);

Example:

5/22/2025 Andargie Mekonnen 37

 Creating a JavaFX Application
Syntax to Create Common JavaFX Leaf Nodes

5/22/2025 Andargie Mekonnen 38

 Creating a JavaFX Application
Syntax to Create Common JavaFX Leaf Nodes

5/22/2025 Andargie Mekonnen 39

 Creating a JavaFX Application
Syntax to Create Common JavaFX Leaf Nodes

5/22/2025 Andargie Mekonnen 40

 Creating a JavaFX Application
Create layout containers
NodeType nodeName = new NodeType(optionalParameters);
Where,
NodeType: class (AnchorPane, GridPane,StackPane,Vbox,..)
nodeName: class instance variable
Parameter: child nodes it is optional
Example:
Setting Property
Syntax: [Link](Parameter);
Example:
5/22/2025 Andargie Mekonnen 41
 Creating a JavaFX Application
Add nodes to layout : Two ways
Directly as a Node Directory Like:

Using getChildren() Method Like:

5/22/2025 Andargie Mekonnen 42

 Creating a JavaFX Application
Add nodes to layout : Two ways
GridPane Example:

5/22/2025 Andargie Mekonnen 43

 Creating a JavaFX Application
Create a Scene and add the layout
Syntax:

5/22/2025 Andargie Mekonnen 44

 Creating a JavaFX Application
Create a Scene and add the layout
Example:

5/22/2025 Andargie Mekonnen 45

 Creating a JavaFX Application
Set the scene to a Stage
Syntax:

5/22/2025 Andargie Mekonnen 46

 Creating a JavaFX Application
Set the scene to a Stage
Example:

5/22/2025 Andargie Mekonnen 47

 Creating a JavaFX Application
: Launching the Application: Launch the JavaFX application by calling the static
method launch() of the Application class from the main method as follows.
Example:

5/22/2025 Andargie Mekonnen 48

 Creating a JavaFX Application
: Summing All in one to get JavaFx Application:
Example:

5/22/2025 Andargie Mekonnen 49

 Creating a JavaFX Application
: Summing All in one to get JavaFx Application:
Example:

5/22/2025 Andargie Mekonnen 50

 Creating a JavaFX Application
Lifecycle of JavaFX Application
The JavaFX Application class has three life cycle methods, which are :
start() :The entry point method where the JavaFX graphics code is to be written.
stop() :An empty method which can be overridden, here you can write the logic to
stop the application.
init() : An empty method which can be overridden, but you cannot create stage or
scene in this method.

5/22/2025 Andargie Mekonnen 51

 Creating a JavaFX Application
Lifecycle of JavaFX Application
In addition to these, it provides a static method named launch() to launch JavaFX
application.
Since the launch() method is static, you need to call it from a static context (main
generally). Whenever a JavaFX application is launched, the following actions will be
carried out (in the same order).
 An instance of the application class is created.
 Init() method is called.
 The start() method is called.
 The launcher waits for the application to finish and calls the stop() method.

5/22/2025 Andargie Mekonnen 52

 Creating a JavaFX Application
Terminating the JavaFX Application
When the last window of the application is closed, the JavaFX application is terminated
implicitly.
You can turn this behavior off by passing the Boolean value “False” to the static method
setImplicitExit() (should be called from a static context).
You can terminate a JavaFX application explicitly using the methods [Link]() or
[Link](int).

5/22/2025 Andargie Mekonnen 53

 CSS in JavaFX
JavaFX CSS is a styling language (similar to web CSS) used to control the
look and feel (colors, fonts, padding, borders, etc.) of JavaFX UI elements.
It separates style from logic.
Applied to nodes like Button, Label, TextField, etc.
Supports inline styling, external stylesheets, and internal application-defined styles

5/22/2025 Andargie Mekonnen 54

 CSS in JavaFX
JavaFX CSS uses a subset of CSS 3 syntax. Some common properties:

5/22/2025 Andargie Mekonnen 55

 CSS in JavaFX
JavaFX CSS uses a subset of CSS 3 syntax. Some common properties:

5/22/2025 Andargie Mekonnen 56

 CSS in JavaFX
JavaFX CSS class and ID
A class is a named group of styles that can be applied to multiple nodes. It's useful for
reusing styles.
How to use:

5/22/2025 Andargie Mekonnen 57

 CSS in JavaFX
JavaFX CSS class and ID
An ID is a unique identifier for a single node. Use it when you want to style a specific
node individually.
How to use:

5/22/2025 Andargie Mekonnen 58

 CSS in JavaFX
Difference between JavaFX CSS class and ID

5/22/2025 Andargie Mekonnen 59

 CSS in JavaFX
Example 1: Inline CSS

Example2: External CSS

.CSS file JavaFx. program

5/22/2025 Andargie Mekonnen 60

 CSS in JavaFX
 JavaFX Code: [Link]

5/22/2025 Andargie Mekonnen 61

 CSS in JavaFX
 JavaFX Code: [Link]

5/22/2025 Andargie Mekonnen 62

 CSS in JavaFX
 JavaFX Code: AddTwoNumbersWith CSS File: [Link]

5/22/2025 Andargie Mekonnen 63

 CSS in JavaFX
 Rules and Restrictions of JavaFX CSS

5/22/2025 Andargie Mekonnen 64

 CSS in JavaFX
 Benefits and usecase of JavaFX CSS

5/22/2025 Andargie Mekonnen 65

 CSS in JavaFX
 Rules and Restrictions of JavaFX CSS

5/22/2025 Andargie Mekonnen 66

 JavaFX - Event Handling
In JavaFX, we can develop GUI applications, web applications and graphical
applications. In such applications, whenever a user interacts with the
application (nodes), an event is said to have been occurred.
For example, clicking on a button, moving the mouse, entering a character
through keyboard, selecting an item from list, scrolling the page are the
activities that causes an event to happen.

5/22/2025 Andargie Mekonnen 67

 JavaFX - JavaFX - Event Handling
Types of Events
Foreground Events − Those events which require the direct interaction of a user.
They are generated as consequences of a person interacting with the graphical
components in a Graphical User Interface. For example, clicking on a button,
moving the mouse, entering a character through keyboard, selecting an item from
list, scrolling the page, etc.
Background Events − Those events that don't require the interaction of end-user are
known as background events. The operating system interruptions, hardware or
software failure, timer expiry, operation completion are the example of background
events.
5/22/2025 Andargie Mekonnen 68
 JavaFX - Event Handling
Events in JavaFX
The class named Event of the package [Link] is the base class for an event.
An instance of any of its subclass is an event. JavaFX provides a wide variety of events.
Some of them are are listed below.

5/22/2025 Andargie Mekonnen 69

 JavaFX - Event Handling
Event Handling
Event Handling is the mechanism that controls the event and decides what should happen, if
an event occurs. This mechanism has the code which is known as an event handler that is
executed when an event occurs.
JavaFX provides handlers and filters to handle events. In JavaFX every event has :
Target − The node on which an event occurred. A target can be a window, scene, and a node.
Source − The source from which the event is generated will be the source of the event. In the
above scenario, mouse is the source of the event.
Type − Type of the occurred event; in case of mouse event – mouse pressed, mouse released are
the type of events.

5/22/2025 Andargie Mekonnen 70

 JavaFX - JavaFX - Event Handling
Phases of Event Handling in JavaFX
Whenever an event is generated, JavaFX undergoes the following phases.
Route Construction: Whenever an event is generated, the default/initial route of the event is
determined by construction of an Event Dispatch chain. It is the path from the stage to the source
Node.
Event Capturing Phase: After the construction of the event dispatch chain, the root node of the
application dispatches the event. This event travels to all nodes in the dispatch chain (from top to
bottom). If any of these nodes has a filter registered for the generated event, it will be executed.
If none of the nodes in the dispatch chain has a filter for the event generated, then it is passed to
the target node and finally the target node processes the event.

5/22/2025 Andargie Mekonnen 71

 JavaFX - JavaFX - Event Handling
Phases of Event Handling in JavaFX
Event Bubbling Phase: In the event bubbling phase, the event is travelled from the target node to
the stage node (bottom to top). If any of the nodes in the event dispatch chain has a handler
registered for the generated event, it will be executed. If none of these nodes have handlers to
handle the event, then the event reaches the root node and finally the process will be completed.
Event Handlers and Filters: Event filters and handlers are those which contains application logic
to process an event. A node can register to more than one handler/filter. In case of parent–child
nodes, you can provide a common filter/handler to the parents, which is processed as default for
all the child nodes. As mentioned above, during the event, processing is a filter that is executed
and during the event bubbling phase, a handler is executed. All the handlers and filters
implement the interface EventHandler of the package [Link].
5/22/2025 Andargie Mekonnen 72
 JavaFX - Event Handling
In JavaFX, you can handle events using two primary methods:
1) Using Convenience Methods (setOnAction, setOnMouseClicked, etc.): These are
specialized setter methods for common events. They're simple and readable.
Syntax:

Example:

5/22/2025 Andargie Mekonnen 73

 JavaFX - Event Handling
In JavaFX, you can handle events using two primary methods:
More Example for Each event class:

5/22/2025 Andargie Mekonnen 74

 JavaFX - Event Handling
In JavaFX, you can handle events using two primary methods:
2) Using addEventHandler(EventType<T>, EventHandler<T>): This is the generic and
flexible method. It allows adding multiple handlers and works with event filtering as well.
Syntax:

Example:

5/22/2025 Andargie Mekonnen 75

 JavaFX - Event Handling
In JavaFX, you can handle events using two primary methods:
2) Using addEventHandler(EventType<T>, EventHandler<T>): This is the generic and
flexible method. It allows adding multiple handlers and works with event filtering as well.
Syntax:

Example:

5/22/2025 Andargie Mekonnen 76

 JavaFX - Event Handling
JavaFX Example: Add Two Numbers with Event Handling

5/22/2025 Andargie Mekonnen 77

 JavaFX - Event Handling
JavaFX Example: Add Two Numbers with Event Handling

5/22/2025 Andargie Mekonnen 78

 JavaFX - Event Handling
JavaFX Example: Add Two Numbers with Event Handling

5/22/2025 Andargie Mekonnen 79

 JavaFX - Event Handling
JavaFX Example: Calculator Using RadioButton

5/22/2025 Andargie Mekonnen 80

 JavaFX - Event Handling
JavaFX Example: Calculator Using RadioButton

5/22/2025 Andargie Mekonnen 81

 JavaFX - Event Handling
JavaFX Example: Calculator Using RadioButton

5/22/2025 Andargie Mekonnen 82

 JavaFX - Event Handling
JavaFX Example: Calculator Using RadioButton

5/22/2025 Andargie Mekonnen 83

5/22/2025 Andargie Mekonnen 84