CHAPTER THREE

JAVA GUI USING JAVAFX

JavaFX is a software platform and a set of graphics and media packages for creating rich,
interactive, and cross platform graphical user interfaces (GUIs). Developed by Oracle, JavaFX is
designed to replace the aging Swing GUI toolkit in Java applications. It provides a modern and
versatile framework for building desktop, mobile, and web applications with a focus on visually
appealing user interfaces and multimedia support.

JavaFX is a Java library and a GUI toolkit designed to develop and facilitate Rich Internet
applications, web applications, and desktop applications. The most significant perk of using
JavaFX is that the applications written using this library can run on multiple operating systems
like Windows, Linux, iOS, Android, and several platforms like Desktops, Web, Mobile Phones,
TVs, Tablets, etc. This characteristic of the JavaFX library makes it very versatile across
operating systems and different platforms.

Sun Microsystems (now acquired by Oracle Corporation) released a toolkit known as JavaFX to
promote desktop and rich internet applications (RIA) that can be accessed from the category of
devices. After the arrival of JavaFX, Java developers and programmers were able to develop the
GUI applications more effectively and more productively.

Note: Rich Internet Applications are those web applications that allow alike characteristics and
expertise as that of desktop applications. These applications contribute more satisfying visual
experience to the users when compared to the standard web applications.

JavaFX was introduced to supersede the Java Swing GUI framework. Nevertheless, the JavaFX
provides more enhanced functionalities and features than the Java Swing. Similar to the Java
Swing, the JavaFX also implements its own components. The components of the JavaFX are
irrespective of the Operating system. JavaFX is considered to be lightweight and hardware
stimulated. According to a report, after using the JavaFX for the development of Rich Internet
applications (RIA), the browser penetration rate recorded for these applications was 76%.

Need of JavaFX
  Programmers and developers used to require several libraries for adding various
functionalities like media, UI controls, animations and effects, 2D and 3D shapes, etc., in
their applications.
 JavaFX also displays a valuable collection of graphics and various media APIs, which
can further help in designing smooth applications.
 JavaFX also leverages the improved Graphical Processing Unit (GUI) with the help of
hardware-accelerated graphics.

Key features of JavaFX include:

Scene Graph: JavaFX uses a scene graph to represent the graphical user interface. The scene
graph is a hierarchical tree structure of visual elements (nodes), allowing for efficient rendering
and manipulation of the user interface.

CSS Styling: JavaFX supports Cascading Style Sheets (CSS), enabling developers to apply
styles to UI components for consistent and visually appealing designs. This makes it easier to
separate the presentation from the logic of the application.

FXML: JavaFX provides FXML, an XML based language for designing user interfaces. FXML
allows developers to define the structure of UI layouts in a declarative manner, separating the
design from the application logic.

Rich Set of UI Controls: JavaFX includes a wide variety of UI controls (buttons, text fields,
tables, etc.) and layout managers to facilitate the construction of complex and responsive user
interfaces.

Graphics and Multimedia Support: JavaFX supports 2D and 3D graphics rendering, as well as
multimedia features such as audio and video playback. This makes it suitable for applications
that require advanced graphical capabilities.

Animation API: JavaFX provides a robust Animation API that allows developers to create
smooth and visually appealing animations, enhancing the user experience.

Integration with Java: JavaFX seamlessly integrates with the Java programming language,
making it easy for Java developers to adopt and use it for building modern GUI applications.
Java Library – JavaFX is a Java library, which allows the user to gain the support of all the Java
characteristics such as multithreading, generics, lambda expressions, and many more. The user
can also use any of the Java editors or IDE’s of their choice, such as Eclipse, NetBeans, to write,
compile, run, debug, and package their JavaFX application.

Platform Independent – The rich internet applications made using JavaFX are platform-
independent. The JavaFX library is open for all the scripting languages that can be administered
on a JVM, which comprise – Java, Groovy, Scala, and JRuby.

WebView – JavaFX applications can also insert web pages. To embed web pages, Web View of
JavaFX uses a new HTML rendering engine technology known as WebKitHTML. WebView is
used to make it possible to insert web pages within a JavaFX application. JavaScript running in
WebView can call Java APIs and vice-versa.

