Event Models

Event ModelsEvent Models

James Landay, UCBJames Landay, UCB

OutlineOutline

Event overviewEvent overviewWindowing systemsWindowing systemsWindow eventsWindow eventsEvent dispatching and handlingEvent dispatching and handling

Sequential ProgramsSequential Programs

Program takes control, prompts for Program takes control, prompts for inputinput

Examples include Examples include – command-line prompts (DOS, UNIX)– LISP interpreter

The user waits on the programThe user waits on the program– Program tells user it’s ready for more

input– User enters more input

Sequential Programs (cont.)Sequential Programs (cont.)

ArchitectureArchitectureProgram reads in a line of textProgram parses the textProgram evaluates the resultMaybe some outputLoop back to beginning

But how do you model the many But how do you model the many actions a user can take?actions a user can take?– For example, a word processor?– Need to do printing, editing, inserting,

etc.


Usually end up with lots of Usually end up with lots of modesmodes– Lots of state variables

Other examples of modesOther examples of modes– Paint programs (line, bucket-fill,

rectangle, etc)– Universal remotes with TV / VCR mode– VI edit mode and command mode

Problems with modes?Problems with modes?


Problems with modes?Problems with modes?– Gets confusing if too many modes– Can be easy to make errors– Need feedback as to what mode you are

in– How to switch between modes?

We’ll need a more advanced model to We’ll need a more advanced model to simplify windows programmingsimplify windows programming

Event-Driven ProgrammingEvent-Driven Programming

Instead of the user waiting on program, Instead of the user waiting on program, have the program wait on the userhave the program wait on the user

All communication from user to computer All communication from user to computer is done via “events”is done via “events”

An An eventevent is something “interesting” that is something “interesting” that happens in the systemhappens in the system– Mouse button goes down– Item is being dragged– Keyboard button was hit

Event ExampleEvent Exampleclose box

title bar

folder

scroll bar

size control

Major IssuesMajor Issues

How to decompose the UI into interactive How to decompose the UI into interactive objects?objects?

How to distribute inputs to the interactive How to distribute inputs to the interactive objectsobjects

How to partition between application & How to partition between application & system software?system software?

Models for programming interactive Models for programming interactive objectsobjects

Models for communications between Models for communications between objectsobjects

Windowing SystemsWindowing Systems

Partitioning to prevent chaosPartitioning to prevent chaos Infrastructure to support common Infrastructure to support common

servicesservices Two major aspectsTwo major aspects– software services to applications

• create and organize windows• implement interaction in those windows

– window manager• UI allowing user to control size & placement of

windows

Interactor TreeInteractor Tree

Decompose interactive objects into a treeDecompose interactive objects into a tree– interactive objects also known as “widgets”– based on screen geometry of objects– nested rectangles

Used for dispatching eventsUsed for dispatching events– Events are dispatched (sent) to code in widget– The code then handles the event

Variety of methods for dispatching eventsVariety of methods for dispatching events– Return to this later


Display Screen

“F:\cs160\Public” window Inner Window title bar

horizontal scroll bar contents area

“CDJukebox” folder“Home Ent…” folder…

size control …

“Web Newspaper” window…


Display Screen

Outer Win [black]

7 8 9

4 5 6

0 + -

1 2 3

=

93.54

ENT

?????


Display Screen

Outer Win [black]

Result Win [tan]Result String

Inner Win [green]

Keypad [Teal]

- button+ button0 button

= button

7 8 9

4 5 6

0 + -

1 2 3

=

93.54

ENT

Interactor Tree (Java)Interactor Tree (Java)

Display Screen

Frame [black]

Text Entry [tan]Result String

Panel [green]

Keypad Panel [Teal]

Button(“-”)Button(“+”)Button(“0”)

Button(“=”)

7 8 9

4 5 6

0 + -

1 2 3

=

93.54

ENT

WindowsWindows

Top level windows known as Top level windows known as root root windowswindows– provide UI abstraction for multiple apps– windowing system arbitrates interactive

resourcesEach root window belongs to an app.Each root window belongs to an app.– all descendant windows belong to same

