CIS 068

Welcome to CIS 083 !

Events

CIS 068

Overview

Subjects:

• Structured Programming vs. Event Driven Programming(EDP)

• Events

• Events in JAVA

• GUIs as Example for EDP

CIS 068

An ExampleThe task: write a program,showing

• a menu

• 2 circles

• 2 buttons

Menu

ON / OFF ON / OFF

Reset

Exit

CIS 068

An Example

Menu

ON / OFF ON / OFF

Reset

Exit

Show both circles

Exit Program

The circles

Buttons toggle circles

CIS 068

An Example

Menu

ON / OFF ON / OFF

Reset

Exit

Confirm command

by dialog

Do you really want to do that ?

YES NO

CIS 068

An Example

Required:

All commands must be executable at every time

CIS 068

Sequential Approach

A first approach could be:

Check Menu

Check Button 1

Check Button 2

Show Window

Check Button Y

Check Button N

Exit or Loop

CIS 068

Sequential Approach

Of course this approach doesn’t fulfill the requirements !

(If button 1 is activated, button 2 and the menu are disabled)

CIS 068

Sequential Approach 2Check Menu

Check Button 1

Check Button 2

Show Dialog A

If dialogA

Check Button Y / N

If dialogB

Check Button Y / N

Set dialogA = true

Show Dialog B

Set dialogB = true

Loop

…

…

CIS 068

Sequential Approach 2

Does this approach meet the requirements ?

What does the program, i.e. the processor, do most of the time ?

What about more complicated structures (nested command structures,…) ?

CIS 068

Event Driven ApproachWhat about this approach:

Process Menu

Process Button 1

Process Button 2

Process Button Y

Process Button N

Menu activated

Button 1 activatedButton 2 activated

Button Y activated

Button N activated

CIS 068

Example: Discussion

And again:

•Does this approach meet the requirements ?

•What does the program, i.e. the processor, do most of the time ?

•What about more complicated structures (nested command structures,…) ?

•Who is in control of the program’s flow ?

CIS 068

Sequential vs. Event-driven Programming

Comparison between Sequential

And

Event Driven Programming

CIS 068

Sequential Programming

• In sequential programs, the program is under control

• The user is required to synchronize with the program:

•Program tells user it’s ready for more input

•User enters more input and it is processed

• While … if then… structures highly define the user’s path through the program

• Program is predefined with respect to time

• Handling of sequentially independent commands requires enormous amount of work

CIS 068

Sequential Programming

Shouldn’t the program be required to synchronize with the user?

• Flow of a typical sequential program• Prompt the user• Read input from the keyboard• Parse the input (determine user action)• Evaluate the result• Generate output• Repeat

CIS 068

Sequential Programming

• Advantages– Architecture is iterative (one step at a time)– Easy to model (flowcharts, state machines)– Easy to build

• Limitations– Can’t implement complex interactions– Only a small number of features possible– Interaction must proceed according to a pre-defined

sequence

• To the rescue… Event-driven programming

CIS 068

Event Driven Programming

• Instead of a user synchronizing with the program, the program synchronizes with, or reacts to, the user

• All communication from user to computer occurs via EVENTS and the code that handles the events

• An event is an action that happens in the system– A mouse button pressed or released– A keyboard key is hit– A window is moved, resized, closed, etc.

CIS 068

Event Driven Programming

• Typically two different classes of events– User-initiated events

• Events that result directly from a user action• e.g., mouse click, move mouse, button press

– System-initiated events• Events created by the system, as it

responds to a user action• e.g., scrolling text, re-drawing a window

CIS 068

Event Driven Programming

• There’s no top-down flow of control, i.e. no ‘Main’-program defining the sequential flow

• Code fragments are associated with events and invoked when events occur

• Order of execution is decoupled

• Don’t have to deal with order of events– This is especially helpful, when the order is unknown !

CIS 068

Typical Applications

• GUIs– Modern GUIs are event driven. Event occurs when the user does

something:• Move the mouse

• Press a button

• Activate a menu

• Resize Window

• …

CIS 068

Typical Applications

Other Examples:• Event driven I/O

