Upload
pandora-hood
View
26
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Event Models. James Landay, UCB. Outline. Event overview Windowing systems Window events Event dispatching and handling. Sequential Programs. Program takes control, prompts for input Examples include command-line prompts (DOS, UNIX) LISP interpreter The user waits on the program - PowerPoint PPT Presentation
Citation preview
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.
Sequential Programs (cont.)Sequential Programs (cont.)
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?
Sequential Programs (cont.)Sequential Programs (cont.)
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
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
Interactor TreeInteractor Tree
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…
Interactor TreeInteractor Tree
Display Screen
Outer Win [black]
7 8 9
4 5 6
0 + -
1 2 3
=
93.54
ENT
?????
Interactor TreeInteractor Tree
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
Event DispatchEvent Dispatch
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
Event DispatchEvent Dispatch
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
Event DispatchEvent Dispatch
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
Event DispatchEvent Dispatch
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
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