app– violated by OLE (ActiveX) and OpenDoc

(dead?)

Windows (cont.)Windows (cont.)

Windows vs. widgets/controlsWindows vs. widgets/controls– X, NeXTStep, MS Windows• everything is window

–Mac: only roots are windows controls manage rect. space in a window (Motif gadgets similar)

Networked Windowing SystemsNetworked Windowing Systems

X Window & NeWS designed to allow X Window & NeWS designed to allow apps to run on remote machinesapps to run on remote machines

Uses client-server modelUses client-server model

X Serverstd system software

Clientapp software

Network

User

X WindowX Window

Note backwards terminologyNote backwards terminology– User is on “server” not “client”

X ServerX Server– interprets X commands and can send events– determines which window receives events and

forwards over network to proper client X ClientX Client– software interface to X (Xlib)– assembles the output from Xlib routines into

packets for transmission to server

X WindowX Window

Interaction Problems?Interaction Problems?

Network Bandwidth is bits per second

Network Latency is time to transferand process data.

X Serverstd system software

Clientapp software

Network

User Latency (time)

Bandwidth (bps)

Relation to Model Human Processor?

Network Round Trips (NRT)Network Round Trips (NRT)

Every mouse move on thumb involves NRTEvery mouse move on thumb involves NRT Solutions?Solutions?

– download code that knows how to scroll– NeWS used display PostScript to do this

scroll bar

thumb(elevator)

Window EventsWindow Events

User interacts with input deviceUser interacts with input device– action translated into software events–must distribute events to appropriate

window– doesn’t need IPC, use

method/procedure callEvents haveEvents have– type–mouse position or character key– the window the event is directed to

Input EventsInput Events

Mouse button eventsMouse button events– mouse up and down– modifier (shift keys, etc.)– double click (X doesn’t have this fakes it)

Mouse movement eventsMouse movement events– implement painting with mouse– mouse drag

• can “mask off” mouse moves w/o button down

Mouse enter and exit eventsMouse enter and exit events– e.g. if you entered / exited a button region

Implementing ButtonsImplementing Buttons

Button

Button

mouseenter

mouseexit

(But using mouse move events would be overkill)

Events (cont.)Events (cont.)

Keyboard eventsKeyboard events– must translate raw “scan codes” into ASCII

Windowing events on windowWindowing events on window– creation / destruction– opening / closing– iconifying / deiconifying– selection / deselection– resize– redraw

• redraw newly exposed portions of the window (rect.)

Main Event LoopMain Event Loop

Main event loopMain event loopInitialization

While (not time to quit) {

Get next event E

Dispatch event E

}

The meat of the program is in the The meat of the program is in the code that handles the “dispatch”code that handles the “dispatch”

Event DispatchEvent Dispatch