High-Performance media engine – Like the graphics pipeline, JavaFX also possesses a media
pipeline that advances stable internet multimedia playback at low latency. This high-performance
media engine or media pipeline is based on a multimedia framework known as Gstreamer.

1.1. JAVAFX architecture and Program structure

JavaFX has numerous built-in elements that are interconnected with each other. JavaFX library
comprises a valuable collection of APIs, classes, and interfaces that are more than sufficient to
produce rich internet applications and GUI applications with intense graphics that can run
consistently over multiple platforms.

The subsequent figure displays the complete architecture of the JavaFX platform.
As we can see in the above figure that, JavaFX architecture comprises many different
components. These components are briefly described as follows:

1. JavaFX API – The topmost layer of JavaFX architecture holds a JavaFX public API that
implements all the required classes that are capable of producing a full-featured JavaFX
application with rich graphics. The list of all the important packages of this API is as
follows.

 javafx.animation: It includes classes that are used to combine transition-based

animations such as fill, fade, rotate, scale and translation, to the JavaFX nodes
(collection of nodes makes a scene graph).
 javafx.css − It comprises classes that are used to append CSS–like styling to the
JavaFX GUI applications.
 javafx.geometry − It contains classes that are used to represent 2D figures and
execute methods on them.
 javafx.scene − This package of JavaFX API implements classes and interfaces to
establish the scene graph. In extension, it also renders sub-packages such as
canvas, chart, control, effect, image, input, layout, media, paint, shape, text,
transform, web, etc. These are the diverse elements that sustain this precious API
of JavaFX.
 javafx.application − This package includes a collection of classes that are
responsible for the life cycle of the JavaFX application.
  javafx.event − It includes classes and interfaces that are used to perform and
manage JavaFX events.
 javafx.stage − This package of JavaFX API accommodates the top-level
container classes used for the JavaFX application.

2. Scene Graph – A Scene Graph is the starting point of the development of any of the GUI
Applications. In JavaFX, all the GUI Applications are made using a Scene Graph only.
The Scene Graph includes the primitives of the rich internet applications that are known
as nodes. In simple words, a single component in a scene graph is known as a node. In
general, a scene graph is made up of a collection of nodes. All these nodes are organized
in the form of a hierarchical tree that describes all of the visual components of the
application’s user interface (UI). A node instance can be appended to a scene graph only
once. The nodes of a scene graph can have numerous segments like Effects, Opacity,
Transforms, Event Handlers, Application Specific States. The nodes are of three general
types.

These are as follows:

 Root Node – A root node is a node that does not have any node as its parent.
 Leaf Node – A leaf node is a node that does not contain any node as its children.
 Branch Node – A branch node is a node that contains a node as its parent and also has a
node as its children.
3. Quantum Toolkit – Quantum Toolkit is used to connect prism and glass windowing
tool kits collectively and makes them prepared for the above layers in the stack. In simple
words, it ties Prism and GWT together and makes them available to JavaFX.
4. Prism – The graphics of the JavaFX applications are based on the hardware-accelerated
graphics rendering pipeline, commonly known as Prism. The Prism engine supports
smooth JavaFX graphics that can be executed swiftly when utilized with a backed
graphics card or graphics processing unit (GPU). In the situation where the system does
not contain the graphic cards, then the prism engine defaults to the software rendering
stack. To interpret graphics, a Prism practice:
 DirectX 9 on Windows XP and Vista.
 DirectX 11 on Windows 7.
 OpenGL on Mac and Linux, Embedded Systems.
5. Glass Windowing Toolkit – Glass Windowing Toolkit or simply Glass is a platform-
dependent layer that assists in connecting the JavaFX platform to the primary operating
system (OS). Glass Windowing Toolkit is very useful as it provides services such as
controlling the windows, events, timers, and surfaces to the native operating system.
6. WebView – JavaFX applications can also insert web pages. To embed web pages, Web
View of JavaFX uses a new HTML rendering engine technology known as
WebKitHTML. WebView is used to make it possible to insert web pages within a
JavaFX application. JavaScript appearing in WebView can call Java APIs and vice-versa.
 This element promotes different web technologies like HTML5, CSS, JavaScript, DOM,