– Especially networking, where I/O is very slow– Events occur, when

• Connection is made

• When ready to send

• When data arrives

• LEGO Mindstorms– Events occur, when

• Sensors report changes in environment

CIS 068

Event Driven Programming

How does it work

or

where’s the ‘MAIN’ ?

CIS 068

Participants in an OO - Event Driven SystemEvent Source

• objects that generate events, e.g. buttons

Event

• represent occurences, changes of state or requests which a program might need to handle

• store all event-specific information (e.g. mouseEvent: x/y coordinates)

Handler (Listener)

• objects that respond to events

• Provide the code needed to handle the event

CIS 068

Participants in an OO - Event Driven System

Event

Source

(e.g. mouse)

ListenerEvent Public void mouseClicked(

MouseEvent e){

…

}

CIS 068

•The listener must be known to the event source, such that the event can be sent

Listener is REGISTERED

• Listeners specify what kind of events they are interested in, i.e. specify the event sources

• Typically done by addXXXListener(Listener)

Registering Listeners

CIS 068

Registering Listeners

Source

(eg. Button)

Listener 1

Listener 2

Listener 3

Listener 4REGISTER (‘please inform me’)

CIS 068

Registering Listeners: JAVA example

here !

CIS 068

Where’s the ‘MAIN’ ?

• The Operating System (or JAVA) manages an event-queue

• The event-queue contains information about event-sources and their registered listeners

• As events occur, they are placed in the queue to be dispatched by the event - loop

• The OS (or JAVA) loops through the event-queue, passing the command to the specified listeners

• The MAIN – control is passed to the OS (or JAVA), the program is in idle state until activated by events

• The MAIN is replaced by the event-loop

CIS 068

Where’s the ‘MAIN’ ?

The advantage:

• The OS (or JAVA) can optimize the processing time for managing the loop very efficiently

• The OS provides the management, the programmer only writes (and registers) listeners

CIS 068

Events in JAVA: Sources

Event Sources:

• Mouse

• Keyboard

• GUI – Objects (AWT / Swing)

• Button

• ChoiceBox etc.

CIS 068

Events in JAVA: Events

EventObject

AWTEvent

ActionEvent ComponentEvent

InputEvent WindowEvent

MouseEvent KeyEvent

Note: this diagram is not complete. It just shows the most common event classes

CIS 068

Events in JAVA: Listeners

Classes implementing the ‘Listener’ – interfaces (package java.awt.event)

CIS 068

Events in JAVA: the example revisited

Creates the event source

ButtonDemo is able to

receive ActionEvents

Adds button to frame but does

NOT register ButtonDemo !

Registers THIS instance of

ButtonDemo to theButton

If theButton is pressed, an

ActionEvent is sent to the

Method actionPerformed(..),

i.e. the method is invoked with

the event as argument.

CIS 068

JAVA-Events: GUI – Example

Implementation of the first example (without Menu and Dialog)

CIS 068

JAVA-Events: GUI – Example

JFrame

CIS 068

JAVA-Events: GUI – Example

JFrame layout: GridLayout(1,2)

Provides 1 x 2 Grid. Each area of grid can contain a new

GUI – component.

AREA 1 AREA 2

CIS 068

JAVA-Events: GUI – Example

•Each area contains a JPanel.

• JPanel – layout: BorderLayout()

• Used are only the CENTER and SOUTH areas.

CENTER

SOUTH

CIS 068

JAVA-Events: GUI – Example

•The CENTER contains a JComponent

• JComponent can be used for custom – drawing using the paint() method

•The SOUTH area contains a JButton

CIS 068

JAVA-Events: GUI – Example

The Main - Window: JFrame

Layout

Add JPanels

CIS 068

JAVA-Events: GUI – Example

The JPanel, containing the circle and the button:

Layout

Create JComponent

And Button

Register JComponent

to Button !

Add JComponent

and Button

CIS 068

GUI – ExampleThe JComponent,

responsible for

drawing the circle:

Constructor

This method is invoked

by JButton !

Paint green background

and, if required, red

circle

CIS 068

Outlook

Next time:

GUI – Elements !