Object-Oriented Programming

(OOP)

JAVA Graphical User Interface

(GUI)
26th August, 2019

Dr. Ramesh Kumar

Assistant Professor
Electronic Engineering Department, DUET
Karachi
GUI Programming
• Three sets of Java APIs for graphics programming
— AWT (Abstract Windowing Toolkit)
— Swing
— JavaFX
• AWT API (Windows) was introduced in JDK 1.0
• Most of the AWT components have become obsolete
• AWT is replaced by newer Swing components
• Swing API, a much more comprehensive set of graphics
libraries that enhances the AWT
• Swing is also essentially dead & receive no upgradation
• JavaFX is new platform for designing GUI in JAVA

2
JavaFX
• JavaFX is a platform for creating and delivering
—Desktop applications
—Rich internet applications (RIAs) that can run across
a wide variety of devices. 
• JavaFX applications can run seamlessly as a stand-
alone application or from a browser
• This provides a multi-touch support for touch-
enabled devices such as tablets & smart phones
• JavaFX has a built-in 2D, 3D, animation support,
video, and audio playback

3
JavaFX VS Swing and AWT
• Swing and AWT are replaced by JavaFX platform for
developing rich Internet applications
• When Java was introduced, the GUI classes were
bundled in a AWT library
• AWT is fine for developing simple GUI interfaces, but
not for developing comprehensive GUI projects
• The AWT user-interface components were replaced by a
more robust, versatile, & flexible library Swing
• Swing is designed for developing desktop GUI
applications
• Swing components are painted directly on canvases
using Java code
4
AWT GUI Example
// Create AWT Button Example
// This java example shows how to create a Button using AWT Button class.
import [Link];
import [Link];
/*
<applet code="CreateAWTButtonExample" width=200 height=200>
</applet>
*/

public class CreateAWTButtonExample extends Applet{

public void init(){
// To create a button use Button() constructor.
Button button1 = new Button();
// Set button caption or label using
[Link]("My Button 1");

Button button2 = new Button("My Button 2");

//add buttons using add method

add(button1);
add(button2);
}
}

5
Programming GUI with AWT
• Java Graphics APIs - AWT and Swing - provide a
huge set of reusable GUI components, such as:
—Button
—Text field label
—Choice
—Panel
—Frame

6
Containers and Components
• There are two types of GUI elements
—Component: Components are elementary GUI entities
(such as Button, Label, and TextField)
— Container: Containers (such as Frame, Panel & Applet)
are used to hold components in a specific layout (such
as flow or grid)
—A container can also hold sub-containers.
• GUI components are also called Microsoft ActiveX
Control and widgets 

7
Basic Structure of JavaFX

8
Basic Structure of JavaFX
• JavaFX programs are based on the analogy of a stage
(theater stage)
• On the stage are scenes, and each scene is also made up
of other components
• On a theater stage, the stage may be divided into portions,
where individual scenes take place
• Each scene’s set will have actors, props, backdrops,
lighting, etc.
• In JavaFX, we create the components, add them to scenes,
and then add scenes to the stage
• The abstract [Link] class defines the
essential framework for programs

9
 First JavaFX Program
import [Link];
import [Link];
import [Link];
import [Link];
public class MyJavaFX extends Application
{
@Override // Override the start method in the Application class
public void start(Stage primaryStage)
{
// Create a scene and place a button in the scene

Button btOK = new Button("OK"); // create a button

Scene scene = new Scene(btOK, 200, 250); // create a scene WITH the button
[Link]("MyJavaFX"); // Set the stage title
[Link](scene); // Place the scene in the stage
[Link](); // Display the stage
}
/**
* The main method is only needed for the IDE with limited
* JavaFX support. Not needed for running from the command line.
*/
public static void main(String[] args)
{
[Link](args);
}
} 10
First JavaFX Program Output
• This program will open a window, whose title bar will
display “MyJavaFX”, and which will have a (huge)
button in the middle labeled “OK”

11
JavaFX Program with two Stages
import [Link];
import [Link];
import [Link];
import [Link];
public class MultipleStageDemo extends Application
{
@Override // Override the start method in the Application class
public void start(Stage primaryStage)
{
// Create a scene and place a button in the scene
Scene scene = new Scene(new Button("OK"), 200, 250);
[Link]("MyJavaFX"); // Set the stage title
[Link](scene); // Put the scene in the stage
[Link](); // Display the stage

Stage stage = new Stage(); // Create a new stage

[Link]("Second Stage"); // Set the stage title
// Set a scene with a button in the stage
[Link](new Scene(new Button("New Stage"), 100, 100));
[Link](); // Display the stage
}
}
public static void main(String[] args)
{
[Link](args);
} 12
}
JavaFX Program with two
Stages Output

13
Panes, UI Controls, and Shapes

14
Panes, UI Controls, and Shapes
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];

public class ButtonInPane extends Application {

public void start(Stage primaryStage) {
StackPane pane = new StackPane(); // Make a pane to work with
// create a new button, and add it to the pane’s list of children
[Link]().add(new Button("OK"));
// Make a new scene, containing the pane
Scene scene = new Scene(pane, 200, 50);
[Link]("Button in a pane"); // Set the stage title
[Link](scene); // Put scene in the stage
[Link](); // Display the stage
}

public static void main(String[] args) {

// TODO code application logic here
[Link](args);
}
}
15
 Display a Shape

