Object Oriented Programming -I

(3140705)

Unit-07
JavaFX and
Event-driven
programming
and Prof. Jayesh D. Vagadiya
Computer Engineering

animations
Department
Darshan Institute of Engineering & Technology, Rajkot
[email protected]
9537133260
 Outline
Looping

What is JavaFX?
Architecture of JavaFX API
JavaFX Application Structure
Lifecycle of JavaFX Application
2D Shape
JavaFX - Colors
JavaFX – Image
Layout Panes
JavaFX – Events
Property Binding
Animation
What is JavaFX?
 JavaFX is a Java library used to build Rich Internet Applications (RIA) and
Desktop Applications.
 The applications developed using JavaFX can run on various devices such
as Desktop Computers, Mobile Phones, TVs, Tablets, etc.
 To develop GUI Applications using Java programming language, the
programmers rely on libraries such as Advanced Windowing Toolkit (AWT)
and Swing. After the advent of JavaFX, these Java programmers can now
develop GUI applications effectively with rich content.
 Why we need JavaFX
 To develop Client Side Applications with rich features, the programmers used to
depend on various libraries to add features such as Media, UI controls, Web, 2D and
3D, etc.
 JavaFX provides a rich set of graphics and media API’s and it leverages the modern
Graphical Processing Unit through hardware accelerated graphics.
 One can use JavaFX with JVM based technologies such as Java, Groovy and JRuby. If
developers opt for JavaFX, there is no need to learn additional technologies.
Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 3
Features of JavaFX
 Written in Java
 FXML
 Scene Builder
 Swing Interoperability
 Built-in UI controls
 CSS like Styling
 Canvas and Printing API
 Rich set of API’s
 Integrated Graphics library
 Graphics pipeline

Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 4

Architecture of JavaFX API

JavaFX API Scene Graph

Quantum Toolkit

JavaFX Graphics Engine

Prism Glass Web View Media

Win32 | OpenGL |
Web kit G Streams
GWT D3D

JDK API and Toolkit

Java Virtual Machine

Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 5

Architecture of JavaFX API (Cont.)
 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
 UI controls
 Containers
 Media elements
 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.
 GWT (Glass Windowing Toolkit)
 GWT provides services to manage Windows, Timers, Surfaces and Event Queues.
 GWT connects the JavaFX Platform to the Native Operating System.

Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 6

Architecture of JavaFX API (Cont.)
 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.
 WebView
 WebView is the component of JavaFX which is used to process HTML 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.
 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.

Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 7

Installing JavaFX
 You can install JavaFX directly on eclipse
using the Market Place.
 To download JavaFX from Market Place,
open Help -> Eclipse Market
Place
 Then simply search “fx” and install the
e(fx)clipse from the Market Place.
 It will take time to install and after
installation you need to restart the eclipse.
 Alternatively you can also download JavaFX
SDK manually from
https://gluonhq.com/products/javafx/
 Then you need to create a custom library in
eclipse to load JavaFX to your project.

Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 8

JavaFX Application Structure

Stage
Scene
Scene Graph
Root
Nod
e
Branc Leaf
h Nod
Node e

Leaf Leaf
Nod Nod
e e

Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 9

Stage
 A stage (a window) contains all the objects of a JavaFX application.
 It is represented by Stage class of the package javafx.stage.
 The primary stage is created by the platform itself. The created stage
object is passed as an argument to the start() method of the
Application class.
 A stage has two parameters determining its position namely Width and
Height.
 There are five types of stages available
 Decorated // stageObj.initStyle(StageStyle.DECORATED);
 Undecorated // stageObj.initStyle(StageStyle.UNDECORATED);
 Transparent // stageObj.initStyle(StageStyle.TRANSPARENT);
 Unified // stageObj.initStyle(StageStyle.UNIFIED);
 Utility // stageObj.initStyle(StageStyle.UTILITY);
 You have to call the show() method to display the contents of a stage.

Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 10

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 javafx.scene represents the scene
object. At an instance, the scene object is added to only one stage.
 You can create a scene by instantiating the Scene Class.
 You can opt for the size of the scene by passing its dimensions (height and
width) along with the root node to its constructor.

Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 11

