Software Design and Analysis

CS-3004
Lecture#10

Dr. Javaria Imtiaz,

Mr. Basharat Hussain,
Mr. Majid Hussain
 What is GUI in Java?
• GUI (Graphical User Interface) in Java is an easy-to-use visual experience builder for Java
applications.

• It is mainly made of graphical components like buttons, labels, windows, etc. through which
the user can interact with an application.

• GUI plays an important role to build easy interfaces for Java applications.

2
Graphical User Interface

3
 JavaFX
• JavaFX is the latest graphical user interface framework. It is a
platform for making a really amazing looking GUI application.

• JavaFX is a Java library used to build Rich Internet

Applications.

• The applications written using this library can run consistently

across multiple platforms.

• The applications developed using JavaFX can run on various

devices such as Desktop Computers, Mobile Phones, TVs,
Tablets, etc..
4
 GUI Programming
• To develop GUI Applications using Java programming language, the
programmers rely on libraries such as Advanced Windowing Tool
kit and Swing.

• After the advent of JavaFX, these Java programmers can now develop GUI
applications effectively with rich content.

5
JavaFX vs Swing vs AWT

6
 Steps to create a JavaFX Program
1. Extend Application
2. Override start (Stage)
3. Create Nodes (e.g., Button)
4. Place the Nodes in the Scene
5. Place the Scene on Stage
6. Show Stage

7
 Panes, UI Controls, and Shapes

8
Example

9
UI Component

10
 Main Building Blocks
1. Stage
2. Scene
3. Nodes
4. Event Handlers
5. Timelines and transitions for animation purposes

11
Layout Panes

12
Example

13
 User Interface Code

• File->new->other->JavaFX project

Main Frame

GUI Widgets

Select Layout

Container

Add scene in a primary stage

14
Step#1: Download JavaFX SDK

15
Cont..

16
Cont..

17
Install JavaFX

18
 Search for e(fx)clipse

https://download.eclipse.org/efxclipse/updates-released/3.5.0/site/ 19
 Scene Builder
• https://gluonhq.com/products/scene-builder/

20
Scene Builder
Property
Widget Corner View
Corner

21
Adding Scene Builder in Eclipse

22
 Event Handling in JavaFX
• Writing GUI applications requires that program control be driven by the user's interaction with the GUI.

• When the user moves the mouse, clicks on a button, or selects an item from a menu an “event” occurs.

• The javafx.event package provides the basic framework for FX events.

– The Event class serves as the base class for JavaFX events.
– Associated with each event is an event source, an event target, and an event type.

23
 Event Driven Programming
• Graphics applications use events.
• An event dispatcher receives events and notifies interested objects.

Event Listener

EventQueue void handle( Event event ) {

1. ActionEvent notify
Event 2. MouseEvent
3. KeyEvent
4. WindowEvent
}
...

24
 Example
