SATA

TECHNOLOGY
& BUSINESS
COLLEGE
Program:
Computer
Science​
Year 4 CS
(Extension)
Java Programming

Instructor:
Addisu M. (Asst. Prof)
1
2
Ch
apt B

GUI using JAVAFX

er
Th
ree
3
Outline
01 Graphical User Interfaces

02 JavaFX vs AWT and Swing

Java Programming
Basic Structure of a JavaFX
03 GUI

04 Display Shapes
4
Graphical User Interfaces (GUIs)
provides user-friendly human interaction
were the initial motivation for object-oriented programming
predefined classes for GUI components, event processing
interfaces
Building GUIs require use of GUI frameworks:
JavaFX

Java Programming
Older Java frameworks:
Abstract Window Toolkit (AWT):
java.awt.*, java.awt.geom.*, java.awt.event.*
SWING:
javax.swing.*, javax.swing.event.*
5
JavaFX vs AWT and Swing
Swing & AWT were older frameworks replaced by JavaFX
platform for developing rich Internet applications in JDK8
When Java was introduced, GUI classes were bundled in a
library known as Abstract Windows Toolkit (AWT)
AWT was prone to platform-specific bugs
AWT was fine for developing simple GUIs, but not for
developing comprehensive GUI projects.

Java Programming
AWT user-interface components were replaced by a more
robust, versatile, & flexible library known as Swing
components
Swing components depended less on the target platform and
used less of the native GUI resource
With release of Java 8, Swing was replaced by a completely
6
JavaFX vs AWT and Swing

Java Programming
7
JavaFX vs AWT and Swing
CHARACTERISTIC AWT SWING JavaFX
DEPENDENCY Platform Dependent Platform Independent Platform Independent
WEIGHT OF
Heavyweight Lightweight Lightweight
COMPONENT
CURRENTLY IN USE Discarded Use It In A Few Places. Currently In Use

Support Pluggable Look Support Pluggable Look

Does Not Support A And Feel. Components And Feel. Components
PLUGGABLE

Java Programming
Pluggable Look And Feel Look The Same On All Look The Same On All
Systems Systems.

MVC Does Not Follow MVC Follow MVC Follow MVC.

NO. OF More Than AWT But
Less More Than AWT
COMPONENTS Less Than SWING.
PACKAGE Java.Awt.Package Javax.Swing Javafx.Util
RELEASED 1995 1997 2008
8
JavaFX
It is a Java library used to build Rich Internet Applications
Rich Internet Applications are those web applications which
provide similar features and experience as that of desktop
applications.
It is a framework to create user interfaces for desktop
(Windows, Mac, Linux) and mobile phones
It is fully integrated with recent versions of Java Runtime

Java Programming
Environment (JRE) & Java Development Kit (JDK)
Applications written using JavaFX library can run
consistently across multiple platforms such as Windows,
Linux, Mac, Android...
on various devices such as Desktop Computers, Mobile
Phones, TVs, Tablets, etc…
9
JavaFX
It has the following main parts:
Prism - high-performance graphics engine for 2D and 3D
graphics
Glass windowing toolkit - a platform-dependent layer that
connects JavaFX to the native OS
It provides native OS services, like managing windows,

Java Programming
events, timers, and surfaces
Media engine - provides tools to create media applications
that enable media playback in the desktop window or
within a web page on supported platforms
Web engine - a web browser engine that supports HTML5,
CSS, JavaScript, DOM, and SVG
10
Basic Structure of JavaFX
1. Extend Application
2. Override start(stage)
3. Create Nodes (e.g., Button)

Java Programming
4. Place the Nodes in Scene
5. Place the Scene on Stage
6. Show Stage
11
Basic Structure of JavaFX

Java Programming
12
Basic Structure of JavaFX
Application
Unlike regular Java programs, JavaFX are not started using main
but instead using a launcher class called Application
To create a new JavaFX application, subclass Application and
override the start method – will be called after the JavaFX runtime
is loaded and before the application starts
use main method to start a JavaFX application by calling launch

