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 java.applet.Applet;
import java.awt.Button;
/*
<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
button1.setLabel("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 javafx.application.Application class defines the
essential framework for programs

9
 First JavaFX Program
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;
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
primaryStage.setTitle("MyJavaFX"); // Set the stage title
primaryStage.setScene(scene); // Place the scene in the stage
primaryStage.show(); // 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)
{
Application.launch(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 javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;
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);
primaryStage.setTitle("MyJavaFX"); // Set the stage title
primaryStage.setScene(scene); // Put 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
// 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)
{
Application.launch(args);
} 12
}
JavaFX Program with two
Stages Output

13
Panes, UI Controls, and Shapes

14
Panes, UI Controls, and Shapes
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;
import javafx.scene.layout.StackPane;

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
pane.getChildren().add(new Button("OK"));
// Make a new scene, containing the pane
Scene scene = new Scene(pane, 200, 50);
primaryStage.setTitle("Button in a pane"); // Set the stage title
primaryStage.setScene(scene); // Put scene in the stage
primaryStage.show(); // Display the stage
}

public static void main(String[] args) {

// TODO code application logic here
ButtonInPane.launch(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 javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
public class ShowCircle extends Application
{
public void start(Stage primaryStage) {
// Create a circle and set its properties
Circle circle = new Circle();
circle.setCenterX(100);
circle.setCenterY(100);
circle.setRadius(100);
circle.setStroke(Color.BLACK);
circle.setFill(Color.ROYALBLUE);
// Create a pane to hold the circle
Pane pane = new Pane();
pane.getChildren().add(circle);
// Create a 200-x-200 scene from the pane & place scene in stage
Scene scene = new Scene(pane, 200, 200);
primaryStage.setTitle("ShowCircle"); // Set the stage title
primaryStage.setScene(scene); // Place the scene in the stage
primaryStage.show(); // Display the stage
}
public static void main(String[] args) {
ShowCircle.launch(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 javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
public class ShowCircle extends Application
{
public void start(Stage primaryStage) {
// Create a circle and set its properties
Circle circle = new Circle();
circle.centerXProperty().bind(pane.widthProperty().divide(2));
circle.centerYProperty().bind(pane.heightProperty().divide(2));
circle.setRadius(100);
circle.setStroke(Color.BLACK);
circle.setFill(Color.ROYALBLUE);
// Create a pane to hold the circle
Pane pane = new Pane();
pane.getChildren().add(circle);
// Create a 200-x-200 scene from the pane & place scene in stage
Scene scene = new Scene(pane, 200, 200);
primaryStage.setTitle("ShowCircle"); // Set the stage title
primaryStage.setScene(scene); // Place the scene in the stage
primaryStage.show(); // Display the stage
}
public static void main(String[] args) {
ShowCircle.launch(args);
} 20
}
Show Circle Center at (100,100)
with Binding Property
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
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();
circle.centerXProperty().bind(pane.widthProperty().divide(2));
circle.centerYProperty().bind(pane.heightProperty().divide(2));
circle.setRadius(50);
circle.setStroke(Color.BLACK);
circle.setFill(Color.RED);
pane.getChildren().add(circle); // Add circle to the pane
// Create a scene and place it in the stage
Scene scene = new Scene(pane, 200, 200);
primaryStage.setTitle("ShowCircleCentered"); // Set the stage title
primaryStage.setScene(scene); // Place the scene in the stage
primaryStage.show(); // Display the stage
}
public static void main(String[] args) {
// TODO code application logic here
ShowCircleCentered.launch(args);
}
} 21
 Node Properties and Methods
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;
import javafx.scene.layout.StackPane;
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");
btOK.setStyle("-fx-border-color: blue;"); // create blue-bordered button
pane.getChildren().add(btOK);
pane.setRotate(45); // rotate pane and set its style before adding to
scene
pane.setStyle("-fx-border-color: red; -fx-background-color: lightgray;");
Scene scene = new Scene(pane, 200, 250);
primaryStage.setTitle("NodeStyleRotateDemo"); // Set the stage title
primaryStage.setScene(scene); // Place the scene in the
stage
primaryStage.show(); // 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 javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.text.*;
import javafx.scene.control.*;
import javafx.stage.Stage;
 
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();
circle.setRadius(50);
circle.setStroke(Color.BLACK);
circle.setFill(new Color(0.5, 0.5, 0.5, 0.1));
pane.getChildren().add(circle); // Add circle to the pane
 
// Create a label and set its properties
Label label = new Label("JavaFX");
label.setFont(Font.font("Times New Roman",
FontWeight.BOLD, FontPosture.ITALIC, 20));
pane.getChildren().add(label);
 
// Create a scene and place it in the stage
Scene scene = new Scene(pane);
primaryStage.setTitle("FontDemo"); // Set the stage title
primaryStage.setScene(scene); // Place the scene in the stage
primaryStage.show();

public static void main(String[] args) {

// TODO code application logic here
FontAndColorDemo.launch(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