1. User clicks mouse on a button -- that's an Event.
2. JavaFX creates a MouseEvent object.
– the MouseEvent describes what happened (which mouse button
was presses, which field it was in).
3. JavaFX looks for a registered "Event Listener", and calls it using the
MouseEvent as parameter.
My Event Listener
Click! MouseEvent void handle( Event event ) {
notify
MyButton

JavaFX user interface

25
 Responding to Behavior
Your application must do something when an event occurs.

Things you need to know

 what kinds of events are there?

 what user (or software) action causes what event? how do you write an event
handler?
 how do you add event handler to a component?

26
Check the Event class API
All Events are subclasses of Event.
Event
• ActionEvent
• InputEvent
KeyEvent
MouseEvent
• WebEvent
• WindowEvent

27
 Source of Events
• A component or node can be "source" of many kinds of events. Some event types are different
for each node or component.
• Its not complicated! Mostly you can guess event types.

28
 What is an EventHandler?
JavaFX has just one interface for all kinds of Event
Handlers. This is a lot simpler than Swing and AWT.

You have to write code to implement this interface.

<<interface>>
EventHandler<T extends Event>

+handle( event: T ): void

29
Example: ENTER or Button click
1. User types his name and clicks a button (or ENTER)

Event type is:

ActionEvent class
ButtonHandler
implements
EventHandler<Acti
onEvent>
{
public void handle(ActionEvent evt) {
String text =
nameField.getText();
30
// greet user using Alert dialog box
 How to Add Event Handler
There are two ways.
1) addEventHandler - the general way
2)setOnXxxxx - convenience methods for specific event type, such as:
setOnAction( EventHandler<ActionEvent> e )
setOnKeyTyped( EventHandler<KeyEvent> e )
setOnMouseClicked( EventHander<MouseEvent> e )
setOnMouseMoved( EventHander<MouseEvent> e )

...
31
 2 Ways to Add Event Handler (demo)

// 1. use addEventHandler:
button.addEventHandler(ActionEvent.ALL,new
ButtonHandler( ) )

// 2. use setOnAction
button.setOnAction( new ButtonHandler( ) )

• Notice that the EventHandler is the same. The result will be the same, too.
• Both add Event Handler for ActionEvents.

32
 You can re-use event handlers
• For clarity, or to reuse the same event handler on many components,
assign new event handler to a reference variable first.

• Then use the variable in setOnAction(...).

ButtonHandler greetHandler = new ButtonHandler();

// Now apply handler to components
button.setOnAction( greetHandler );
nameField.setOnAction( greetHandler );

33
 Don't Create Duplicate Handlers
It is bad programming to create two objects to
do the same thing (greet the user).

// don't do this
button.setOnAction( new ButtonHandler() );
nameField.setOnAction( new ButtonHandler() );

34
 4 Ways to Define an EventHandler

1. Define an (inner) class that implements EventHandler. We just did that.

2. Write it as anonymous class.

3. Write it as a method and use a method reference. Method reference is

new in Java 8.
• Works because Event Handler has only 1 method.

4. Write it as a lambda expression and use a reference variable to add it.

35
Event Handler as Anonymous Class
You must specify what interface you are implementing,
including type parameter.
EventHandler<ActionEvent> buttonHandler =
new EventHandler<ActionEvent>() {
// anonymous class definition:
public void handle(ActionEvent evt) {
String text = nameField.getText();
//TODO greet user using Alert box
nameField.setText(""); // clear
input
}
};
36
button.setOnAction( buttonHandler );
 Avoid inline definition & use
This is hard to understand and hard to maintain.
Avoid it. Define the anonymous class first, then use
it.
// This is harder to understand, especially
// when the anonymous class is long.
button.setOnAction(
new EventHandler<ActionEvent>()
{ public void handle(ActionEvent
evt) {
String text = nameField.getText();
//TODO greet user using Alert box
nameField.setText(""); // clear
input 37
 Method as Event Handler?
Using SceneBuilder to assign event handlers
we did not write inner classes or anonymous classes.
We just wrote a method, like this:
@FXML
public void greetTheUser(ActionEvent evt) {
String text = nameField.getText();
//TODO greet user using Alert box
nameField.setText(""); //
clear input
}

SceneBuilder let us use a method as Event Handler, instead

of object. 38
Method Reference as EventHandler
Write a method with the required method signature, but
any name you like.
// Assign event handler using method reference
button.setOnAction( this::greetAction );

// this method signature "looks like" an

// EventHandler, but the name is different
public void greetAction(ActionEvent evt) {
String text = nameField.getText();
//TODO greet user using Alert box
nameField.setText(""); // clear
input
39
}
 Lambda Expressions
Lambda Expression is an inline method definition, without a
method name.

EventHandler<ActionEvent> buttonHandler =
(event) -> {
String text = nameField.getText();
//TODO greet user using Alert box
nameField.setText("");
} ;
button.setOnAction( buttonHandler );

40
5th Way to Define Event Handler
You can define the controller itself as "implements
EventHandler<T>" and use "setOnAction( this )".
class GreetController
implements EventHandler<ActionEvent> {
@FXML
public void initialize()
{ button.setOnAction( this
);
...

public void handle(ActionEvent

event) {
This technique is not usually the best choice. You usually have many
// handle
components which needit.
custom event handlers. 41
 Code for alert()
/**
* Display a dialog box with a string message.
* @param message the message to show.
*/
public void alert(String message) {
Alert alert = new Alert(AlertType.INFORMATION);
alert.setContentText( message );
alert.show( );
}

42