Scene Graph and Nodes
 A scene graph is a tree-like data structure (hierarchical) representing the
contents of a scene. In contrast, a node is a visual/graphical object of a
scene graph. A node may include,
 Geometrical (Graphical) objects (2D and 3D) such as − Circle, Rectangle, Polygon,
etc.
 UI Controls − Button, Checkbox, Choice Box, Text Area, etc.
 Containers (Layout Panes) – Border Pane, Grid Pane, Flow Pane, etc.
 Media elements – Audio, Video and Image Objects.
 The Node class of the package javafx.scene represents a node in JavaFX,
this class is the super class of all the nodes.
 Root Node − First Scene Graph is known as Root node. It’s mandatory to pass root
node to the scene graph.
 Branch Node/Parent Node − The node with child nodes are known as branch/parent
nodes. The abstract class named Parent of the package javafx.scene is the base
class of all the parent nodes, and those parent nodes will be of the following types
 Group − A group node is a collective node that contains a list of children nodes.
 Region − It is the base class of all the JavaFX Node based UI Controls, such as Chart, Pane
and Control.
Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 12
Steps to create JavaFX application
1. Extend the Application class of javafx.application package in your
class.
2. Override start method of Application class.
3. Prepare a scene graph with the required nodes.
4. Prepare a Scene with the required dimensions and add the scene graph
(root node of the scene graph) to it.
5. Prepare a stage and add the scene to the stage and display the contents
of the stage.

Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 13

3. Prepare a Scene graph
 Since the root node is the first node, you need to create a root node and it
can be chosen from the Group, Region or WebView.
 Group
A Group node is represented by the class named Group which belongs to the
package javafx.scene, you can create a Group node by instantiating this class as
shown below.
Group root = new Group();
Group root = new Group(NodeObject);
 Region
It is the Base class of all the JavaFX Node-based UI Controls, such as −
 Chart − This class is the base class of all the charts and it belongs to the package
javafx.scene.chart which embeds charts in application.
 Pane − A Pane is the base class of all the layout panes such as AnchorPane, BorderPane,
DialogPane, etc. This class belong to a package that is called as − javafx.scene.layout
which inserts predefined layouts in your application.
 Control − It is the base class of the User Interface controls such as Accordion,
ButtonBar, ChoiceBox, ComboBoxBase, HTMLEditor, etc. This class belongs to the
package javafx.scene.control.
 WebView
Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 14
4. Preparing the Scene
 A JavaFX scene is represented by the Scene class of the package
javafx.scene.
Scene scene = new Scene(root,width,heigth);
 While instantiating, it is mandatory to pass the root object to the
constructor of the Scene class whereas width and height of the scene are
optional parameters to the constructor.

Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 15

5. Preparing the Stage
 Stage is the container of any JavaFX application and it provides a window
for the application. It is represented by the Stage class of the package
javafx.stage.
 An object of this class is passed as a parameter of the start() method of
the Application class.
 Using this object, various operations on the stage can be performed like
 Set the title for the stage using the method setTitle().
primaryStage.setTitle("Sample application");
 Attach the scene object to the stage using the setScene() method.
primaryStage.setScene(scene);
 Display the contents of the scene using the show() method as shown below.
primaryStage.show();

Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 16

Basic Example of JavaFX
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class MyFirstGUI extends Application{

public void start(Stage primaryStage) throws Create Scene
Exception{ Graph using Group,
Group root = new Group(); Region or WebView
Scene s = new Scene(root,600,400); Create Scene by
primaryStage.setTitle("My First User Interface"); adding Group (root)
s.setFill(Color.ORANGE); to it along with its
primaryStage.setScene(s); width and height
primaryStage.show(); Set the scene to the stage object
} (primaryStage) which is passed as
an argument to start() using
public static void main(String[] args) { setScene() method
launch(args);
}
}
Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 17
Lifecycle of JavaFX Application
 The JavaFX Application class has three life cycle methods.
