Introduction to JavaFX

Objectives
◆ Understand JavaFX Architecture
◆ JavaFX Core: Stage, Scene, FXML
◆ Understand JavaFX Properties and Bindings, Events, Layouts, Controls
◆ Create Java desktop applications with JavaFX

2
 What is JavaFX?
◆ JavaFX is an open source, next generation client application platform for
desktop, mobile and embedded systems built on Java.
◆ It is a collaborative effort by many individuals and companies with the goal of
producing a modern, efficient, and fully featured toolkit for developing rich client
applications.
◆ A powerful framework for building rich client applications in Java.
◆ Successor to Swing, offering a modern approach to GUI development.
◆ Open-source and available as a separate library from Java 11 onwards.

3
 JavaFX - Key features
◆ Written in Java: Leverages the power and flexibility of the Java language,
including multithreading, lambda expressions, etc.
◆ Declarative UI with FXML: Define your UI structure using XML, making it easy
to separate UI design from application logic.
◆ Data Binding: Simplifies data synchronization between UI elements and the
underlying data model.
◆ Rich UI Controls: Provides a diverse set of modern and customizable UI
controls, including buttons, text fields, charts, and more.

4
 JavaFX - Key features
◆ Media and Web Integration: Enables playback of audio and video content and
embedding web components within your application.
◆ 2D and 3D Graphics: Offers robust support for both 2D and 3D graphics
rendering, allowing you to create visually stunning applications.
◆ Animations and Effects: Create smooth animations and apply various visual
effects to enhance user experience.
◆ CSS Styling: Style your application using CSS for consistent and flexible
design.

5
 JavaFX - Architecture
◆ javafx.animation − Contains classes to add
transition based animations such as fill, fade,
rotate, scale and translation, to the JavaFX
nodes.
◆ javafx.application − Contains a set of classes
responsible for the JavaFX application life cycle.
◆ javafx.css − Contains classes to add CSS–like
styling to JavaFX GUI applications.

6
 JavaFX - Architecture
◆ javafx.event − Contains classes and interfaces to deliver and handle JavaFX
events.
◆ javafx.geometry − Contains classes to define 2D objects and perform
operations on them.
◆ javafx.stage − This package holds the top level container classes for JavaFX
application.
◆ javafx.scene − This package provides classes and interfaces to support the
scene graph. In addition, it also provides sub-packages such as canvas, chart,
control, effect, image, input, layout, media, paint, shape, text, transform, web,
etc.

7
 JavaFX Parts
◆ JavaFX has 3 parts
 A GUI builder called SceneBuilder allows drag-and-drop manipulation of
widgets.
 A configuration language called FXML that records the widgets in the GUI,
their visible attributes and their relationship to each other.
 A Controller class that must be completed by the programmer to bring the
GUI to life.
◆ A JavaFX application has some additional parts
 A set of classes to describe the model, which is what the GUI allows the user
to interact with.
 A set of cascading style sheets (CSS files) to further specify “look-and-feel”.

8
 JavaFX Scene Builder
◆ JavaFX Scene Builder is a standalone JavaFX GUI visual layout tool that can
also be used with various IDEs including Eclipse, NetBeans and IntelliJ.

◆ JavaFX Scene Builder enables you to create GUIs by dragging and dropping
GUI components from Scene Builder’s library onto a design area, then
modifying and styling the GUI—all without writing any code.

◆ JavaFX Scene Builder generates FXML (FX Markup Language)—an XML

vocabulary for defining and arranging JavaFX GUI controls without writing any
Java code.

9
 JavaFX Scene Builder
◆ The FXML code is separate from the program logic that’s defined in Java
source code—this separation of the interface (the GUI) from the implementation
(the Java code) makes it easier to debug, modify and maintain JavaFX GUI
apps.

◆ Placing GUI components in a window can be tedious. Being able to do it

dynamically using a configuration file makes the job much easier.

◆ No additional compilation is needed unless actions need to be programmed in

the Controller.java class.

10
JavaFX App Window Structure

11
 JavaFX App Window Structure
◆ The Stage is the window in which a JavaFX app’s GUI is displayed
 It’s an instance of class Stage (package javafx.stage).
◆ The Stage contains one active Scene that defines the GUI as a scene graph -
a tree data structure of an app’s visual elements, such as GUI controls, shapes,
images, video, text and.
◆ The scene is an instance of class Scene (package javafx.scene).

◆ Controls are GUI components, such as

 Labels that display text,
 TextFields that enable a program to receive user input,
 Buttons that users click to initiate actions, and more.

12
 JavaFX Application Layout
◆ An application Window in JavaFX is known as a Stage.
 package javafx.stage

◆ A Stage contains an active Scene which is set to a Layout container.

 package javafx.scene

