Chapter 3: Java GUI using JavaFX

3.1. JavaFX architecture and 3.5. Shapes

Program structure 3.5.1. Color, Texts, Fonts
3.2. JavaFX layout components 3.5.2. Lines, Circle, Rectangle
3.3. Basic UI controls 3.5.3. CSS styling
3.3.1. Event handlers 3.6. Properties and Bindings
3.3.1. UI controls 3.7. Graphics and Animation

3.4. Composite UI controls

1
 3.1. Java GUI and JavaFX

• The JavaFX is a set of Java libraries designed to enable developers to

create and deploy rich client applications that behave consistently across
platforms
• The JavaFX library is available as a public Java application programming
interface (API).
• JavaFX provides us the flexibility to create various types of applications
such as desktop Applications, web applications, and graphical
applications.
2
 Rich Internet Applications
• are those web applications which provide similar features and experience
as that of desktop applications.
• They offer a better visual experience when compared to the normal web
applications to the users.
• These applications are delivered as browser plug-ins or as a virtual
machine and are used to transform traditional static applications into more
enhanced, fluid, animated and engaging applications.
• In an RIA, the graphical presentation is handled on the client side, as it has
a plugin that provides support for rich graphics. 3
 Rich Internet Applications
• Unlike traditional desktop applications, RIA’s don’t require to have any
additional software to run. As an alternative, you should install software
such as ActiveX, Java, Flash, depending on the Application.
• Three main technologies using which we can develop an RIA. These
include the following:
o Adobe Flash
o Microsoft Silverlight
o JavaFX
4
 JavaFX Features

• JavaFX contains several features that make it a preferred choice for

developing rich client applications:
• JavaFX is written in Java, which enables you to take advantage of all
Java features such as multithreading, generics, and lambda expressions.
You can use any Java IDE of your choice, such as NetBeans or Eclipse, to
author, compile, run, debug, and package your JavaFX application.
• These JavaFX applications are also platform independent.

5
 Cont…

• JavaFX supports data binding through its libraries.

• JavaFX code can also be written using any Java virtual machine (JVM)–
supported scripting languages such as Kotlin, Groovy, and Scala.
• JavaFX offers two ways to build a user interface (UI): using Java code and
using FXML. FXML is an XML-based scriptable markup language to
define a UI declaratively.
• JavaFX provides a rich set of multimedia support such as playing back
audio and videos. It takes advantage of available codecs on the platform.
6
 Cont…

• JavaFX lets you embed web content in the application.

• JavaFX provides out-of-the-box support for applying effects and
animations, which are important for developing gaming applications. You
can achieve sophisticated animations by writing a few lines of code.
• Scene Builder − JavaFX provides an application named Scene Builder. On
integrating this application in IDE’s such as Eclipse and NetBeans, the users
can access a drag and drop design interface, which is used to develop FXML
applications (just like Swing Drag & Drop and DreamWeaver Applications).
7
 Cont…

• Swing Interoperability − In a JavaFX application, you can embed Swing

content using the Swing Node class. Similarly, you can update the existing
Swing applications with JavaFX features like embedded web content and
rich graphics media.
• Built-in UI controls − JavaFX library caters UI controls using which we can
develop a full-featured application.
• CSS like Styling − JavaFX provides a CSS like styling. By using this, you
can improve the design of your application with a simple knowledge of CSS.
8
 Cont…

• Canvas and Printing API − JavaFX provides Canvas, an immediate mode

style of rendering API. Within the package [Link] it holds a
set of classes for canvas, using which we can draw directly within an area of
the JavaFX scene. JavaFX also provides classes for Printing purposes in the
package [Link].
• Rich set of API’s − JavaFX library provides a rich set of API’s to develop
GUI applications, 2D and 3D graphics, etc. Using this API, you can access
the features of Java languages such as Generics, Annotations,
Multithreading, and Lambda Expressions. 9
 Cont…

• Integrated Graphics library − JavaFX provides classes for 2d and 3d

graphics.
• Graphics pipeline − JavaFX supports graphics based on the Hardware-
accelerated graphics pipeline known as Prism. When used with a supported
Graphic Card or GPU it offers smooth graphics. In case the system does not
support graphic card then prism defaults to the software rendering stack.