init() − An empty method which can be overridden, stage or scene
cannot be created in this method.
start() − The entry point method where the JavaFX graphics code is to
be written.
stop() − An empty method which can be overridden, here the logic to
stop the application is written.
 It also provides a static method named launch() to launch JavaFX
application. This method is called from static content only mainly in main
method.
 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.
 start() method is called.
 Prof.
The launcher
Jayesh D. Vagadiya waits for the#3140705
application
(OOP-I) to finish
Unit andbasics
07 – JavaFX calls the stop() method. 18
2D Shape
 2D shape is a geometrical figure that can be drawn on the XY plane like
Line, Rectangle, Circle, etc.
 Using the JavaFX library, you can draw −
 Predefined shapes – Line, Rectangle, Circle, Ellipse, Polygon, Polyline, Cubic Curve,
Quad Curve, Arc.
 2D shape by parsing SVG path.
 Each of the above mentioned 2D shape is represented by a class which
belongs to the package javafx.scene.shape. The class named Shape is
the base class of all the 2-Dimensional shapes in JavaFX.

Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 19

Classes for Shape (javafx.scene.shape)
Shape Class Example
Line Line Line line = new Line();
line.setStartX(100.0);
line.setStartY(150.0);
line.setEndX(500.0);
line.setEndY(150.0);
Rectangle & Rectangle Rectangle rectangle = new Rectangle();
Rounded
rectangle.setX(150.0f);
Rectangle rectangle.setY(75.0f);
rectangle.setWidth(300.0f);
rectangle.setHeight(150.0f);
rectangle.setArcWidth(30.0);
rectangle.setArcHeight(20.0);
Circle Circle Circle circle = new Circle();
circle.setCenterX(300.0f);
circle.setCenterY(135.0f);
circle.setRadius(100.0f);

Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 20

Classes for Shape (javafx.scene.shape) (Cont.)
Shape Class Example
Ellipse Ellipse Ellipse ellipse = new Ellipse();
ellipse.setCenterX(300.0f);
ellipse.setCenterY(150.0f);
ellipse.setRadiusX(150.0f);
ellipse.setRadiusY(75.0f);
Polygon Polygon Polygon polygon = new Polygon();
polygon.getPoints().addAll(new
Double[]{
300.0, 50.0,
450.0, 150.0,
300.0, 250.0,
150.0, 150.0,
});

Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 21

Classes for Shape (javafx.scene.shape) (Cont.)
Shape Class Example
Polyline Polyline Polyline polyline = new Polyline();
polyline.getPoints().addAll(new Double[]{

200.0, 50.0,
400.0, 50.0,
450.0, 150.0,
400.0, 250.0,
200.0, 250.0,
150.0, 150.0,
});
Cubic Curve CubicCurve CubicCurve cubicCurve = new CubicCurve();
cubicCurve.setStartX(100.0f);
cubicCurve.setStartY(150.0f);
cubicCurve.setControlX1(400.0f);
cubicCurve.setControlY1(40.0f);
cubicCurve.setControlX2(175.0f);
cubicCurve.setControlY2(250.0f);
cubicCurve.setEndX(500.0f);
cubicCurve.setEndY(150.0f);
Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 22
Classes for Shape (javafx.scene.shape) (Cont.)
Shape Class Description
Quad Curve QuadCurve QuadCurve quadCurve = new QuadCurve();
quadCurve.setStartX(100.0);
quadCurve.setStartY(220.0f);
quadCurve.setEndX(500.0f);
quadCurve.setEndY(220.0f);
quadCurve.setControlX(250.0f);
quadCurve.setControlY(0.0f);
Arc Arc Arc arc = new Arc();
arc.setCenterX(100.0);
arc.setCenterY(100.0);
arc.setRadiusX(100.0);
arc.setRadiusY(100.0);
arc.setStartAngle(0.0);
arc.setLength(100.0);

Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 23

Example (Adding 2-D Shapes)
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.shape.Ellipse;
import javafx.stage.Stage;