and SVG. Using web view, we can execute the HTML content from the JavaFX
application and can also implement some CSS styles to the user interface (UI) part of the
application.
7. Media Engine – Like the graphics pipeline, JavaFX also possesses a media pipeline that
advances stable internet multimedia playback at low latency. This high-performance
media engine or media pipeline is based on a multimedia framework known as
Gstreamer. By applying the Media engine, the JavaFX application can support the
playback of audio and video media files. The package javafx.scene.media covers all the
classes and interfaces that can provide media functionalities to JavaFX applications

In Generally, JavaFX Architecture: JavaFX follows a modern and modular architecture,

primarily centered on the Scene Graph, a hierarchical tree like structure representing the visual
elements of a JavaFX application.

The key components include:

 Stage: Represents the main window of the application.

 Scene: Contains the visual elements (nodes) organized in a tree structure.
 Nodes: Represent UI elements such as buttons, text fields, and shapes.
 CSS Engine: Manages styling and layout information for UI components.
 Media Engine: Handles multimedia functionality, including audio and video.
Program Structure (steps of JavaFX implementation): A typical JavaFX program structure
involves setting up the application window (Stage), defining the content (Scene), and handling
user interactions. Below is a simple example:

import javafx.application.Application;

import javafx.scene.Scene;

import javafx.scene.control.Button;

import javafx.scene.layout.StackPane;

import javafx.stage.Stage;