Java Programming
method (which is defined in the Application class)
javafx.application.Application – entry point for applns
This class has to extend javafx.application.Application class
which is standard class in Java since Java 8
creates an application thread for running appln start method,
processing input events, and running animation timelines
override the start(Stage) method
13
Basic Structure of JavaFX
Stage
javafx.stage.Stage - top level container of the application
– usually, an OS Window
primary Stage is constructed by the platform
main stage is created as part of the application launch and
it is passed as an argument in the start method.

Java Programming
single JavaFX application can have multiple Stages and
use one or another
Many setter methods: setTitle(), setWidth()
use stage to set appln’s title, icon, size, screen mode etc
14
Basic Structure of JavaFX
Scene
Each stage has a scene (holds controls (buttons, labels, etc))
To display anything on a stage, you need a scene.
A stage can only show one scene at a time, but it is possible to
exchange the scene at runtime
Scene (also called Scene Graph) is the starting point for

Java Programming
constructing a JavaFX application
javafx.scene API allows the creation and specification of
several types of content
javafx.scene.Scene class - container for all content in a scene
graph in the stage
15
Basic Structure of JavaFX
Nodes
A single element in a scene graph is called a Node
Each node has an ID, style class, and bounding volume
Each node in a scene graph has a single parent and zero or
more children (except the root node of a scene graph)
Nodes can also have the following:
Effects, such as blurs and shadows

Java Programming
Event handlers (such as mouse, key and input method)
All components attached to the scene graph are called nodes
All nodes are subclasses of class javafx.scene.Node
There are two types of nodes:
branch node: contain other (child) nodes. Also referred to as
parent nodes because they can contain child nodes
leaf node: a node which cannot contain other nodes
16
Basic Structure of JavaFX
Controls
built by using nodes in the scene graph
Therefore, controls can use the visually rich features of
the JavaFX platform
Here are the following controls
Label Password Field

Java Programming
Button Scroll Bar
Radio Button Scroll Pane
Checkbox Combo Box
Choice Box Hyperlink
Text Field Menu
Toggle Button ….
17
Basic Structure of JavaFX
Layouts
In JavaFX, Layout defines the way in which the components
are to be seen on the stage (position and size)
A “combo” of a Swing JPanel + LayoutManager
All these classes belong to javafx.scene.layout package.
javafx.scene.layout.Pane class is the base class for all the
built-in layout classes

Java Programming
E.g: HBox, VBox, FlowPane,
StackPane, TilePane,
GridPane, AnchorPane,
BorderPane, TextFlow, etc
18
Basic Structure of JavaFX
Layouts
some of the more common layouts:
Pane – base class for layout panes. It contains the
getChildren() method for returning a list of nodes in pane
StackPane - put all the controls in a stack (), in other
words, top of each other in the center of the pane
FlowPane – places nodes row-by-row horizontally or

Java Programming
column-by-column vertically
BorderPane - gives you five areas: top, left, right, bottom,
and center
GridPane - orders controls in a 2D grid (2 row by 2 col)
HBox - orders the controls in a horizontal (thus “H”) line
VBox - orders the controls in a vertical (thus “H”) line
19
Basic Structure of JavaFX
Pane & its Subclasses

Java Programming
20
JavaFX Events
An event represents an occurrence of something of interest to
the application
javafx.event.Event - base class for FX events
- Source → origin of the event
- target → path through which the event will travel when
posted
- type → hierarchy

Java Programming
21
First JavaFX Application
JavaFX Application Class
application needs a primary launch class.
extend javafx.application.Application class
Example: subclass of Application

Java Programming
import javafx.application.Application;
public class Hello_World extends Application{

}
22
First JavaFX Application
Implementing start()
All subclasses of Application class must implement the
abstract start() method of the Application class
start() method is called when JavaFX application is started
It takes a single parameter of type Stage
Stage object is created for you by JavaFX runtime