public class MyFirstGUI extends Application {

public void start(Stage primaryState) throws Exception { Create object of
Ellipse ellipse = new Ellipse(); Ellipse class and
ellipse.setCenterX(300.0f); ellipse.setCenterY(150.0f); set its properties.
ellipse.setRadiusX(150.0f); ellipse.setRadiusY(75.0f);
Pass object of
Group root = new Group(ellipse); ellipse as argument
Scene s = new Scene(root, 600, 400); to Group contructor
primaryState.setScene(s);
primaryState.show();
}
public static void main(String[] args) {
launch(args);
}
}
Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 24
JavaFX - Colors
 javafx.scene.paint package provides various classes to apply colors to
an application. This package contains an abstract class named Paint and
it is the base class of all the classes that are used to apply colors.
 Using these classes, you can apply colors in the following patterns
 Uniform − color is applied uniformly throughout node.
 Image Pattern − fills the region of the node with an image pattern.
 Gradient − the color applied to the node varies from one point to the other. It has
two kinds of gradients namely Linear Gradient and Radial Gradient.
 Instance of Color class can be created by providing Red, Green, Blue and
Opacity value ranging from 0 to 1 in double.
Color color = new Color(double red, double green, double blue, double
opacity);
Color color = new Color(0.0,0.3,0.2,1.0);
 Instance of Color class can be created using following methods also
Color c = Color.rgb(0,0,255); //passing RGB values
Color c = Color.hsb(270,1.0,1.0); //passing HSB values
Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 25
Applying Color to the Nodes
 setFill(Color) method is used to apply color to nodes such as Shape,
Text, etc.
 setStroke(Color) method is used to apply strokes to the nodes.

//Setting color to the text

Color color = new Color.BEIGE
text.setFill(color);

//Setting color to the stroke

Color color = new Color.DARKSLATEBLUE
circle.setStroke(color);

Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 26

 Color Example
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.scene.shape.Circle;