x
Y Axis
(0, 0) X Axis

y
(x, y)
(0, 0) X Axis
Java Conventional
Coordinate Coordinate
Y Axis System System

16
Show a Circle Center at (100,100)
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class ShowCircle extends Application
{
public void start(Stage primaryStage) {
// Create a circle and set its properties
Circle circle = new Circle();
[Link](100);
[Link](100);
[Link](100);
[Link]([Link]);
[Link]([Link]);
// Create a pane to hold the circle
Pane pane = new Pane();
[Link]().add(circle);
// Create a 200-x-200 scene from the pane & place scene in stage
Scene scene = new Scene(pane, 200, 200);
[Link]("ShowCircle"); // Set the stage title
[Link](scene); // Place the scene in the stage
[Link](); // Display the stage
}
public static void main(String[] args) {
[Link](args);
} 17
}
Show a Circle Center at (100,100)

18
Property Binding
• In last example, the (x, y) location of the center of the
circle was static
• What if we want it to be centered in the pane, such that if
we re-size the window, the circle will move to stay
centered?
• In order to do so, the circle’s center has to be bound to the
pane’s height and width
• A change to the height or width will force a change to the
x or y value of the circle’s center
• This is what property binding is all about
• The target object (called the binding object) gets bound to
the source object (the bindable object)

19
Show a Circle Center at (100,100)
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class ShowCircle extends Application
{
public void start(Stage primaryStage) {
// Create a circle and set its properties
Circle circle = new Circle();
[Link]().bind([Link]().divide(2));
[Link]().bind([Link]().divide(2));
[Link](100);
[Link]([Link]);
[Link]([Link]);
// Create a pane to hold the circle
Pane pane = new Pane();
[Link]().add(circle);
// Create a 200-x-200 scene from the pane & place scene in stage
Scene scene = new Scene(pane, 200, 200);
[Link]("ShowCircle"); // Set the stage title
[Link](scene); // Place the scene in the stage
[Link](); // Display the stage
}
public static void main(String[] args) {
[Link](args);
} 20
}
Show Circle Center at (100,100)
with Binding Property
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class ShowCircleCentered extends Application {
@Override // Override the start method in the Application class
public void start(Stage primaryStage) {
// Create a pane to hold the circle
Pane pane = new Pane();
// Create a circle and set its properties
Circle circle = new Circle();
[Link]().bind([Link]().divide(2));
[Link]().bind([Link]().divide(2));
[Link](50);
[Link]([Link]);
[Link]([Link]);
[Link]().add(circle); // Add circle to the pane
// Create a scene and place it in the stage
Scene scene = new Scene(pane, 200, 200);
[Link]("ShowCircleCentered"); // Set the stage title
[Link](scene); // Place the scene in the stage
[Link](); // Display the stage
}
public static void main(String[] args) {
// TODO code application logic here
[Link](args);
}
} 21
 Node Properties and Methods
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class NodeStyleRotateDemo extends Application
{
@Override // Override the start method in the Application class
public void start(Stage primaryStage)
{
// Create a scene and place a button in the scene
StackPane pane = new StackPane();
Button btOK = new Button("OK");
[Link]("-fx-border-color: blue;"); // create blue-bordered button
[Link]().add(btOK);
[Link](45); // rotate pane and set its style before adding to
scene
[Link]("-fx-border-color: red; -fx-background-color: lightgray;");
Scene scene = new Scene(pane, 200, 250);
[Link]("NodeStyleRotateDemo"); // Set the stage title
[Link](scene); // Place the scene in the
stage
[Link](); // Display the stage
}
22
}
Node Properties and Methods

23
Color Class
• We can use named color constants:
— BEIGE, BLACK, BLUE, BROWN, CYAN, DARKGRAY, …
There are about 150 of them

24
Font Class
• A Font describes font name, weight, and size.

25
Font and Color Demo

26
Font and Color Demo
import [Link];
import [Link];
import [Link].*;
import [Link];
import [Link];
import [Link].*;
import [Link].*;
import [Link];
 
public class FontAndColorDemo extends Application {
@Override // Override the start method in the Application class
public void start(Stage primaryStage) {
// Create a pane to hold the circle
Pane pane = new StackPane();
 
// Create a circle and set its properties
Circle circle = new Circle();
[Link](50);
[Link]([Link]);
[Link](new Color(0.5, 0.5, 0.5, 0.1));
[Link]().add(circle); // Add circle to the pane
 
// Create a label and set its properties
Label label = new Label("JavaFX");
[Link]([Link]("Times New Roman",
[Link], [Link], 20));
[Link]().add(label);
 
// Create a scene and place it in the stage
Scene scene = new Scene(pane);
[Link]("FontDemo"); // Set the stage title
[Link](scene); // Place the scene in the stage
[Link]();

public static void main(String[] args) {

// TODO code application logic here
[Link](args);
}
}

27
Image Class View

28
Layout Panes
• JavaFX provides many types of panes for organizing
nodes in a container.

29
Shapes
• JavaFX provides many shape classes for drawing

30