Object-Oriented Programming

(OOP)

JAVA Graphical User Interface

(GUI)
11th September, 2018

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 should be replaced by newer Swing
components
• Swing API, a much more comprehensive set of
graphics libraries that enhances the AWT
• 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
• Application
• Start (Stage) Method
• Stage, Scene, and Node

Stage
Scene

Button

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

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
J ava 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