10
JavaFX Architecture

11
 Scene Graph

• The JavaFX scene graph is the starting point for constructing a JavaFX
application.
• It is a hierarchical tree of nodes that represents all of the visual elements of
the application's user interface. It can handle input and can be rendered.
• A single element in a scene graph is called a node. Each node has an ID,
style class, and bounding volume.

12
 Cont…

• With the exception of the root node of a scene graph, each node in a scene
graph has a single parent and zero or more children. It can also have the
following:
o Effects, such as blurs and shadows
o Opacity
o Transforms
o Event handlers (such as mouse, key, and input method)
o An application-specific state
13
 Cont…

• Unlike in the Swing and Abstract Window Toolkit (AWT), the JavaFX
scene graph also includes the graphics primitives, such as rectangles and
text, in addition to having controls, layout containers, images, and media.
• Animating various graphics in the scene graph can be accomplished
quickly using the [Link] APIs.

14
 Cont…

• The [Link] API allows the creation and specification of several

types of content, such as:
o Nodes: Shapes (2-D and 3-D), images, media, embedded web browser,
text, UI controls, charts, groups, and containers.
o State: Transforms (positioning and orientation of nodes), visual effects,
and other visual states of the content.
o Effects: Simple objects that change the appearance of scene graph
nodes, such as blurs, shadows, and color adjustment.
15
 Java Public APIs for JavaFX Features

• APIs provide unparalleled freedom and flexibility to construct rich client

applications.
• These new Java APIs for JavaFX features:
o Allow the use of powerful Java features, such as generics, annotations, and
multithreading.
o Make it easier for Web developers to use JavaFX from other JVM-based
dynamic languages, such as Groovy, and JavaScript.
o Allow Java developers to use other system languages, such as Groovy.
o Extend the Java collections library to include observable lists and maps.
o Allow the use of binding. 16
 Graphics System

• JavaFX Graphics System is an implementation detail beneath the JavaFX

scene graph layer. It supports both 2-D and 3-D scene graphs.
• It provides software rendering when the graphics hardware on a system is
insufficient to support hardware-accelerated rendering.
• Two graphics accelerated pipelines are implemented on the JavaFX
platform:
1. Prism: processes render jobs. It can run on both hardware and software
renderers, including 3-D. It is responsible for rasterization and rendering
17
of JavaFX scenes.
 Cont…

2. Quantum Toolkit: ties Prism and Glass Windowing Toolkit together and
makes them available to the JavaFX layer above them in the stack.
• It also manages the threading rules related to rendering versus events
handling.

18
 Glass Windowing Toolkit

• Glass Windowing Toolkit is the lowest level in the JavaFX graphics stack.
Its main responsibility is to provide native operating services, such as
managing the windows, timers, and surfaces.
• It serves as the platform-dependent layer that connects the JavaFX
platform to the native operating system.
• The Glass toolkit is also responsible for managing the event queue.
• unlike AWT, the Glass toolkit runs on the same thread as the JavaFX
application. In AWT, the native half of AWT runs on one thread and the
19
Java level runs on another thread.
 Threads

• The system runs two or more of the following threads at any given time.
o JavaFX application thread: This is the primary thread used by
JavaFX application developers.
o Prism render thread: This thread handles the rendering separately
from the event dispatcher.
o Media thread: This thread runs in the background and synchronizes the
latest frames through the scene graph by using the JavaFX application
thread.
20
 Media and Images

• JavaFX media functionality is available through the [Link]

APIs. JavaFX supports both visual and audio media.
• Support is provided for MP3, AIFF, and WAV audio files and FLV video
files.
• JavaFX media functionality is provided as three separate components: the
Media object represents a media file, the MediaPlayer plays a media file,
and a MediaView is a node that displays the media.

21
 Web Component

• The Web component is a new JavaFX UI control, based on Webkit, that

provides a Web viewer and full browsing functionality through its API.
• This Web Engine component is based on WebKit, which is an open-source
web browser engine that supports HTML5, CSS, JavaScript, DOM, and
SVG.

22
 Cont…

• It enables developers to implement the following features in their Java