Dispatch (event E) { switch (E.window) { ... case FIVE-KEY:

if (E.type == left-down){ cur = 5 + 10*cur; display (cur); last-op = NUMBER; } ...

7 8 9

4 5 6

0 + -

1 2 3

=

0

ENT

Hit the ‘5’ key


Dispatch (event E) { switch (E.window) { ... case TWO-KEY:

if (E.type == left-down) { cur = 2 + 10*cur; display (cur); last-op = NUMBER; } ...

7 8 9

4 5 6

0 + -

1 2 3

=

5

ENTHit the ‘2’ key


Dispatch (event E) { switch (E.window) { ... case ENTER-KEY: if (E.type == left-down){

push (cur); cur = 0; last-op = COM; }

...

7 8 9

4 5 6

0 + -

1 2 3

=

52

ENT

Hit the ‘enter’ key


Dispatch (event E) { switch (E.window) { ... case SIX-KEY:

if (E.type == left-down) { cur = 6 + 10*cur; display (cur); last-op = NUMBER; } ...

7 8 9

4 5 6

0 + -

1 2 3

=

0

ENT

Hit the ‘6’ key


Dispatch (event E) { switch (E.window) {

...case PLUS-WIN: if (E.type == left-down){

if (last-op == NUMBER)push (cur);

result = pop() + pop();push (result);

display (result);cur = 0;last-op = COM;

}

7 8 9

4 5 6

0 + -

1 2 3

=

6

ENTHit the ‘+’ key


7 8 9

4 5 6

0 + -

1 2 3

=

58

ENT

Event QueuesEvent Queues

Input events are placed in a queueInput events are placed in a queue– Ensures events are processed in order

Main event loop removes them from Main event loop removes them from the queue (get_next_event) & the queue (get_next_event) & dispatches for processingdispatches for processing

Mouse move (22, 33)Mouse move (40, 30)Mouse down left (45, 34)Mouse up left (46, 35)

Event Queues (cont.)Event Queues (cont.)

Can use event masks to filter Can use event masks to filter unwanted eventsunwanted events– e.g., filter mouse moves in a forms-based

program• just get enter/exit events

Object-Oriented Event HandlingObject-Oriented Event Handling

Older methods prone to programmer Older methods prone to programmer errorerror

OO languages more naturally handle OO languages more naturally handle passing messages between passing messages between independent objectsindependent objects

Basis for NeXTStep, Mac App, Visual Basis for NeXTStep, Mac App, Visual C++, JavaC++, Java

Object-Oriented Event LoopObject-Oriented Event Loop

Tool kit defines an Tool kit defines an application classapplication class– provides a run method which contains

event loop– technique used by Visual C++ and

MacAppApplication myApp;

Intialize windows & application data structures

Set any special event masks by sending messages to myApp

myApp.Run();

Dispatching EventsDispatching Events

If user scrolls the text, the software must:If user scrolls the text, the software must:– direct the mouse events to the scroll bar– update the scroll bar display during the drag– notify the text editing window it needs to scroll

itself so that the text appears to have moved

Dispatching Events (cont.)Dispatching Events (cont.)

Algorithm selects the bottom-most, front-most Algorithm selects the bottom-most, front-most region in the interactor treeregion in the interactor tree– scroll bar or contents over outerwin (bottom-most)– scroll bar over contents (front-most)– each window need only consider its own events– difficult to impose a high level of control– known as bottom-first event dispatch

Top-down event dispatchTop-down event dispatch– events passed to top-most, front-most window– it dispatches to one or more of its children...

Event FocusEvent Focus

Where should keyboard events go?Where should keyboard events go?– mouse-based

• attach mouse position to all key events and dispatch events in the same way as mouse events

– click-to-type (Mac)• send all key events to last window where mouse

down occurred• key focus

– windows take and give away keyboard focus

Mouse focusMouse focus– long narrow scrollbar...

Simple Event HandlingSimple Event Handling

Event tables (in the early days…)Event tables (in the early days…)– indexed by event types (integer from 0 - 255)– holds pointers to functions that handle each event– one table per / window– lots of things to maintain when attached to a

widget that you want to make reusable CallbacksCallbacks– separate things like labels/colors into resources

read from files– each kind of widget defines a set of named

callbacks which it will invoke

Callback ExampleCallback Example

How do we notify text window to scroll How do we notify text window to scroll when the scroll bar is moved?when the scroll bar is moved?– create a vertical scroll bar widget– write a callback procedure which has code to

notify text windows of their new position– register callback with scroll bar as callback to

invoke when the scroll bar is moved– also register a pointer to the text window as

the callback data knows which window to scroll

Simple Event Handling (cont.)Simple Event Handling (cont.)

WindowProc style (MS Windows)WindowProc style (MS Windows)– newer and better than older models– define window classes, each of which have a

WindowProc (similar to callback)– whenever event dispatch algorithm identifies a

window that should receive an event, that window’s WindowProc is invoked

– body of WindowProc is a switch on the event type with a handler for each event

– 100s of events, but most is inherited/delegated

SummarySummary

Windowing systemsWindowing systems– special problems with networked WS

Interactor treesInteractor trees Input eventsInput events Main event loopMain event loop Dispatching eventsDispatching events Event focusEvent focus Simple event handlingSimple event handling

Documents

Event Models