1. The structure of Interactive Software
Window and Events
The structure of Interactive Software

2. Window Systems Windowing System Graphics View Essential Geometry Model
Controller
Input

3. Graphical Presentation
Windowing System
Graphics
View
Essential Geometry
Model
Controller
Input

4. Windows Window Overlapping Window Hierarchy Rectangular area of screen
Drawing order front to back
Window Hierarchy
Window system has composition of windows and redraws appropriately

5. Window Hierarchy
Top
folder
Calculator
pad
Menu
Icon1
Icon2
Icon1

6. Windows and Widgets
scroll bar
close box
title bar
folder
size control

7. Hierarchy Applications decomposed into different windows
Hierarchy used to determine drawing on screen
Redrawing managed by windowing system rather than application

8. Redraw

9. Redraw
Area to be Redrawn

10. Redrawing redraw(Graphics G) Each widget implements
This should be controlled by windowing system although you may need to write routines that respond to this to draw widget in its entirety
redraw(Graphics G)
Graphics Context A handle allowing access to the underlying drawing primitives

11. class DrawModel {
int getNumberOfLines() { }
Point getEndPoint1(int lineIndex) { }
Point getEndPoint2(int lineIndex) { }
. . . other model methods . . . }
class DrawView extends Widget
DrawModel myModel;
public void redraw(Graphics G)
for (int i=0;i<myModel.getNumberOfLines(); i++)
G.drawLine(myModel.getEndPoint1(i),
myModel.getEndPoint2(i));

12. Graphics object Graphics object
Device interface, grpahics context, canvas, sheet etc..
Object to allow access to the actually drawing device
Defines basic set of drawing methods to be used that abstact from hardware etc..
Manages to make drawing efficient using techniques such as clipping