applications:
o Render HTML content from local or remote URL
o Support history and provide Back and Forward navigation
o Reload the content
o Apply effects to the web component
o Edit the HTML content
o Execute JavaScript commands
o Handle events 23
 Cont…

• This embedded browser component is composed of the following classes:

o WebEngine provides basic web page browsing capability.
o WebView encapsulates a WebEngine object, incorporates HTML
content into an application's scene, and provides fields and methods to
apply effects and transformations. It is an extension of a Node class

24
 3.2. JavaFX layout components

• Layout containers or panes can be used to allow for flexible and dynamic
arrangements of the UI controls within a scene graph of a JavaFX
application.
• The JavaFX Layout API includes the following container classes that
automate common layout models:
o The BorderPane class lays out its content nodes in the top, bottom,
right, left, or center region.
o The HBox class arranges its content nodes horizontally in a single row.
o The VBox class arranges its content nodes vertically in a single column.25
 Cont…

o The StackPane class places its content nodes in a back-to-front single

stack.
o The GridPane class enables the developer to create a flexible grid of
rows and columns in which to lay out content nodes.
o The FlowPane class arranges its content nodes in either a horizontal or
vertical “flow,” wrapping at the specified width (for horizontal) or
height (for vertical) boundaries.

26
 Cont…

o The TilePane class places its content nodes in uniformly sized layout
cells or tiles
o The AnchorPane class enables developers to create anchor nodes to the
top, bottom, left side, or center of the layout.
• To achieve a desired layout structure, different containers can be nested
within a JavaFX application.
• [Link] package is used to add Layout containers or panes.

27
 3.3.1. Event handling

• In JavaFX, An event occurs whenever the user interacts with the

application nodes.
• There are various sources by using which, the user can generate the event.
o For example, clicking on a button, moving the mouse, entering a
character through a keyboard, selecting an item from the list, and
scrolling the page are the activities that cause an event to happen.

28
 Types of Events

• The events can be broadly classified into the following two categories −
1. Foreground Events − Those events which require the direct interaction
of a user.
o They are generated as consequences of a person interacting with the
graphical components in a Graphical User Interface.
o For example, clicking on a button, moving the mouse, entering a
character through a keyboard, selecting an item from the list, scrolling
the page, etc.
29
 Cont…

2. Background Events − Those events that don't require the interaction of

the end-user are known as background events.
o For example Operating system interruptions, hardware or software
failure, timer expiry, operation completion.

30
 Cont…

• JavaFX provides support to handle a wide variety of events.

• 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 events:
i. Mouse Event: This is an input event that occurs when a mouse is clicked.
It is represented by the class named MouseEvent. It includes actions like
mouse clicked, mouse pressed, mouse released, mouse moved, mouse
entered target, mouse exited target, etc.
31
 Cont…

ii. Key Event: This is an input event that indicates the keystroke occurred
on a node. It is represented by the class named KeyEvent. This event
includes actions like key pressed, key released and key typed.
iii. Drag Event: This is an input event that occurs when the mouse is
dragged. It is represented by the class named DragEvent. It includes drag
entered, drag dropped, drag entered target, drag exited target, drag over,
etc.

32
 Cont…

iv. Window Event: This is an event related to the window showing/hiding

actions. It is represented by the class named WindowEvent. It includes
actions like window hiding, window shown, window hidden, window
showing, etc.

33
 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.
• In JavaFX every event has 3 basic elements:
1. Target: the node on which an event occurred. A target can be a
window, scene, and a node.
2. 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.
34
 Cont…

3. Type: the type of the occurred event; in the case of mouse event –
mouse pressed, mouse released are the type of events.
• To register a handler, use the addEventHandler() method. This method
takes the event type and the handler as arguments.
• When you no longer want an event handler to process events for a node or
for an event type, remove the handler using the removeEventHandler()
method. This method also takes the event type and the handler as
arguments.
35
 Example: Register an event using addEventHandler() method