public class MyFirstGUI extends Application {

public void start(Stage stage) {
Circle circle = new Circle(); circle.setCenterX(300.0f);
circle.setCenterY(180.0f);
circle.setRadius(90.0f);
circle.setFill(Color.RED); circle.setStrokeWidth(3);
circle.setStroke(Color.GREEN);
Group root = new Group(circle);
Scene scene = new Scene(root, 600, 300);
stage.setScene(scene);
stage.show();
}
public static void main(String args[]) {
launch(args);
} Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 27
JavaFX – Image
 You can load and modify images using the classes provided by JavaFX in
the package javafx.scene.image.
 JavaFX supports the image formats like Bmp, Gif, Jpeg, Png.
 Class Image of javafx.scene.image package is used to load an image
 Any of the following argument is required to the constructor of the class
 An InputStream object of the image to be loaded or
FileInputStream inputstream = new FileInputStream ("C:\\image.jpg");
Image image = new Image(inputstream);
 A string variable holding the URL for the image.
Image image = new Image("http://sample.com/res/flower.png");
 After loading image in Image object, view is set to load the image using
ImageView class
ImageView imageView = new ImageView(image);

Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 28

Color Example (Image)
import java.io.FileInputStream; import javafx.application.Application;
import javafx.scene.Group; import javafx.scene.Scene; import
javafx.scene.image.Image;
import javafx.scene.image.ImageView; import javafx.stage.Stage;

public class ImageExample extends Application {

public void start(Stage stage) throws Exception {
Image image = new Image(new FileInputStream("D://CEJDV.jpg"));
ImageView imageView = new ImageView(image);
imageView.setX(50);
imageView.setY(25);
imageView.setFitHeight(455);
imageView.setFitWidth(500);
imageView.setPreserveRatio(true);
Group root = new Group(imageView);
Scene scene = new Scene(root, 600, 500);
stage.setScene(scene);
stage.show();
}
public static void main(String args[]) { launch(args); }
}
Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 29
Layout Panes
 After constructing all the required nodes in a scene, we will generally
arrange them in order.
 This arrangement of the components within the container is called the
Layout of the container.
 JavaFX provides several predefined layouts such as HBox, VBox, Border
Pane, Stack Pane, Text Flow, Anchor Pane, Title Pane, Grid Pane, Flow
Panel, etc.
 Each of the above mentioned layout is represented by a class and all
these classes belongs to the package javafx.layout. The class named
Pane is the base class of all the layouts in JavaFX.

Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 30

Layout Panes (javafx.scene.layout)
Sr. Shape & Description
1 HBox
• The HBox layout arranges all the nodes in our application in a single
horizontal row.
• The class named HBox of the package javafx.scene.layout represents the text
2 VBox
horizontal box layout.
• The VBox layout arranges all the nodes in our application in a single vertical
column.
3 The class named VBox of the package javafx.scene.layout represents the text
•BorderPane
• Vertical box layout.
The Border Pane layout arranges the nodes in our application in top, left,
right, bottom and center positions.
• The class named BorderPane of the package javafx.scene.layout represents
the border pane layout.

Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 31

Layout Panes (javafx.scene.layout) (Cont.)
Sr. Shape & Description
4 StackPane
• The stack pane layout arranges the nodes in our application on top of another
just like in a stack. The node added first is placed at the bottom of the stack
and the next node is placed on top of it.
• The class named StackPane of the package javafx.scene.layout represents
5 TextFlow
the stack pane layout.
• The Text Flow layout arranges multiple text nodes in a single flow.
• The class named TextFlow of the package javafx.scene.layout represents the
6 text flow layout.
AnchorPane
• The Anchor pane layout anchors the nodes in our application at a particular
distance from the pane.
• The class named AnchorPane of the package javafx.scene.layout represents
the Anchor Pane layout.

Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 32

Layout Panes (javafx.scene.layout) (Cont.)
Sr. Shape & Description
7 TilePane
• The Tile Pane layout adds all the nodes of application in the form of uniformly
sized tiles.
• The class named TilePane of the package javafx.scene.layout represents the
8 GridPane
TilePane layout.
• The Grid Pane layout arranges the nodes in our application as a grid of rows
and columns. This layout comes handy while creating forms.
• The class named GridPane of the package javafx.scene.layout represents the
GridPane layout.
9 FlowPane
• The flow pane layout wraps all the nodes in a flow. A horizontal flow pane
wraps the elements of the pane at its height, while a vertical flow pane wraps
the elements at its width.
• The class named FlowPane of the package javafx.scene.layout represents the
Flow Pane layout.

Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 33

Creating a Layout
 To create a layout, you public void start(Stage stage) {
need to − TextField textField = new TextField();
 Create nodes. Button playButton = new Button("Play");
Button stopButton = new Button("stop");
 Instantiate the respective HBox hbox = new HBox();
class of the required hbox.setSpacing(10);
layout. hbox.setMargin(textField, new Insets(20, 20, 20,
 Set the properties of the 20));
layout. hbox.setMargin(playButton, new Insets(20, 20, 20,
 Add all the created nodes 20));
to the layout. hbox.setMargin(stopButton, new Insets(20, 20, 20,
20));
ObservableList<Node> list = hbox.getChildren();
list.addAll(textField, playButton, stopButton);
Scene scene = new Scene(hbox);
stage.setScene(scene);
stage.show();
}

Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 34

JavaFX - Events
 In GUI applications, web applications and graphical 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.
 JavaFX provides support to handle a wide varieties of events. The class
named Event of the package javafx.event is the base class for an event.
 JavaFX provides a wide variety of events. Some of them are as follows:
1. Mouse Event − occurs when a mouse is clicked.
o Class – MouseEvent
o Actions - mouse clicked, mouse pressed, mouse released, mouse moved, mouse entered
target, mouse exited target, etc.
2. Key Event − indicates the key stroke occurred on a node.
o Class – KeyEvent
o Actions - key pressed, key released and key typed.
3. Drag Event − occurs when the mouse is dragged.
o Class - DragEvent.
o Actions - drag entered, drag dropped, drag entered target, drag exited target, drag over,
etc.
Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 35
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.
 Type − Type of the occurred event; in case of mouse event – mouse pressed, mouse
released are the type of events.
 Phases of Event Handling
 Target selection
 Route Construction
 Event Capturing Phase
 Event Bubbling Phase
Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 36
Event Handling Phases
 Target selection
 When an action occurs, the system determines which node is the target based on
internal rules:
 Key events - the target is the node that has focus.
 Mouse events - the target is the node at the location of the cursor.
 Gesture events - the target is the node at the center point of all touches at the
beginning of the gesture.
 Swipe events - the target is the node at the center of the entire path of all of the
fingers.
 Touch events - the target for each touch point is the node at the location first
pressed.
 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
Prof. the event.
Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 37
Event Handling Phases (Cont.)
 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.

Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 38

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.
 During the event capturing phase, a filter is executed and during the
event bubbling phase, a handler is executed.
 All the handlers and filters implement the interface EventHandler of the
package javafx.event.

Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 39