◆ The Scene may have other Layout containers for organizing Controllers in a
Tree organization.
 Nodes with children are layout containers.
 Nodes without children are widgets.

13
 JavaFX Application Layout
◆ Each visual element in the scene graph is a node - an instance of a subclass of
Node (package javafx.scene), which defines common attributes and behaviors
for all nodes

◆ With the exception of the first node in the scene graph - the root node - each
node in the scene graph has one parent.

◆ Nodes can have transforms (e.g., moving, rotating and scaling), opacity
(whether a node is transparent, partially transparent or opaque), effects (e.g.,
drop shadows, blurs, reflection and lighting) and more.

14
 JavaFX Application Controls
◆ Nodes with children are typically layout containers that arrange their child
nodes in the scene.
 Layout containers contain controls that accept inputs or other layout
containers.

◆ When the user interacts with a control, the control generates an event.
◆ Programs can respond to these events—known as event handling—to specify
what should happen when each user interaction occurs.

◆ An event handler is a method that responds to a user interaction. An FXML

GUI’s event handlers are defined in a so-called controller class.
15
 JavaFX Application Class
◆ JavaFX class must implement the abstract start() method of the Application
class

16
JavaFX Core Components, Concepts and
Features

17
 Scene to the Stage object
◆ To display something inside the JavaFX application window you must add a
Scene to the Stage object.

18
 JavaFX Stage
◆ A JavaFX Stage, javafx.stage.Stage, represents a window in a JavaFX desktop
application. Inside a JavaFX Stage, insert a JavaFX Scene which represents the
content displayed inside a window - inside a Stage.
◆ Operations:
 Creating a Stage
 Showing a Stage (show() vs. showAndWait())
 Set a Scene on a Stage
 Stage Title
 Stage Position
 Stage Width and Height
 Stage Modality
 Stage Owner
 Stage Style (DECORATED, UNDECORATED, TRANSPARENT, UNIFIED, UTILITY)19
 Stage Life Cycle Events
◆ The Stage events: Close
Request, Hiding, Hidden,
Showing, Shown
◆ Stage keyboard events

20
 JavaFX Scene
◆ The JavaFX Scene object is the root of the JavaFX Scene graph.
◆ JavaFX Scene contains all the visual JavaFX GUI components inside it.
◆ A JavaFX Scene is represented by the class javafx.scene.Scene.
◆ A Scene object has to be set on a JavaFX Stage to be visible.

◆ Operations
 Create Scene
 Set Scene on Stage
 The Scene Graph
 Scene Mouse Cursor

21
 JavaFX Scene
◆ The example shows how to
set a specific mouse cursor

22
 JavaFX Node
◆ Each JavaFX Node (subclass) instance can
only be added to the JavaFX scene graph
once.
◆ Node instance can only appear in one place
in the scene graph.

23
 JavaFX Node Properties
◆ A cartesian coordinate system
◆ A bounding box delimited by: Layout bounds, Bounds in local, Bounds in parent
◆ layoutX
◆ layoutY
◆ Preferred height
◆ Preferred width
◆ Minimum height
◆ Minimum width
◆ Maximum height
◆ Maximum width
◆ User data
◆ Items (Child nodes) 24
 JavaFX Properties
◆ A JavaFX Property is a special kind member variable of JavaFX controls.

◆ JavaFX properties are typically used to contain control properties such as X

and Y position, width and height, text, children and other central properties of
JavaFX controls.
◆ Can attach change listeners to JavaFX properties so other components can get
notified when the value of the property changes, and can bind properties to
each other so when one property value changes, so does the other.

25
 JavaFX FXML
◆ JavaFX FXML is an XML format that enables you to compose JavaFX GUIs in
a fashion similar to how you compose web GUIs in HTML.
◆ FXML enables to separate the JavaFX layout code from the rest of the
application code. This cleans up both the layout code and the rest of the
application code.

◆ FXML can be used both to compose the layout of a whole application GUI, or
just part of an application GUI, e.g. the layout of one part of a form, tab, dialog
etc.

26
JavaFX FXML Example

27
JavaFX Layout, Control Components

28
 JavaFX Layout Components
◆ Layout components to help organize and structure the user interface
◆ JavaFX layouts are components which contains other components inside them.
The layout component manages the layout of the components nested inside it.
◆ JavaFX layout components are also sometimes called parent components
because they contain child components, and because layout components are
subclasses of the JavaFX class javafx.scene.Parent.
◆ Common layout components:
 Group
 Region
 Pane
 VBox and HBox: Arranges its child nodes in a single vertical column or in a
single horizontal row.

29
 JavaFX Layout Components