Java Programming
import javafx.application.Application;
import javafx.stage.Stage;
public class Hello_World extends Application{
@Override
public void start(Stage primaryStage) throws Exception {
primaryStage.setTitle("First JavaFX Application");
primaryStage.show();
}
}
23
First JavaFX Application
Adding a main() Method
You can actually launch JavaFX appln without main() method
But it’s preferred to add a main() method because it makes it
more explicit which code launches the application
It calls static launch() method with command line parameters
launches the JavaFX runtime and your JavaFX application
import javafx.application.Application;
import javafx.stage.Stage;

Java Programming
public class Hello_World extends Application{
@Override
public void start(Stage primaryStage) throws Exception {
primaryStage.setTitle("First JavaFX Application");
primaryStage.show();
}
publicstaticvoid main (String[] args) {
Application.launch(args);
}
}
24
First JavaFX Application
Adding a Scene
The previous JavaFX examples only open a window, but
nothing is displayed inside this window
To display something inside the JavaFX application
window you must add a Scene to the Stage object
This is done inside the start() method

Java Programming
All components to be displayed inside a JavaFX
application must be located inside a scene
Example:
Label label = new Label(“Hello World, JavaFX!");
Scene scene = new Scene(label, 400, 200);
primaryStage.setScene(scene);
25
First JavaFX Application
Adding a Scene
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.stage.Stage;
public class Hello_World extends Application{
@Override
public void start(Stage primaryStage) throws Exception {
primaryStage.setTitle("First JavaFX Application");

Java Programming
Label label = new Label(“Hello World, JavaFX!");
Scene scene = new Scene(label, 400, 200);
primaryStage.setScene(scene);
primaryStage.show();
}
publicstaticvoid main (String[] args) {
Application.launch(args);
}
}
26
First JavaFX Application
Adding a Scene
Three lines have been added
First a Label object is created
Then a Scene object is created,
passing the Label as parameter

Java Programming
along with two parameters
representing the width and
height of the scene

Label label = new Label(“Hello World, JavaFX!");

Scene scene = new Scene(label, 400, 200);
primaryStage.setScene(scene);
27
Example
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Button;
public class MyFirstJavaFX extends Application {
@Override // Override the start method in Application class
public void start(Stage primaryStage) {
// Create a button and place it in the scene
Button btOK = new Button("OK");

Java Programming
Scene scene = new Scene(btOK, 200, 250);
primaryStage.setScene(scene); //Place the scene in stage
primaryStage.setTitle("MyJavaFX"); // Set stage title
primaryStage.show(); // Display the stage
}
public static void main(String[] args) {
launch(args);
}
}
28
Example
// Multiple stages can be added beside the primaryStage
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Button;
public class MultipleStageDemo extends Application {
@Override // Override the start method in the Application class
public void start(Stage primaryStage) {

Java Programming
// Create a scene and place a button in the scene
Scene scene = new Scene(new Button("OK"), 200, 250);
primaryStage.setTitle("MyJavaFX"); // Set the stage title
primaryStage.setScene(scene); // Place the scene in the stage
primaryStage.show(); // Display the stage
Stage stage = new Stage(); // Create a new stage
stage.setTitle("Second Stage"); // Set the stage title
29
Example
// Set a scene with a button in the stage
stage.setScene(new Scene(new Button("New Stage"), 100, 100));

stage.show(); // Display the stage

}
public static void main(String[] args) {
launch(args);
}

Java Programming
}
30
JavaFX Stage
Creating a Stage
create JavaFX Stage object just like any other Java object:
Using the new command and Stage constructor.
Example:
Stage stage = new Stage();
Showing a Stage

Java Programming
Simple creating a JavaFX Stage object will not show it.
In order to make the Stage visible you must call either its
show() or showAndWait() method
Stage stage = new Stage();
stage.show();
31
JavaFX Stage
show() vs. showAndWait() - difference:
show() makes the Stage visible and exits the show() method
immediately, whereas
showAndWait() shows the Stage object and then stays until
the Stage is closed

Java Programming
Set a Scene on a Stage
In order to display anything inside JavaFX Stage, set
JavaFX Scene object on Stage
Content of the Scene will then be displayed inside the Stage
when the Stage is shown
32

THANKS!
Questions, Ambiguities,
Doubts, … ???