 Handling Mouse Event
public class JavafxSample extends EventHandler<MouseEvent> mouseHandler =
Application { new EventHandler<MouseEvent>(){
public static void main(String[] args) @Override
{ public void handle(MouseEvent
launch(args); mouseEvent){
} System.out.println(
public void start(Stage primaryStage) { mouseEvent.getEventType() + "\n" +
"X : Y - "
Group root = new Group(); + mouseEvent.getX() + " : " +
Scene scene = mouseEvent.getY() + "\n" +
new Scene(root, 300, 250); "SceneX : SceneY - "
+ mouseEvent.getSceneX()+" :
scene.setOnMouseClicked(mouseHandler); "+mouseEvent.getSceneY() +
"\n" + "ScreenX : ScreenY - "
scene.setOnMouseDragged(mouseHandler); + mouseEvent.getScreenX()+" :
"+mouseEvent.getScreenY());
scene.setOnMouseEntered(mouseHandler); }
};
scene.setOnMouseExited(mouseHandler); }
scene.setOnMouseMoved(mouseHandler);

scene.setOnMousePressed(mouseHandler);
Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 40
Creating a Calculator using JavaFX

Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 41

Animation
 JavaFX provides easy to use animation API (javafx.animation package).
 There are some predefined animation that can be used out of the box or
you can implement custom animations using KeyFrames.
 Following are the main predefined animations in JavaFX.
 TranslateTransition: Translate transition allows to create movement animation
from one point to another within a duration. Using TranslateTransition#setByX /
TranslateTransition#setByY, you can set how much it should move in x and y axis
respectively. It also possible to set precise destination by using
TranslateTransition#setToX / TranslateTransition#setToY.
 ScaleTransition: Scale transition is another JavaFX animation which can be used
out of the box that allows to animate the scale / zoom of the given object. The object
can be enlarged or minimized using this animation.
 RotateTransition: Rotate transition provides animation for rotating an object. We
can provide upto what angle the node should rotate by toAngle. Using byAngle we
can specify how much it should rotate from current angle of rotation.
 FadeTransition: Fade transition creates a fade in / fade out effect by controlling
opacity of the object. We can make fade in transition or fade out transition in JavaFX
by setting the to and from value.
 Prof.
PathTransition:
Jayesh D. Vagadiya Path transition provides
#3140705 (OOP-I)  Unit option
07 – JavaFX to move object through a specified
basics 42
Example Animation
@Override
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
Rectangle rect = new Rectangle(200,400);
rect.setX(400);
rect.setY(150);

Group root = new Group(rect);

Scene s = new Scene(root, 1000,700);

Duration dt = new Duration(2500);

RotateTransition rt = new RotateTransition(dt,rect);
rt.setByAngle(180);
rt.play();

primaryStage.setScene(s);
primaryStage.show();

Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 43

Exercise
 Creating a Calculator using JavaFX
 Write a program that displays a tic-tac-toe board. A cell may be X, O, or
empty. What to display at each cell is randomly decided. The X and O are
images in the files X.gif and O.gif.
 Write a program that displays the color of a circle as red when the mouse
button is pressed and as white when the mouse button is released.

Prof. Jayesh D. Vagadiya #3140705 (OOP-I)  Unit 07 – JavaFX basics 44