2. Event Models James Landay, UCB

3. Outline Event overview Event overview Windowing systems Windowing systems Window events Window events Event dispatching and handling Event dispatching and handling

4. Sequential Programs Program takes control, prompts for input Program takes control, prompts for input Examples include Examples include –command-line prompts (DOS, UNIX) –LISP interpreter The user waits on the program The user waits on the program –Program tells user it’s ready for more input –User enters more input

5. Sequential Programs (cont.) Architecture Architecture Program reads in a line of text Program parses the text Program evaluates the result Maybe some output Loop back to beginning But how do you model the many actions a user can take? But how do you model the many actions a user can take? –For example, a word processor? –Need to do printing, editing, inserting, etc.

6. Sequential Programs (cont.) Usually end up with lots of modes Usually end up with lots of modes –Lots of state variables Other examples of modes Other 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?

7. 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 simplify windows programming We’ll need a more advanced model to simplify windows programming

8. Event-Driven Programming Instead of the user waiting on program, have the program wait on the user Instead of the user waiting on program, have the program wait on the user All communication from user to computer is done via “events” All communication from user to computer is done via “events” An event is something “interesting” that happens in the system An event is something “interesting” that happens in the system –Mouse button goes down –Item is being dragged –Keyboard button was hit

9. Event Example close box title bar folder scroll bar size control

10. Major Issues How to decompose the UI into interactive objects? How to decompose the UI into interactive objects? How to distribute inputs to the interactive objects How to distribute inputs to the interactive objects How to partition between application & system software? How to partition between application & system software? Models for programming interactive objects Models for programming interactive objects Models for communications between objects Models for communications between objects

11. Windowing Systems Partitioning to prevent chaos Partitioning to prevent chaos Infrastructure to support common services Infrastructure to support common services Two major aspects Two 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

12. Interactor Tree Decompose interactive objects into a tree Decompose interactive objects into a tree –interactive objects also known as “widgets” –based on screen geometry of objects –nested rectangles Used for dispatching events Used for dispatching events –Events are dispatched (sent) to code in widget –The code then handles the event Variety of methods for dispatching events Variety of methods for dispatching events –Return to this later

13. Interactor 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 …

14. Interactor Tree Display Screen Outer Win [black] 7 8 9 4 5 6 0 + - 1 2 3 = 93.54 ENT ?????

15. Interactor Tree Display Screen Outer Win [black] Result Win [tan] Result String Inner Win [green] Keypad [Teal] - button + button 0 button = button 7 8 9 4 5 6 0 + - 1 2 3 = 93.54 ENT

16. 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

17. Windows Top level windows known as root windows Top level windows known as root windows –provide UI abstraction for multiple apps –windowing system arbitrates interactive resources Each 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?)

18. Windows (cont.) Windows vs. widgets/controls Windows 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)

19. Networked Windowing Systems X Window & NeWS designed to allow apps to run on remote machines X Window & NeWS designed to allow apps to run on remote machines Uses client-server model Uses client-server model X Server std system software Client app software Network User

20. X Window Note backwards terminology Note backwards terminology –User is on “server” not “client” X Server X Server –interprets X commands and can send events –determines which window receives events and forwards over network to proper client X Client X Client –software interface to X (Xlib) –assembles the output from Xlib routines into packets for transmission to server

21. X Window Interaction Problems? Interaction Problems? Network Bandwidth is bits per second Network Latency is time to transfer and process data. X Server std system software Client app software Network User Latency (time) Bandwidth (bps) Relation to Model Human Processor?

22. Network Round Trips (NRT) Every mouse move on thumb involves NRT Every 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)

23. Window Events User interacts with input device User interacts with input device –action translated into software events –must distribute events to appropriate window –doesn’t need IPC, use method/procedure call Events have Events have –type –mouse position or character key –the window the event is directed to

24. Input Events Mouse button events Mouse button events –mouse up and down –modifier (shift keys, etc.) –double click (X doesn’t have this  fakes it) Mouse movement events Mouse movement events –implement painting with mouse –mouse drag can “mask off” mouse moves w/o button down Mouse enter and exit events Mouse enter and exit events –e.g. if you entered / exited a button region

25. Implementing Buttons Button mouse enter mouse exit (But using mouse move events would be overkill)

26. Events (cont.) Keyboard events Keyboard events –must translate raw “scan codes” into ASCII Windowing events on window Windowing events on window –creation / destruction –opening / closing –iconifying / deiconifying –selection / deselection –resize –redraw redraw newly exposed portions of the window (rect.)

27. Main Event Loop Main event loop Main event loop Initialization While (not time to quit) { Get next event E Dispatch event E } The meat of the program is in the code that handles the “dispatch” The meat of the program is in the code that handles the “dispatch”

28. Event 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

29. Event 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 ENT Hit the ‘2’ key

30. Event 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

31. Event 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

32. Event 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 ENT Hit the ‘+’ key

33. Event Dispatch 7 8 9 4 5 6 0 + - 1 2 3 = 58 ENT

34. Event Queues Input events are placed in a queue Input events are placed in a queue –Ensures events are processed in order Main event loop removes them from the queue (get_next_event) & dispatches for processing Main event loop removes them from the queue (get_next_event) & dispatches for processing Mouse move (22, 33) Mouse move (40, 30) Mouse down left (45, 34) Mouse up left (46, 35)

35. Event Queues (cont.) Can use event masks to filter unwanted events Can use event masks to filter unwanted events –e.g., filter mouse moves in a forms-based program just get enter/exit events

36. Object-Oriented Event Handling Older methods prone to programmer error Older methods prone to programmer error OO languages more naturally handle passing messages between independent objects OO languages more naturally handle passing messages between independent objects Basis for NeXTStep, Mac App, Visual C++, Java Basis for NeXTStep, Mac App, Visual C++, Java

37. Object-Oriented Event Loop Tool kit defines an application class Tool kit defines an application class –provides a run method which contains event loop –technique used by Visual C++ and MacApp Application myApp; Intialize windows & application data structures Set any special event masks by sending messages to myApp myApp.Run();

38. Dispatching 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

39. Dispatching Events (cont.) Algorithm selects the bottom-most, front- most region in the interactor tree Algorithm selects the bottom-most, front- most region 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 dispatch Top-down event dispatch –events passed to top-most, front-most window –it dispatches to one or more of its children...

40. Event 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 focus Mouse focus –long narrow scrollbar...

41. Simple 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 Callbacks Callbacks –separate things like labels/colors into resources read from files –each kind of widget defines a set of named callbacks which it will invoke

42. Callback Example How do we notify text window to scroll when the scroll bar is moved? How do we notify text window to scroll 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

43. 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

44. Summary Windowing systems Windowing systems –special problems with networked WS Interactor trees Interactor trees Input events Input events Main event loop Main event loop Dispatching events Dispatching events Event focus Event focus Simple event handling Simple event handling