◆ BorderPane: Layout component divides the application window into five
regions: top, bottom, left, right, and center.
◆ FlowPane: Arranges its child nodes in a flow that wraps at the boundary of the
layout. It is useful for creating dynamically laid out content.
◆ GridPane: Allows for a flexible grid of rows and columns, where child nodes
can be placed at specific row and column indices.
◆ StackPane: Layout component stacks its child nodes on top of each other.
◆ AnchorPane: Allows the positioning of nodes relative to the edges of the pane
or relative to each other. It is useful for creating precise layouts.
◆ TilePane: Layout its children in a grid of equally sized cells.

30
 JavaFX Controls
◆ JavaFX controls are JavaFX components which provide some kind of control
functionality inside a JavaFX application.

◆ For a control to be visible it must be attached to the scene graph of some

Scene object.

◆ Controls are usually nested inside some JavaFX layout component that
manages the layout of controls relative to each other.

31
 JavaFX Controls
◆ Common JavaFX Controls
 Accordion, Button, CheckBox, ChoiceBox, ColorPicker,
 ComboBox, DatePicker, Label, ListView, Menu, MenuBar, PasswordField
 ProgressBar, RadioButton, Slider, Spinner, SplitMenuButton, TableView
 TextArea, TextField, ToggleButton, ToolBar, TreeTableView, TreeView

32
 JavaFX Charts
The JavaFX charts available in the javafx.scene.chart package.
◆ AreaChart

◆ BarChart

◆ BubbleChart

◆ LineChart

◆ PieChart

◆ ScatterChart

◆ StackedAreaChart

◆ StackedBarChart

33
 JavaFX Charts
◆ The JavaFX PieChart component is
capable of drawing pie charts in
your JavaFX application based on
data you supply it.
◆ The PieChart component is really
easy to use.
◆ The JavaFX PieChart component is
represented by the class
javafx.scene.chart.PieChart.

34
 JavaFX 2D Graphics
◆ JavaFX contains features that makes it easy to draw 2D graphics on the
screen.
◆ 2D shape is represented by a class and all these classes belongs to the
package javafx.scene.shape.
◆ Predefined shapes such as Line, Rectangle, Circle, Ellipse, Polygon, Polyline,
Cubic Curve, Quad Curve, Arc.
◆ 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.

35
 JavaFX 3D Graphics
◆ JavaFX contains features that makes it easy to draw 3D graphics on the
screen.
◆ In general, a 3D shape is a geometrical figure that can be drawn on the XYZ
plane.
◆ They are defined by two or more dimensions, commonly length, width and
depth.
◆ 3D shapes supported by JavaFX include a Cylinder, Sphere and a Box.

◆ All 3D shape classes belong to the package javafx.scene.shape.

36
 JavaFX Audio, Video
◆ JavaFX contains features that makes it easy to play audio, video in JavaFX
applications.
◆ The package javafx.scene.media contains the classes and interfaces to
provide media functionality in JavaFX.
◆ It is provided in the form of three components
 Media Object − This represents a media file
 Media Player − To play media content.
 Media View − To display media.

37
 JavaFX WebView
◆ The JavaFX WebView (javafx.scene.web.WebView) component is capable of
showing web pages (HTML, CSS, SVG, JavaScript) inside a JavaFX
application. As such, the JavaFX WebView is a mini browser.
◆ The JavaFX WebView uses the WebKit open source browser engine internally
to render the web pages.
◆ The JavaFX WebView WebEngine (javafx.scene.web.WebEngine) is an
internal component used by the WebView to load the data that is to be
displayed inside the WebView.
◆ To make the WebView WebEngine load data, you must first obtain the
WebEngine instance from the WebView.

38
JavaFX WebView

39
JavaFX Demonstration

40
Demonstration JavaFX Simple Application

41
Demonstration JavaFX Simple Application

42
 JavaFX Concurrency
◆ JavaFX concurrency refers to how JavaFX is designed with respect to
multithreading and concurrency.
◆ JavaFX uses a single-threaded rendering design, meaning only a single thread
can render anything on the screen, and that is the JavaFX application thread.
In fact, only the JavaFX application thread is allowed to make any changes to
the JavaFX Scene Graph in general.
◆ A single-threaded rendering design is easier to implement correctly, but long-
running tasks that run within the JavaFX application thread make the GUI
unresponsive until the task is completed. No JavaFX GUI controls react to
mouse clicks, mouse over, keyboard input while the JavaFX application thread
is busy running that task.
43
 Summary
Concepts were introduced:
◆ JavaFX Architecture

◆ JavaFX Core: Stage, Scene, FXML

◆ Understand JavaFX Properties and Bindings, Events, Layouts, Controls

◆ Create Java desktop applications with JavaFX

44