public class MyApplication extends Application {
@Override public void start(Stage primaryStage) throws Exception {
// Create a button
Button button = new Button("Click me!");
// Set an event handler for the button using addEventHandler()
[Link](MouseEvent.MOUSE_CLICKED, new EventHandler<MouseEvent>()
{
@Override public void handle(MouseEvent event) {
[Link]("Button clicked!"); } });
cont…
36
 Cont…
// Add the button to a layout pane
StackPane root = new StackPane();
[Link]().add(button);
// Create a scene and add it to the stage
Scene scene = new Scene(root, 300, 250);
[Link](scene);
// Show the stage
[Link]();
}
public static void main(String[] args) {
launch(args);
}
37
}
 Cont…

In above example, we create a Button and set an event handler for it using the
addEventHandler() method.
• The event handler is an anonymous inner class that implements the
EventHandler interface and simply prints a message to the console when
the button is clicked.
• We then add the button to a StackPane, create a Scene with the StackPane
as its root node, and add the scene to a Stage. Finally, we show the stage
using the show method.
38
Example2: Removing an event using removeEventHandler() method
public class MyApplication extends Application {
private EventHandler<MouseEvent> buttonClickHandler;
@Override
public void start(Stage primaryStage) throws Exception {
// Create a button
Button button = new Button("Click me!");
// Set an event handler for the button using addEventHandler()
buttonClickHandler = event -> {
[Link]("Button clicked!");
}; cont… 39
 Cont…

[Link](MouseEvent.MOUSE_CLICKED, buttonClickHandler);
// Remove the event handler using removeEventHandler()
[Link](MouseEvent.MOUSE_CLICKED, buttonClickHandler);
[Link]("Event handler removed.");

• In this example, we create a Button and set an event handler for it using the
addEventHandler() method.
• The event handler is a lambda expression that simply prints a message to the console
when the button is clicked.
• Then the event handler will be removed from the button using the
removeEventHandler() method. 40
 3.3.2. Basic UI controls

• UI controls are a set of pre-built graphical user interface (GUI)

components that can be used to create desktop applications. Some of the
UI controls available in JavaFX:
1. Button: A basic UI control for triggering actions when clicked.
2. Label: A control for displaying text or an image.
3. TextField: A control for allowing users to enter text.
4. TextArea: A control for allowing users to enter multi-line text.
5. CheckBox: A control for allowing users to select one or more options from
41
a list.
 Cont…

6. RadioButton: A control for allowing users to select one option from a list.
7. ComboBox: A control for allowing users to select one option from a drop-
down list.
8. ListView: A control for displaying a list of items that can be selected.
9. TableView: A control for displaying tabular data.
10. TreeView: A control for displaying hierarchical data.
11. MenuBar: A control for displaying menus and menu items.
12. ToolBar: A control for displaying buttons and other controls in a
horizontal or vertical bar. 42
 Cont…

13. PasswordField: a text component specialized for password entry.

14. Scrollbar: To enable the user to select from a range of values.
15. FileChooser: A dialog window from which the user can select a file.
16. ProgressBar: Displays the task's percentage of completion.
17. Slider: lets the user graphically select a value by sliding a knob within a
bounded interval.

43
 Cont…

Example: Creating some UI controls

// Create a label
Label label = new Label("Enter your name:");
// Create a text field
TextField textField = new TextField();
// Create a button
Button button = new Button("Submit");
// Create a check box
CheckBox checkBox = new CheckBox("I agree to the terms and conditions");
cont…
44
 Cont…

// Create a radio button group

RadioButton radioButton1 = new RadioButton("Option 1");
RadioButton radioButton2 = new RadioButton("Option 2");
// Create a combo box
ComboBox<String> comboBox = new ComboBox<>();
[Link]().addAll("Option 1", "Option 2", "Option 3");
[Link]("Option 1");
// Create an HBox to hold the label and text field
HBox hbox1 = new HBox(10, label, textField);
[Link](new Insets(10));
45
 Cont…

// Create an HBox to hold the button and check box

HBox hbox2 = new HBox(10, button, checkBox);
[Link](new Insets(10));
// Create an HBox to hold the combo box
HBox hbox4 = new HBox(10, comboBox);
[Link](new Insets(10));
// Create a VBox to hold all of the controls
VBox vbox = new VBox(10, hbox1, hbox2, hbox4);
// Create a scene and add it to the stage
Scene scene = new Scene(vbox, 400, 300);
[Link](scene); 46
 3.5. Shapes
• JavaFX provides a variety of nodes to draw different types of shapes such as
lines, circles, rectangles, etc.
• All shape classes are in the [Link] package.
• The class named Shape is the base class of all the 2-Dimensional shapes in
JavaFX.
• It provides definitions of common properties for objects that represent some
form of geometric shape.
• These properties include the Paint to be applied to the fillable interior of the
shape (see setFill), the Paint to be applied to stroke the outline of the shape (see
47
setStroke), and the decorative properties of the stroke.
 Cont…

• Using the JavaFX library, you can draw predefined shapes such as Line,
Rectangle, Circle, Ellipse, Polygon, Polyline, Cubic Curve, Quad Curve,
Arc.
• You can also draw path elements such as MoveTO Path Element, Line,
Horizontal Line, Vertical Line, Cubic Curve, Quadratic Curve, Arc.
• In addition to these, you can also draw a 2D shape by parsing SVG path.

48
 3.5.1. Color, Texts, Fonts
• in JavaFX, you can use the [Link] class to create text-
based information on the interface of your JavaFX application.
• This class provides various methods to alter various properties of the
text.
• To set the font, you can use an instance of the [Link]
class. The [Link]() method enables you to specify the font family
name and size.

49
 Cont…

• To set the color of the Text, [Link] class provides another

method named setFill(). You just need to pass the color which is to be
filled in the text. For example, you can set the text color to red as shown
below:
Text t = new Text();
[Link]("This is a text sample");
[Link]([Link]("Verdana", 20));
[Link]([Link]);
50
 3.5.2. Lines, Circle, Rectangle
• Using the JavaFX library, you can draw 2D shapes.
• a 2D shape: is a geometrical figure that can be drawn on the XY plane,
these include Line, Rectangle, Circle, Ellipse, Polygon, Polyline, Cubic
Curve, Quad Curve, Arc, etc.
• A line: is a geometrical structure joining two point. The Line class of the
package [Link] represents a line in the XY plane.
• For example, if you want to create a line you need to instantiate the class
named Line as follows −
Line line = new Line(); 51
 Cont…

• A rectangle: is a four-sided polygon that has two pairs of parallel and

concurrent sides with all interior angles as right angles.
• In JavaFX, a Rectangle is represented by a class named Rectangle. This
class belongs to the package [Link].
• JavaFX library allows the developers to create a rectangle by
instantiating [Link] class.

52
 Cont…

Example: Creating a parent node(Group), creating a rectangle, then adding

properties, and then finally adding a rectangle to a parent node:
Group group = new Group(); //creating Group
Rectangle rect=new Rectangle(); //instantiating Rectangle
[Link](20); //setting the X coordinate of upper left //corner of rectangle
[Link](20); //setting the Y coordinate of upper left //corner of rectangle
[Link](100); //setting the width of rectangle
[Link](100); // setting the height of rectangle
53
[Link]().addAll(rect); //adding rectangle to the //group
 Cont…

• A circle: is a line forming a closed loop, every point on which is a fixed

distance from a centre point.
• In JavaFX, a circle is represented by a class named Circle
([Link]). This class belongs to the package
[Link]. Example: creating circle and set properties:
Circle circle1 = new Circle(); o Circle: is a class name
[Link](200); o circle1: is a circle name
o setCenterX()
[Link](200); o setCenterY() o Circle properties
[Link](100); o setRadius()
o setFill() 54
[Link]([Link]);
 3.5.3. CSS styling
• CSS (Cascading Style Sheets) is a design language which is used to
enhance the appearance of the web pages without changing its
functionality.
• JavaFX enables you to style JavaFX components using CSS, just like you
can style HTML and SVG elements in web pages with CSS.
• The default CSS file for JavaFX applications is [Link], which is
found in the JavaFX runtime jar file, [Link]. This file defines the styles
for the root node and the UI controls.
55
 Cont…

• JavaFX CSS uses the same CSS syntax as CSS for the web, but the CSS
properties are specific to JavaFX and therefore have slightly different
names than their web counterparts.
• For example, all JavaFX property names have been prefixed with a
vendor extension of -fx-.

56
 CSS Selectors
• A selector is an HTML tag at which a style will be applied.
• Selectors naming conventions :
1. If the style class selector consists of more than one word, use the hyphen
between them.
2. Style class selector names are preceded by a dot(.)
3. the style for a particular node can be defined by using the node's ID, Use
the # symbol before the Node_ID to make a style name for that node

57
 Cont…

• There is a special style class named as .root defined in javafx. It is

applied to the root node of the scene object.
• Since all the nodes of the application are the children of the root node
therefore the style rules applied to this class can be applied to the whole
scene graph of the application.

.root
{
Applying font-family and
-fx-font-family : "serief";
background to all scene graph
-fx-background : rgb(225,227,2255);
}
58
 Examples

.button {
Applying background-color and text-
-fx-background-color: red; fill properties to all button classes
-fx-text-fill: white;
}
#displayLabel1{
-fx-background-color : rgb(123,126,227); Applying background-color ,
-fx-padding : 5; padding, and text-fill properties
to the label node whose node-id
-fx-text-fill : rgb(245,123,201);
is displayLabel1
}
59
 Applying CSS styling
• To apply a CSS stylesheet to a JavaFX application, you can create a new
CSS file and save it in the same directory as the main class of your
application.
• The stylesheet you create must have an extension of .css. After creating
the stylesheet, you can add it to a Scene object using the
getStylesheets().add() method.
Example:
Scene scene = new Scene(new Group(), 500, 400);
[Link]().add("path/[Link]"); 60
 3.6. Properties and Bindings

• Properties: are observable objects that may be writable or read-only.

• There are several types of Property objects in JavaFX, including
StringProperty, SimpleListProperty, and ReadOnlyObjectProperty.
• Each property wraps an existing Java object, adding functionality for
listening and binding.

61
 Cont…

• Binding: is a mechanism for enforcing relationships between objects, in

which one or more observable objects are used to update the value of
another object.
• Bindings can act in one or both directions and can be created either
directly from properties (the Fluent API) or using the Bindings utility
class (Bindings API).
• Custom Bindings objects can also be created manually if you need extra
customization or performance. This is called the Low-Level API.
62
 Cont…

• JavaFX properties are often used in conjunction with binding, a powerful

mechanism for expressing direct relationships between variables.
• When objects participate in bindings, changes made to one object will
automatically be reflected in another object. This can be useful in a
variety of applications.

63
 3.7. Graphics and Animation

• JavaFX provides a rich set of graphics and animation APIs that allow
developers to create visually appealing and interactive applications.
• The [Link] package contains classes that can be used to
animate nodes by changing their properties over time.
• You can use JavaFX to quickly develop applications with rich user
experiences, create animated objects and attain complex effects with very
little coding.

64
 Cont…

• JavaFX also leverages the improved Graphical Processing Unit (GPU)

with the help of hardware-accelerated graphics.
• The [Link] module defines the core scenegraph APIs for the
JavaFX UI toolkit, such as layout containers, application lifecycle,
shapes, transformations, canvas, input, painting, image handling, and
effects, as well as APIs for animation, CSS, concurrency, geometry,
printing, and windowing.

65
 Common animation techniques in JavaFX

• JavaFX provides several techniques for creating animations.

• Some common animation techniques include:
o RotateTransition: which gives a rotation feature;
o ScaleTransition: which moves the object in all three directions X, Y,
and Z;
o TranslateTransition: which moves the object from one position to
another position with regular intervals of time;

66
 Cont…

o FadeTransition: which makes the object dull by specifying the opacity

value; and
o FillTransition: which animates the node's fill color (over the specified
duration).
• In addition to these transitions, JavaFX also provides the AnimationTimer,
Transition, and Timeline classes for creating animations.
• An animation can run in a loop by setting cycleCount. To make an
animation run back and forth while looping, set the autoReverse flag.
67
 Example: TranslateTransition animation

//Instantiating TranslateTransition class

TranslateTransition tr = new TranslateTransition();
//shifting the X coordinate of the centre of the circle by 50
[Link](-20);
//setting the duration for the Translate transition
[Link]([Link](1000));
//setting cycle count for the Translate transition
[Link](500);
//the transition will set to be auto reversed by setting this to true
[Link](true);
//setting Circle as the node onto which the transition will be applied
[Link](animationLabel);
[Link](); //playing the animation
68
THE END!

69