public class MyJavaFXApp extends Application {

public void start(Stage primaryStage) {

primaryStage.setTitle ("JavaFX Example");

Button myButton = new Button ("Click me!");

StackPane root = new StackPane ();

root.getChildren ().add (myButton);

Scene scene = new Scene (root, 300, 200);

primaryStage.setScene (scene);

primaryStage.show();

public static void main(String[] args) {

launch(args);

}
1.2. JAVAFX layout components

 Layout components arrange UI elements systematically. Learn about common layout

managers like VBox, HBox, GridPane, etc., and their application in creating organized
GUIs.
 JavaFX provides a variety of layout components that allow developers to organize and
arrange UI elements within the application window. These layout components play a
crucial role in creating a visually appealing and responsive user interface.
 Here are some key JavaFX layout components:
1. VBox (Vertical Box):
 Arranges its children in a single vertical column.
 Useful for stacking UI elements vertically.
 Example:

VBox vbox = new VBox();

vbox.getChildren().addAll(new Button("Button 1"), new Button("Button 2"));

2. HBox (Horizontal Box):

 Places its children in a single horizontal row.
 Suitable for arranging UI elements side by side.
 Example:

HBox hbox = new HBox();

hbox.getChildren().addAll(new Label("Label 1"), new Label("Label 2"));

3. GridPane
 Organizes its children in a grid, using rows and columns.
 Enables precise control over the placement of UI elements.
 Example:

GridPane gridPane = new GridPane();

gridPane.add(new TextField("Text Field"), 0, 0); // (child, columnIndex, rowIndex)

4. BorderPane:
 Divides the layout into five regions: top, bottom, left, right, and center.
  Suitable for creating a typical page layout.
 Example:

BorderPane borderPane = new BorderPane();

borderPane.setTop(new MenuBar());

borderPane.setCenter(new TextArea("Content goes here."));

5. StackPane:
 Stacks its children on top of each other, with the last child added appearing on
top.
 Useful for overlaying elements.
 Example:

StackPane stackPane = new StackPane();

stackPane.getChildren().addAll(new Rectangle(100, 100, Color.BLUE),

new Button("Click me"));

6. FlowPane:
 Places its children in a flow, wrapping to the next row or column when space
is limited.
 Useful for responsive UIs.
 Example:

FlowPane flowPane = new FlowPane();

flowPane.getChildren().addAll(new Label("Item 1"), new Label("Item 2"));

7. AnchorPane:
 Positions its children based on absolute coordinates or relative to other
children.
 Provides finegrained control over element placement.
 Example:

AnchorPane anchorPane = new AnchorPane();

AnchorPane.setTopAnchor(new Button("Top Button"), 10.0);

 1.3. Basic UI controls

JavaFX provides a set of fundamental UI controls that serve as building blocks for creating
interactive and userfriendly graphical interfaces. These controls are essential for capturing user
input and presenting information.

These basic UI controls can be customized, styled, and combined to create more complex user
interfaces. Additionally, event handling mechanisms can be implemented to respond to user
interactions, making applications dynamic and responsive.

Understanding these controls is fundamental to building effective JavaFX applications with

intuitive user interfaces.

 Let's explore some of the basic UI controls and how to use them:
 Button: Represents a clickable button that triggers an action when pressed.

Example: Button myButton = new Button("Click me!");

 Label: Displays noneditable text or an image.

Example: Label myLabel = new Label("Hello, JavaFX!");

 TextField: Allows users to input singleline text.

Example: TextField myTextField = new TextField();

 TextArea: Similar to TextField but supports multiline text input.

Example: TextArea myTextArea = new TextArea();

 CheckBox: Represents a box that can be checked or unchecked.

Example: CheckBox myCheckBox = new CheckBox("Accept Terms and Conditions");

 RadioButton: A button that can be selected or deselected in a group of mutually

exclusive radio buttons.

Example:

RadioButton radioButton1 = new RadioButton("Option 1");

RadioButton radioButton2 = new RadioButton("Option 2");

 ToggleButton: A button that toggles between selected and unselected states.

 Example: ToggleButton toggleButton = new ToggleButton("Toggle Me");

 ComboBox: Presents a dropdown list of items from which the user can select one.

Example:

ComboBox<String> myComboBox = new ComboBox<>();

myComboBox.getItems().addAll("Option 1", "Option 2", "Option 3");

 Slider: Allows users to select a value within a specified range by dragging a thumb.

Example: Slider mySlider = new Slider(0, 100, 50);

 ProgressBar: Visualizes the progress of a task.

Example: ProgressBar myProgressBar = new ProgressBar();

1.3.1. Event handlers

Event handlers in JavaFX allow you to respond to user actions and interactions with UI controls.
They enhance the functionality of your application by executing specific code when events
occur. Here's an example of attaching an event handler to a button:

Example:

myButton.setOnAction(e > {

System.out.println("Button clicked!");

// Add your custom code here

});

1.3.2. UI controls

In JavaFX, UI controls are the building blocks of graphical user interfaces, enabling developers
to create interactive and userfriendly applications. Manipulating UI controls involves
customizing their properties, handling events, and dynamically updating their states. Let's
explore key concepts related to UI controls:
Customizing Properties:

 UI controls have various properties that define their appearance and behavior.
 Example: Customizing the text of a button.

Button myButton = new Button("Click me!");

myButton.setText("New Label");

Handling Events:

 Event handlers allow you to respond to user interactions with UI controls.

 Example: Attaching an event handler to a button.

myButton.setOnAction(e > {

System.out.println("Button clicked!");

// Add custom code here

});

Dynamically Updating States:

 UI controls can be updated dynamically based on application logic or user input.

 Example: Dynamically updating the text of a label.

Label myLabel = new Label("Initial Text");

myLabel.setText("Updated Text");

Styling with CSS:

 JavaFX supports styling UI controls using Cascading Style Sheets (CSS).

 Example: Applying CSS styles to a button.

myButton.setStyle("fxbackgroundcolor: 3498db; fxtextfill: white;");

Enabling and Disabling

 Controls can be enabled or disabled to control user interaction.

 Example: Disabling a text field.

TextField myTextField = new TextField();

 myTextField.setDisable(true);

Visibility:

 Adjusting the visibility of controls to show or hide them dynamically.

 Example: Making a checkbox invisible.

CheckBox myCheckBox = new CheckBox("Hide me");

myCheckBox.setVisible(false);

Tool Tips:

 Adding tool tips to controls to provide additional information.

 Example: Setting a tool tip for a button.
myButton.setTooltip(new Tooltip("Click to perform an action"));

Context Menus

 UI controls can have context menus for additional actions.

 Example: Adding a context menu to a text field.

ContextMenu contextMenu = new ContextMenu();

myTextField.setContextMenu(contextMenu);

Keyboard Shortcuts:

 Assigning keyboard shortcuts to controls for quick access.

 Example: Setting a keyboard shortcut for a button.

myButton.setMnemonicParsing(true);

myButton.setText("_Click me"); // Alt + C

1.3.3. Composite UI controls

Composite UI controls in JavaFX allow developers to create more complex and reusable
components by combining multiple basic UI controls. This enables the construction of
sophisticated user interfaces with enhanced functionality. Let's explore the concept of composite
UI controls and their implementation:
Composite controls are created by combining multiple basic UI controls within a single
container.

Example: Creating a composite control with a label, text field, and button.

public class CustomCompositeControl extends HBox {

private Label titleLabel;

private TextField dataTextField;

private Button actionButton;

public CustomCompositeControl() {

// Initialize and configure individual controls

titleLabel = new Label("Enter Data:");

dataTextField = new TextField();

actionButton = new Button("Submit");

// Add controls to the composite container (HBox in this case)

this.getChildren().addAll(titleLabel, dataTextField, actionButton);

// Additional configuration and event handling can be added here

Customizing Composite Controls:

 Composite controls can have their own methods, properties, and event handlers.
 Example: Adding a method to set the label text dynamically.

public void setLabelText(String text) {

titleLabel.setText(text);

Event Handling in Composite Controls:

  Event handling can be implemented for the composite control as a whole or for
individual components.
 Example: Adding an event handler to the button in the composite control.

actionButton.setOnAction(e > {

String inputData = dataTextField.getText();

System.out.println("Data submitted: " + inputData);

// Add custom logic here

});

Reusability:

 Composite controls promote reusability by encapsulating complex functionality.

 Example: Reusing the custom composite control in a different part of the application.

CustomCompositeControl customControl = new CustomCompositeControl();

// Add customControl to another layout or scene

1.4. Shapes

In the context of JavaFX or graphics programming in general, "shapes" refer to basic geometric
entities that can be drawn on a canvas or a graphical user interface. JavaFX provides various
classes for creating and manipulating shapes, allowing developers to incorporate visual elements
into their applications.

Shapes are fundamental for creating graphical elements in user interfaces, visualizations, games,
and other applications where drawing and rendering play a crucial role. They provide a versatile
and powerful means of incorporating visual elements into JavaFX applications.

1.4.1. Color, Texts, Fonts

A. Color:
 Palette of Colors:
 JavaFX offers a wide palette of colors through the “Color” class.
 Example: Using predefined colors.

Circle circle = new Circle(50, Color.BLUE);

 Applying Colors to Shapes:
 Colors can be applied to shapes such as circles, rectangles, and lines.
 Example: Setting the fill and stroke colors.

Rectangle rectangle = new Rectangle(100, 50);

rectangle.setFill(Color.GREEN);

rectangle.setStroke(Color.BLACK);

 Custom Colors:
 Custom colors can be created using RGB or RGBA values.
 Example:

Color customColor = Color.rgb(255, 0, 0); // Red

B. Texts
 Text Rendering:
 JavaFX allows the rendering of text using the “Text” class.
 Example: Displaying text on the screen.

Text text = new Text("Hello, JavaFX!");

 Font Manipulation:
 Fonts in JavaFX can be customized using the “Font” class.
 Example: Setting the font size and style.

text.setFont(Font.font("Arial", FontWeight.BOLD, 20));

 Styling Text:
 Text can be styled using CSS like styling options.
 Example: Applying styling to text.

text.setStyle("fxfill: red; fxfontsize: 16px;");

 Text Alignment:
 Text alignment properties control how text is positioned within its layout bounds.
 Example:
text.setTextAlignment(TextAlignment.CENTER);
 Font Selection:
 Fonts in JavaFX are represented by the Font class, allowing the specification of
font family, style, and size.
 Example:
Font customFont = Font.font("Times New Roman",
FontWeight.NORMAL, FontPosture.ITALIC, 16);
 Applying Fonts:
 Fonts can be applied to text nodes to customize their appearance.
 Example:
text.setFont(customFont);
 Dynamic Font Size:
 Font size can be dynamically adjusted based on application logic.
 Example:

text.setFont(Font.font("Arial", FontWeight.BOLD, fontSize));

1.4.2. Lines, Circle, Rectangle

A. Lines
 Creating Lines:
 Lines in JavaFX are represented by the “Line” class.
 Example: Drawing a line.

Line line = new Line(0, 0, 200, 200);

 Properties and Positioning

 Lines have properties like start and end coordinates.
 Example: Setting line properties.

line.setStrokeWidth(2);

line.setStroke(Color.BLACK);

B. Circle
 Creating Circles
 Circles can be created using the “Circle” class.
 Example: Generating a circle.
 Circle circle = new Circle(50, Color.BLUE);

 Properties and Positioning:

 Circles have properties like radius and color.
 Example: Setting circle properties.

circle.setCenterX(100);

circle.setCenterY(100);

C. Rectangle
 Creating Rectangles
 Rectangles are represented by the “Rectangle” class.
 Example: Constructing a rectangle.
Rectangle rectangle = new Rectangle(100, 50);
 Properties and Positioning:
 Rectangles have properties like width, height, and color.
 Example: Setting rectangle properties.

rectangle.setX(50);

rectangle.setY(50);

 Dynamic Updates:
 Properties of shapes can be dynamically updated to create interactive interfaces.
 Example: Dynamically changing the position of a rectangle

rectangle.setX(150);

1.4.3. CSS styling

 Applying CSS Styles:

 JavaFX elements can be styled using CSSlike syntax for a consistent look.
 Example: Applying styles to a button.

button.setStyle("fxbackgroundcolor: 3498db; fxtextfill: white;");

 Customization with CSS

 CSS styles allow customization of the look and feel of JavaFX elements.
 Example: Styling a label with CSS.
 label.setStyle("fxfontsize: 18px; fxfontweight: bold; fxtextfill: 2ecc71;");

 Enhancing Visual Appeal:

 CSS styling enhances the visual appeal of JavaFX applications.
 Example: Improving the appearance of a shape with CSS.

shape.setStyle("fxfill: e74c3c; fxstroke: c0392b; fxstrokewidth: 2;");

1.5. Properties and Bindings

1. Properties in JavaFX: Properties represent the state of UI components and can be observed
for changes. Example: A property representing the text of a label.

StringProperty labelText = new SimpleStringProperty("Initial Text");

Binding Properties: Properties can be bound together, ensuring that changes in one property
are reflected in another. Example: Binding the text property of a label to a text field.

label.textProperty().bind(textField.textProperty());

2. Bindings: Bindings create a relationship between properties, automatically updating one

when the other changes. Example: Creating a bidirectional binding between two properties.

DoubleProperty widthProperty = new SimpleDoubleProperty(100);

DoubleProperty heightProperty = new SimpleDoubleProperty(200);

widthProperty.bindBidirectional(heightProperty);

Conditional Binding: Bindings can have conditions, triggering updates based on specified
criteria.

Example: Binding a label's text color based on a condition.

label.textFillProperty().bind(Bindings.when(condition).then(Color.RED).otherwise
(Color.GREEN));

1.6. Graphics and Animation

1. Graphics in JavaFX:
 Canvas and GraphicsContext: The “Canvas” class provides an area for drawing, and
“GraphicsContext” allows rendering shapes, text, and images. Example: Drawing a circle on a
canvas.

Canvas canvas = new Canvas(200, 200);

GraphicsContext gc = canvas.getGraphicsContext2D();

gc.setFill(Color.BLUE);

gc.fillOval(50, 50, 100, 100);

Image Rendering: JavaFX supports loading and displaying images. Example: Loading and
displaying an image.

Image image = new Image("path/to/image.png");

ImageView imageView = new ImageView(image);

2. Animation in JavaFX:

Animation API: JavaFX provides the “Animation” class and its subclasses for creating
animations.

Example: Creating a fadein animation for a node.

FadeTransition fadeTransition = new FadeTransition(Duration.seconds(2),

node);

fadeTransition.setFromValue(0.0);

fadeTransition.setToValue(1.0);

fadeTransition.play();

Keyframe Animation: Keyframes allow specifying values at specific points in time.

Example: Using keyframes for a translation animation.

TranslateTransition translateTransition = new

TranslateTransition(Duration.seconds(3), node);
 translateTransition.getKeyFrames().addAll(

new KeyFrame(Duration.ZERO, new KeyValue(node.translateXProperty(), 0)),

new KeyFrame(Duration.seconds(3), new KeyValue(node.translateXProperty(),

300))

);

translateTransition.play();

3. Event Handling in Animation:

Handling Animation Events: Animation events, such as onfinish events, can be handled to
trigger actions. Example: Adding an event handler to an animation.

fadeTransition.setOnFinished(e > System.out.println("Fadein animation

finished"));

Combining Graphics and Animation: Graphics can be updated dynamically within

animations.

Example: Animating the position of a shape.

TranslateTransition translateTransition = new

TranslateTransition(Duration.seconds(3), shape);

translateTransition.setToX(200);

translateTransition.play();