Java Programming

Introduction to Graphical User

Interface
Abdella N.
DEBRE BERHAN UNIVERSITY
DEBRE BERHAN
AWT (Abstract Window Toolkit)
An API to develop GUI or window-based application.
Present in all Java implementations
Adequate for many applications
Uses the controls defined by the OS (platform dependent)
Difficult to build an attractive GUI
The java.awt package provides classes for AWT api such as:
TextField, Label, TextArea, RadioButton, CheckBox etc.

November 24, 2024 Files And Streams 2

Swing
Same concepts as AWT
Doesn’t work in early Java implementations (Java 1.1 and earlier)
Many more controls, and they are more flexible
Some controls, but not all, are a lot more complicated
Gives a choice of “look and feel” packages (platform independent)
Much easier to build an attractive GUI
The javax.swing package provides classes for Swing api such as:
JTextField, JLabel, JTextArea, etc.

November 24, 2024 Files And Streams 3

Swing vs. AWT
Swing is bigger, slower, and more complicated
Swing is platform independent but not AWT
Swing supports pluggable look and feel but not AWT
Swing is a lightweight process but AWT is a heavyweight
Swing have more components than AWT
Swing follows MVC but not AWT
Swing is more flexible and better looking
Many of the most common controls are just renamed
• AWT: Button b = new Button ("OK");
Swing: JButton b = new JButton("OK");

November 24, 2024 Files And Streams 4

AWT class Hierarchy
Component

Container Window Frame

Button Panel
List

Checkbox

Choice

Label

TextComponent TextField

TextArea

November 24, 2024 Files And Streams 5

SWING class Hierarchy

November 24, 2024 Files And Streams 6

To build a GUI...
Make somewhere to display things—usually a Frame or Dialog (for
an application), or an Applet
Create some Components, such as buttons, text areas, panels, etc.
Add your Components to your display area
Arrange, or lay out, your Components
Attach Listeners to your Components
Interacting with a Component causes an Event to occur
A Listener gets a message when an interesting event occurs, and executes
some code to deal with it

November 24, 2024 Files And Streams 7

Containers and Components
Purpose of the Container is to hold and display Components
Some common subclasses of Component are Button, Checkbox,
Label, Scrollbar, TextField, and TextArea
A Container is also a Component
This allows Containers to be nested
Some Container subclasses are Panel (and Applet), Window, and
Frame

November 24, 2024 Files And Streams 8

