Window and Events

1
Window and Events

• The structure of Interactive Software

2
Window Systems
Windowing System
Graphics
View
EssentialGeometry
Model
Controller
Input
3
Graphical Presentation
Windowing System
Graphics
View
EssentialGeometry
Model
Controller
Input
4
Windows

• Window
• Rectangular area of screen
• Overlapping
• 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
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

• 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 ContextA 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
i0iltmyModel.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
clipG.getClipRegion() for (int
I0IltmyModel.getNumberOfLines() I)
Point E1myModel.getEndPoint1(i)
Point E2myModel.getEndPoint2(i) if
(! clip.intersects(new Rectangle(E1,E2) )
G.drawLine(E1,E2)

14
Events
15
Window Systems
Windowing System
Graphics
View
EssentialGeometry
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
• 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 -gt x,y
• keyInput -gt 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 evntgetInputEventFromSystem()
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.eventTableevnt.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) default
behavior public void mouseMoved(int x,
int y) default behavior
public void keyPressed(char c, int x, int y, int
modifiers) default behavior
public void windowClosed() default
behavior public void redraw( Graphics
toDraw) default behavior
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 -gt windowing events (open,
  close, move etc..)
• Operating systems -gt 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(ActionLi
stener listener)
actionListenerList.remove(listener)
protected void sendActionEvent(ActionEvent e)
for (I0IltactionListenerList.size()
I) ActionListener listen
(ActionListener) actionListenerList.get(I)
listen.actionPerformed(e)

31
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(ActionLi
stener listener)
actionListenerList.remove(listener)
protected void sendActionEvent(ActionEvent e)
for (I0IltactionListenerList.size()
I) ActionListener listen
(ActionListener) actionListenerList.get(I)
listen.actionPerformed(e)

Builds a list of ActionListener objects
32
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(ActionLi
stener listener)
actionListenerList.remove(listener)
protected void sendActionEvent(ActionEvent e)
for (I0IltactionListenerList.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 generatean 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 ltMAX_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(line
sToDraw.length,x1,y1,x2,y2) . . . code to
add the line . . . public void
moveLine(int index, int newX1, int newY1, int
newX2, int newY2) notifyLineWillChange(ind
ex,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(newListene
r) public void removeListener(LineDrawList
ener listener) listeners.remove(liste
ner) 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() for each
LineDrawListener listen in listeners
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)
myModelmodel myModel.addListener(this
) 3-30 Principles of Interactive Systems
public void redraw(Graphics g)
for (int i0iltmyModel.nLines()i)
Line linemyModel.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
linemyModel.getLine(index) if
(line!null) Rectangle oldRegion
new Rectangle(line.x1, line.y1,

line.x2-line.x11, line.y2-line.y11)
this.damage(oldRegion)
Rectangle newRegionnew
Rectangle(newX1,newY1,

newX2-newX11, newY2-newY11)
this.damage(newRegion) public void
modelHasChanged()
this.damage()
41
Essential Geometry
Step Left
Step Right
Drag
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