13. Clipping Each drawing object has a clipping region
The underlying window extent.
Used to make drawing efficient and well behaved.
public void redraw(Graphics G) {
Region clip=G.getClipRegion();
for (int I=0;I<myModel.getNumberOfLines(); I++)
Point E1=myModel.getEndPoint1(i);
Point E2=myModel.getEndPoint2(i);
if (! clip.intersects(new Rectangle(E1,E2) )
G.drawLine(E1,E2); }

14. Events

15. Window Systems Windowing System Graphics View Essential Geometry Model
Controller
Input

16. Processing input events
Receiving events from the user and dispatching them to the correct application/window.
Associating Event with application code
Ensuring event causes the code the developer has associated with a particular widget to be run.
Notifying the view and the windowing system of model changes so that the presentation can be correctly redrawn.

17. Input event dispatch
Windowing system needs to dispatch to the correct application
Window tree used to map from mouse click to widget
Bottom up
Lowest in the tree then passed up
Top down
maps to top of tree and dispatches this is the sent down tree
x1,y1
Mouse(x,y)
x2,y2

18. Focus
For many inputs windowing system needs to know where to send event
Key Focus
Windowing system keeps pointer to the widget that has focus and directs keyboard events to this widget.
getKeyFocus() used to aquire focus by a widget (reflected in caret on screen)
Mouse Focus
Mouse movements can be fine so mouse focus maps to restricted actions

19. Event-Driven Programming
All generated events go to a single event queue
provided by operating system
ensures that events are handled in the order they occurred
hides specifics of input from apps
Mouse
Software
Event Queue
Keyboard
Software

20. Receiving Events Events placed on an event queue by operating system
Windowing system removes events and dispatches them
In early systems handled by applications
Both user generated and windowing events handled by the same mechanism

21. Input events Button Events Mouse Movement Events Keyboard Events
mouseDown, mouseUP  click, doubleClick
mouseDown, mouseUP  doubleClick
mouseDown, mouseUP, mouseDown, mouseUP  doubleClick
Mouse Movement Events
mouseMove – whenever movement happens
mouseEnter, mouseLeave – entry and exit to window
Keyboard Events
keyInput – event when a key is pressed
Window Events
windowOpen, windowClose, windowResize, windowIconify.
Many events have “payloads” that give details
mouseMove -> x,y
keyInput -> character

22. Event/ Code binding
Number of different approaches used to map from the event to the code to be run in response to the event
Event Queue and type selection
Window event tables
Callback event handling
WindowProc event handling
Inheritance event handling
Interpreted Expressions

23. Event Queue and type selection
early Macintosh – programmer managed everything through a switch statement
Efficient and still used in mobile devices
public void main() {
// perform any setup of widgets including layout, setting of properties // and assignment to container widgets.
while (not time to quit )
{ Event evnt = getInputEventFromSystem()
switch ( evnt.type )
case MOUSEDOWN: . . .
case MOUSEUP: . . . }

24. Window event tables Screen widgets linked to tables of procedures
Each Procedure table indexed by event type
Tree traversed to find event table
Event table indexed by Event Type

25. Window event tables Sun Workstation – GIGO
Uses pointers to procedures in C
All widget carry pointer to procedure to handle the event
Public void main() {
initialize the windows and for each window create a procedure pointer table
to handle any events that should be sent to that window
while (not time to quit)
{ Event evnt=getInputEventFromSystem()
handleWindowEvent(rootWindow, evnt); }
public void handleWindowEvent( Window curWindow, Event evnt)
foreach Window CW in curWindow.children in front to back order
{ if( CW.bounds.contains(evnt.mouseLocation))
{ handleWindowEvent(CW,evnt);
return;
invoke procedure at curWindow.eventTable[evnt.type];

26. Inheritance event handling
All widgets must share a common interface
This is the root class that all others hang off- component
public class Widget {
methods and members for Bounds
public void mousePressed(int x, int y, int buttonNumber)
{ default behavior }
public void mouseReleased(int x, int y, int buttonNumber)
public void mouseMoved(int x, int y)
public void keyPressed(char c, int x, int y, int modifiers)
public void windowClosed()
public void redraw( Graphics toDraw)
and a host of other event methods }

27. Inheritance event Screen components all inherit from base widget
When input event occurs correspond method is invoked
Event is either handled on passed on to child object in the tree
Writing code to handle events involves writing the methods to handle the core set of widget events.

28. Listeners Raw user input events only one part of the story
Many events are generated from other sources as a consequence of more primitive user actions
windowing system -> windowing events (open, close, move etc..)
Operating systems -> device plugged in etc..
This led to scaling up of events and event types needed to be able to handle many thousands of types of event
Listener model evolved from inheritance based approaches in order to handle issues of scale.

29. Listener Class Structure
Set of objects that can produce events (Generators)
JButton generates ActionEvents whenever the button is pressed
Set of objects that want to be notified of events (Listeners)
Listeners implements an interface in order to handle the event
E.g

30. class ActionEvent
{ information about the action event }
interface ActionListener
{ public void actionPerformed(ActionEvent e); }
class JButton
{ lots of other methods and fields ….
private Vector actionListenerList;
public void addActionListener(ActionListener listener)
{ actionListenerList.add(listener); }
public void removeActionListener(ActionListener listener)
{ actionListenerList.remove(listener); }
protected void sendActionEvent(ActionEvent e)
{ for (I=0;I<actionListenerList.size();I++)
{ ActionListener listen= (ActionListener) actionListenerList.get(I);
listen.actionPerformed(e); } ……

31. { information about the action event } interface ActionListener
class ActionEvent
{ information about the action event }
interface ActionListener
{ public void actionPerformed(ActionEvent e); }
class JButton
{ lots of other methods and fields ….
private Vector actionListenerList;
public void addActionListener(ActionListener listener)
{ actionListenerList.add(listener); }
public void removeActionListener(ActionListener listener)
{ actionListenerList.remove(listener); }
protected void sendActionEvent(ActionEvent e)
{ for (I=0;I<actionListenerList.size();I++)
{ ActionListener listen= (ActionListener) actionListenerList.get(I);
listen.actionPerformed(e); } ……
Builds a list of ActionListener objects

32. { information about the action event } interface ActionListener
class ActionEvent
{ information about the action event }
interface ActionListener
{ public void actionPerformed(ActionEvent e); }
class JButton
{ lots of other methods and fields ….
private Vector actionListenerList;
public void addActionListener(ActionListener listener)
{ actionListenerList.add(listener); }
public void removeActionListener(ActionListener listener)
{ actionListenerList.remove(listener); }
protected void sendActionEvent(ActionEvent e)
{ for (I=0;I<actionListenerList.size();I++)
{ ActionListener listen= (ActionListener) actionListenerList.get(I);
listen.actionPerformed(e); } ……
Traverses through and passes the event onto
all registered action listeners

33. To create a generator for event Evt
Create an Evt class to contain information about the event.
Create an EvtListener interface that contains all of the methods associated with this listener structure.
Create a private member of your generator class that can hold all of the listeners for the event.
Create the addEvtListener(EvtListener) and removeEvtListener(EvtListener) methods to allow others to add and remove listeners.
Create private methods to send events, which will loop through the listeners invoking each of their event methods.
To create a listener that can receive Evt events one should:
Implement the EvtListener interface
Add the object to the event generator using addEvtListener().

34. Event Delegation Each scrollbar can generate an AdjusmentEvent
Text needs to scroll appropriately
Could implement one ActionListener but needs to disambiguate making code more complex
Better with separate method for scrolling in X direction and scrolling in Y direction
To handle this issue Java handles this with either anonymous or inner classes

35. public class Tempcontroller {
public Tempcontroller() {
// configure GUI
// register event listener
upButton.addActionListener(new UpButton());
downButton.addActionListener(new DownButton());
// arrange components in GUI
// display GUI }
class UpButton implements ActionListener{
public UpButton() { /*constructor*/ }
public void actionPerformed(ActionEvent e) {
if ( temperature <MAX_TEMP) temperature= temperature +1;
tempValue.setText(String.valueOf(temperature));
class DownButton implements ActionListener{
public DownButton() { /*constructor*/ }
if ( temperature >MIN_TEMP) temperature= temperature -1;

36. Model/View notification
In addition to events from the view we also need to consider updates that result from changes in the model.
public class LineDrawModel {
private Line [] linesToDraw;
public int addLine( int x1, int y1, int x2, int y2) // add line and return its index
{ }
public void moveLine(int index, int newX1, int newY1, int newX2, int newY2)
public void deleteLine(int index)
public int nLines() { return linesToDraw.length; }
public Line getLine(int index) // return a line from the model }
public class Line { int x1, int y1, int x2, int y2 }

37. Model Listeners
Handle changes to the model by defining a model listener interface
Model will generate events when significant changes have occurred
Views will register objects that implement listeners to handle the updates
public interface LineDrawListener {
public void lineWillChange( int index, int newX1, int newY1, int newX2, int newY2);
// a particular line will changed. Assumes that the old line still in the model
public void modelHasChanged();
// a major change has occurred to the whole model }

38. public class LineDrawModel{
private Line [] linesToDraw;
public int addLine( int x1, int y1, int x2, int y2) // add line and return its index
{ notifyLineWillChange(linesToDraw.length,x1,y1,x2,y2);
. . . code to add the line . . . }
public void moveLine(int index, int newX1, int newY1, int newX2, int newY2)
{ notifyLineWillChange(index,newX1, newY1, newX2, newY2);
. . . code to change the line . . .
public void deleteLine(int index)
{ code to delete the line . . .
notifyModelHasChanged();
private Vector listeners;
public void addListener(LineDrawListener newListener)
{ listeners.add(newListener); }
public void removeListener(LineDrawListener listener)
{ listeners.remove(listener); }
private void notifyLineWillChange( int index, int newX1, int newY1, int newX2, int newY2)
{ for each LineDrawListener listen in listeners
listen.lineWillChange(index, newX1, newY1, newX2, newY2);
private void notifyModelHasChanged()
listen.modelHasChanged();
. . . other methods . . .
Listener List and dispatch

39. Handling View updates
reDraw() is an update that is called from the windowing system
View Events need to be handle particular updates by implementing the interfaces defined by the model classes to handle events.

40. public class LineDrawView extends Widget implements LineDrawListener{
private LineDrawModel myModel;
public LineDrawView(LineDrawModel model)
{ myModel=model;
myModel.addListener(this); 3-30 Principles of Interactive Systems }
public void redraw(Graphics g)
{ for (int i=0;i<myModel.nLines();i++)
{ Line line=myModel.getLine(i);
g.drawLine(line.x1,line.y1, line.x2, line.y2 );
public void lineWillChange( int index, int newX1, int newY1, int newX2, int newY2)
{ Line line=myModel.getLine(index);
if (line!=null)
{ Rectangle oldRegion =new Rectangle(line.x1, line.y1,
line.x2-line.x1+1, line.y2-line.y1+1);
this.damage(oldRegion);
Rectangle newRegion=new Rectangle(newX1,newY1,
newX2-newX1+1, newY2-newY1+1);
this.damage(newRegion);
public void modelHasChanged()
this.damage();

41. Essential Geometry
Step Left
Drag
Step Right
Page Right
Page Left
Maps from lower level graphics to higher level semantics
Separating essentially geometry allows us to simply testing and debugging

42. Summary Introduced basics of windowing systems
Outlined the use of events and different techniques for handling events in interactive programming
Next
Discussion of principles of widgets
Development of a swing application demonstrating the use of events
Reading
Chapter 3 and 4 of Olsen