Creating components
Label lab = new Label (“Enter your name");
Button but = new Button (“Logging");
Checkbox toggle = new Checkbox (“Allow");
TextField txt = new TextField ("Initial text.",
20);

November 24, 2024 Files And Streams 9

Creating a Frame
Frame frame = new Frame();
frame.setTitle("My Frame");
frame.setSize(300, 200); // width, height
... add components ...
frame.setVisible(true);

Or:

class MyClass extends Frame {

...
setTitle("My Frame"); // in some instance method

November 24, 2024 Files And Streams 10

Arranging components
Every Container has a layout manager
The default layout for a Panel is FlowLayout
You could set it explicitly with
setLayout (new FlowLayout( ));
You could change it to some other layout manager

November 24, 2024 Files And Streams 11

FlowLayout
Use add(component); to add to a component when using a
FlowLayout
Components are added left-to-right
If no room, a new row is started
Exact layout depends on size of Panel
Components are made as small as possible
FlowLayout is convenient but often ugly

November 24, 2024 Files And Streams 12

Complete example: FlowLayot
import java.awt.*;

public class FlowLayoutExample extends Frame {

public FlowLayoutExample(String title){
super(title);
setLayout (new FlowLayout ()); // default
add (new Button ("One"));
add (new Button ("Two"));
add (new Button ("Three"));
add (new Button ("Four"));
add (new Button ("Five"));
add (new Button ("Six"));
}
} November 24, 2024 Files And Streams 13
BorderLayout
At most five components can be added
If you want more components, add a Panel, then add components to
it.
setLayout (new BorderLayout());

add (new Button("NORTH"), BorderLayout.NORTH);

November 24, 2024 Files And Streams 14

Complete example: BorderLayout
import java.awt.*;

public class FlowLayoutExample extends Frame {

public FlowLayoutExample(String title){
super(title);
setLayout (new BorderLayout());
add(new Button("One"), BorderLayout.NORTH);
add(new Button("Two"), BorderLayout.WEST);
add(new Button("Three"), BorderLayout.CENTER);
add(new Button("Four"), BorderLayout.EAST);
add(new Button("Five"), BorderLayout.SOUTH);
}
} November 24, 2024 Files And Streams 15
Using a Panel
Panel p = new Panel();
add (p, BorderLayout.SOUTH);
p.add (new Button ("Button 1"));
p.add (new Button ("Button 2"));

November 24, 2024 Files And Streams 16

Making components active
Most components already appear to do something--buttons click,
text appears
To associate an action with a component, attach a listener to it
Components send events, listeners listen for events
Different components may send different events, and require
different listeners

November 24, 2024 Files And Streams 17

Listeners
Listeners are interfaces, not classes
class MyButtonListener implements
ActionListener {
An interface is a group of methods that must be supplied
When you say implements, you are promising to supply those
methods

November 24, 2024 Files And Streams 18

Writing a Listener
For a Button, you need an ActionListener

b1.addActionListener
(new MyButtonListener ( ));

An ActionListener must have an actionPerformed(ActionEvent)

method

public void actionPerformed(ActionEvent e) {

…
}

November 24, 2024 Files And Streams 19

MyButtonListener
import java.awt.*;
Import java.event.*;

public class FlowLayoutExample extends Frame {

public FlowLayoutExample(String title){
super(title);
Button b1 = new Button(“Show");
b1.addActionListener (new MyButtonListener ());
add(b1);
}
}

class MyButtonListener implements ActionListener {

public void actionPerformed (ActionEvent e) {
…
}
}
November 24, 2024 Files And Streams 20
Introduction to JavaFX
• JavaFX is a Java library used to develop Desktop
applications as well as Rich Internet Applications (RIA).
• The applications built in JavaFX, can run on multiple
platforms including Web, Mobile and Desktops.
• JavaFX is intended to replace swing in Java applications
as a GUI framework.
• However, It provides more functionalities than swing.
• Like Swing, JavaFX also provides its own components
and doesn't depend upon the operating system.
• It is lightweight and hardware accelerated
November 24, 2024 Files And Streams 21
JAVAFX for GUI - Public JavaFX API

• Javafx.stage • javafx.scene – scene graph API

• Javafx.util • javafx.scene.control
• Javafx.application • javafx.scene.input
• javafx.collections • javafx.scene.layout
• javafx.concurrent • javafx.scene.paint
• javafx.event • javafx.scene.media
• javafx.geometry • javafx.scene.text
• javafx.animation
• javafx.scene.web
• javafx.embed.swing
• javafx.scene.shape
• ………….
• …………..
November 24, 2024 Files And Streams 22
JAVAFX for GUI - architecture
• Scene graph - It is the starting point of constructing a JavaFX application.
• Graphics Engine - provides the graphics support to the scene graph.
• Prism can be seen as High Performance hardware-accelerated graphics
pipeline.
• Quantum Tool Kit is used to bind prism and glass windowing tool kit
together and makes them available for the above layers in stack.
• Glass Windowing tool kit - It is present on the lowest level of JavaFX
graphics stack. It basically can be seen as a platform dependent layer which
works as an interface between JavaFX platform and native operating system.
• Web View - embed the HTML content to a JavaFX scene graph.
• Media engine - the JavaFX application can support the playback of audio
and video media files.
November 24, 2024 Files And Streams 23
JAVAFX for GUI
JavaFX architecture

November 24, 2024 Files And Streams 24

JAVAFX for GUI
• JavaFX program structure
• JavaFX application is divided hierarchically into three main components
known as Stage, Scene and nodes.
• import javafx.application.Application class in every JavaFX application.
• This provides the following life cycle methods for JavaFX
application.
• public void init()
• public abstract void start(Stage primaryStage)
• public void stop()
• In order to create a basic JavaFX application, we need to:
• Import javafx.application.Application into our code.
• Inherit Application into our class.
• Override start() method of Application
November 24, 2024
class.
Files And Streams 25
JAVAFX for GUI
• JavaFX program structure…
• Stage in a JavaFX application is similar to the Frame in a Swing
Application.
• Scene actually holds all the physical contents (nodes) of a JavaFX
application. Javafx.scene.Scene class provides all the methods to deal
with a scene object.
• Scene Graph exists at the lowest level of the hierarchy.
• It can be seen as the collection of various nodes.
• A node is the element which is visualized on the stage.
• It can be any button, text box, layout, image, radio
button, check box, etc.

November 24, 2024 Files And Streams 26

JAVAFX for GUI
• JavaFX apprlication
• Step 1: Extend javafx.application.Application and override start()
package application;
import javafx.application.Application;
import javafx.stage.Stage;
public class Hello_World extends Application{

@Override
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub

}
November 24, 2024 Files And Streams 27
JAVAFX for GUI
• JavaFX apprlication
• Step 2: Create a Button
• package application;
• import javafx.application.Application;
• importjavafx.scene.control.Button;
• import javafx.stage.Stage;
• public class Hello_World extends Application{
•
• @Override
• public void start(Stage primaryStage) throws Exception {
• // TODO Auto-generated method stub
• Buttonbtn1=newButton("Say, Hello World");
•
• }
•
• } 24, 2024
November Files And Streams 28
JAVAFX for GUI
• JavaFX apprlication
• Step 3: Create a layout and add button to it
package application;
import javafx.application.Application;
import javafx.scene.control.Button;
import javafx.stage.Stage;
import javafx.scene.layout.StackPane;
public class Hello_World extends Application{
@Override
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
Button btn1=new Button("Say, Hello World");
StackPane root=new StackPane();
root.getChildren().add(btn1);
}
}

November 24, 2024 Files And Streams 29

JAVAFX for GUI
• JavaFX apprlication
• Step 4: Create a scene
package application;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;
import javafx.scene.layout.StackPane;
public class Hello_World extends Application{
@Override
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
Button btn1=new Button("Say, Hello World");
StackPane root=new StackPane();
root.getChildren().add(btn1);
Scene scene=new Scene(root);
}
}
November 24, 2024 Files And Streams 30
JAVAFX for GUI
• JavaFX apprlication
• Step 4: Create a Stage
package application;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;
import javafx.scene.layout.StackPane;
public class Hello_World extends Application{
@Override
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
Button btn1=new Button("Say, Hello World");
StackPane root=new StackPane();
root.getChildren().add(btn1);
Scene scene=new Scene(root);
primaryStage.setScene(scene);
primaryStage.setTitle("First JavaFX Application");
primaryStage.show();
}
}
November 24, 2024 Files And Streams 31
JAVAFX for GUI
• JavaFX apprlication
• Step 5: Create a Main method
package application;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;
import javafx.scene.layout.StackPane;
public class Hello_World extends Application{
@Override
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
Button btn1=new Button("Say, Hello World");
StackPane root=new StackPane();
root.getChildren().add(btn1);
Scene scene=new Scene(root);
primaryStage.setScene(scene);
primaryStage.setTitle("First JavaFX Application");
primaryStage.show();
}
public static void main (String[] args)
{
launch(args);
}
}
November 24, 2024 Files And Streams 32
JAVAFX for GUI
• JavaFX UI controls
• The package javafx.scene.control provides all the necessary classes for the UI
components like Button, Label, Menu, ScrolBar, Hyperlink, ProgressBar, TextField,
Password, etc.
• Example
• Label my_label=new Label("This is an example of Label");
• Button btn = new Button("My Button");
• RadioButton button1 = new RadioButton("option 1");

November 24, 2024 Files And Streams 33

JAVAFX for GUI
• JavaFX UI Layouts
• Layouts are the top level container classes that define the UI styles for scene graph objects.
• built-in layout panes in JavaFX that are HBox, VBox, StackPane, FlowBox, AnchorPane, etc.
• Are belong to javafx.scene.layout package. javafx.scene.layout.Pane class is the base class for all
the built-in layout classes in JavaFX.

BorderPane Organizes nodes in top, left, right, centre and the bottom of the screen.

FlowPane Organizes the nodes in the horizontal rows according to the available
horizontal spaces. Wraps the nodes to the next line if the horizontal
space is less than the total width of the nodes

GridPane Organizes the nodes in the form of rows and columns.

HBox Organizes the nodes in a single row.

Pane It is the base class for all the layout classes.

StackPane Organizes nodes in the form of a stack i.e. one onto another

VBox
November 24, 2024
Organizes nodes in a vertical column.
Files And Streams 34
JAVAFX for GUI
• JavaFX UI Layouts
• Steps to create layout
• Instantiate the respective layout class, for example, HBox root = new HBox();
• Setting the properties for the layout, for example, root.setSpacing(20);
• Adding nodes to the layout object, for
example, root.getChildren().addAll(<NodeObjects>);
• JavaFX Event Handlers
• Foreground events are mainly occurred due to the direct interaction of the user
with the GUI of the application. Such as clicking the button, pressing a key,
selecting an item from the list, scrolling the page, etc.
• Background events doesn't require the user's interaction with the application.
These events are mainly occurred to the operating system interrupts, failure,
operation completion, etc.
November 24, 2024 Files And Streams 35
JAVAFX for GUI
• JavaFX UI Layouts
• Steps to create layout
• Instantiate the respective layout class, for example, HBox root = new HBox();
• Setting the properties for the layout, for example, root.setSpacing(20);
• Adding nodes to the layout object, for
example, root.getChildren().addAll(<NodeObjects>);
• JavaFX Event Handlers
• Foreground events are mainly occurred due to the direct interaction of the user
with the GUI of the application. Such as clicking the button, pressing a key,
selecting an item from the list, scrolling the page, etc.
• Background events doesn't require the user's interaction with the application.
These events are mainly occurred to the operating system interrupts, failure,
operation completion, etc.
November 24, 2024 Files And Streams 36
JAVAFX for GUI
• JavaFX Event Handlers
• JavaFX provides the class javafx.event.Event
• example MouseEvent, KeyEvent, ScrollEvent, DragEvent, etc.
• Setter method example
• setOnDragDetected(EventHandler value )
• setOnDragDone(EventHandler value )
• setOnInputMethodTextChanged(EventHandler value )
• setOnKeyPressed(EventHandler value )
• setOnKeyReleased(EventHandler value )
• setOnMouseClicked(EventHandler value )
• ……

November 24, 2024 Files And Streams 37

JAVAFX for GUI

Thank You
November 24, 2024 Files And Streams 38