Events Events and the Event Loop Animation Double Buffering 1 CS - - PowerPoint PPT Presentation

Events

Events and the Event Loop Animation Double Buffering

CS 349 - Events 1

Challenge: Human vs. System

CS 349 - Events 2

User Interactive System

express present perceive translate seconds milliseconds or faster

Objective

• User interface architectures need to be able to

accept input from real-world devices, and map to actions within a system.

• Support the transformation of input into

commands (e.g. “Ctrl” key)

• We want a general, reusable architecture that

supports multiple devices.

3 CS 349 - Events

Review: Events Event-Driven Programming

• “Event-driven programming is a paradigm in

which the flow of the program is determined by events such as user actions (mouse clicks, key presses), sensor outputs, or messages from

• ther programs/threads.” -- Wikipedia

An event is a message to notify an application that something happened. Examples include:

• Keyboard (key press, key release)
• Pointer events (mouse move, button press)
• Input focus (gained, lost)
• Sensor or timer events (time elapsed)

4 CS 349 - Events

Role of the BWS, WM

• 1. Collect event information
• 2. Put relevant information in a known structure
• 3. Order the events by time
• 4. Decide which application and window should

get the event

• 5. Deliver the event

CS 349 - Events 5 Hardware Base Window System WinMgr App Keyboard mouse Display

Some events come from the BWS (user- driven via hardware); some from the window manager.

Role of the Programmer

• Indicate what events you are interested in to

BWS/WM, to ensure that events are delivered.

• Write code to:
• 1. Register to receive events
• 2. Receive and interpret those types of events
• 3. Update program content based on event
• 4. Redraw the display (provide feedback) to

communicate to user what changed

• In modern languages (Java, C#, Javascript) the

process of registering for events and handling events is simplified. – Java: Listener model – C#: Delegate model – Javascript: Looks like a Java/C# hybrid, but is not

• http://www.quirksmode.org/js/introevents.html

CS 349 - Events 6

Event Dispatch

Dispatching events to windows and widgets.

CS 349 - Events 12

Event Architecture

13

Event capture, processing and dispatch.

Event Capture Event Dispatch Hardware events (interrupts) Software events (generic)

The event dispatch stage includes:

• 1. Event dispatch: Getting events to correct widget
• 2. Event handling: Running code for an event
• 3. Notifying view and windowing system: Model-

View-Controller, and view notification.

CS 349 - Events

Event Loop

• The event loop is the primary mechanism for

event dispatch within an application. – The event loop can be managed by application (XLib), or the toolkit (JVM). – The event loop iterate through all events in the event queue, and pushes them in order to the appropriate application. – The application needs to determine which component should process the event. – Widgets (i.e. components) are often the final target of events dispatched from the event loop

• Once delivered to a widget, it still needs to

interpret what any of the input means in the proper context and react appropriately.

14 CS 349 - Events

Widget Layout

• In complex applications, widgets are often

laid out in a hierarchy –We call this hierarchy an interactor tree. –Container classes and low-level components are nested together. –Dispatching an event to the correct widget (that can handle the event) means traversing this tree.

15

• Question:

–Which window? –Which widget receives it?

CS 349 - Events

Managing Graphical Complexity

16

PaintDemo / PaintDemo.java

CS 349 - Events

Lightweight vs. Heavyweight

Heavyweight widgets

• Widget toolkit wraps native-OS widgets
• BWS/OS provides a hierarchical “windowing” system

for all widgets across all applications, and treats a widget essentially as a window

• This allows the BWS to dispatch events to a specific

widget (and not just the top-level window).

• Examples: nested X Windows, Java’s AWT, standard

HTML form widgets, Windows MFC Lightweight widgets

• The widget toolkit draws its own widgets and is

responsible for mapping incoming events to widgets

• BWS/OS provides a top-level window only, and can
• nly dispatch to the window (NOT the widget)
• Examples: Java Swing, JQuery UI, Windows WPF

17 CS 349 - Events

X11 Example: Heavyweight Widgets

CS 349 - Events 18 xInfo1.display = display; xInfo1.screen= screen; initX(argc, argv, xInfo1, DefaultRootWindow( display) 100, 100, 800, 600); xInfo2.display = display; xInfo2.screen= screen; initX(argc, argv, xInfo2, DefaultRootWindow( display) 50, 50, 300, 200); xInfo1.display = display; xInfo1.screen= screen; initX(argc, argv, xInfo1, DefaultRootWindow( display), 100, 100, 800, 600); xInfo2.display = display; xInfo2.screen= screen; initX(argc, argv, xInfo2, xInfo1.window, 50, 50, 300, 200);

Example of a window being embedded as a widget. The BWS can dispatch events directly to a widget in a heavyweight toolkit.

Lightweight: Window Dispatch

CS 349 - Events 19

BWS needs to select the appropriate application window for dispatch, then the window needs to send to a widget.

Positional Dispatch

• Send input to the

widget under mouse cursor.

• The front-most

widget under the cursor should receive the event.

20 CS 349 - Events

Positional Dispatch

• Widgets can overlap, so how do

we determine the appropriate target widget? Two methods: – Bottom-up positional dispatch – Top-down positional dispatch

Bottom-up Positional Dispatch

• Bottom-Up Positional Dispatch

– Event is first routed to leaf node widget in the interactor tree corresponding to location of mouse cursor – Leaf node has the first opportunity to act on that event – The leaf node widget can either:

• 1. process the event itself, and/or
• 2. pass the event to its parent

(who can process it or send to its parent...)

21 CS 349 - Events

Passing to Parent

• Why would a widget pass an event to its parent?

– Example: A palette of colour swatches may implement the colours as buttons. But palette needs to track the currently selected colour. Easiest if the palette deals with the events.

CS 349 - Events 22

Top-down Positional Dispatch

• Top-Down Positional Dispatch

– Event is routed to widget in the highest-level node in the interactor tree that contains the mouse cursor

• Can process the event itself, and/or
• Can pass it on to a child component

– Key idea is that highest-level node has first chance at acting on the event – Uses:

• Can create policies enforced by the parent

– For example, stopping events if all children are disabled

• Supports relatively easy logging of events for

later replay

23 CS 349 - Events

Top-down vs. Bottom-up Dispatch

• The toolkit determines the type of dispatch used

(not the programmer!) – To end-user, no discernable difference in how the interface behaves – Just slightly different implementations

24

disabled container widget policy

CS 349 - Events

Positional Dispatch Limitations

• Positional dispatch can lead to odd behavior:
• e.g. we normally send keystrokes to scrollbar if

the mouse over the scrollbar – What if the mouse-drag starts in a scrollbar, but then moves outside the scrollbar: do we continue sending the events to the scrollbar? To the adjacent widget instead? – What if the mouse-press event occurs over one button but the release is over another widget: does each widget gets one of the events?

• Sometimes position isn’t enough, also need to

consider which widget is “in focus”

25 CS 349 - Events

Focus Dispatch

• Alternate & complementary dispatch mechanism.

– Events dispatched to widget that has focus, regardless of mouse cursor position

• Needed for all keyboard and some mouse events:

– Keyboard focus: Click on text field, move cursor

• ff, start typing

– Mouse focus: Mouse down on button, move off, mouse up … also called “mouse capture”

• Maximum one keyboard focus and one mouse focus
• Need to gain and lose focus at appropriate times

– Transfer focus on mouse down – Transfer focus on a tab

26 CS 349 - Events

Focus Dispatch Needs Positional Dispatch

• But if a widget has focus, it should not

receive every event: – mouse down on another suitable widget should change focus

• Often helpful to have an explicit focus

manager in a container widget to manage which widget has the focus.

27 CS 349 - Events

Accelerator Key Dispatch

• Accelerator keys can by pass focus dispatch

– Keyboard events dispatched based on which keys are pressed – Register special keyboard accelerators with specific commands

• commands are often the target of menu item

events – The GUI toolkit intercepts accelerators and forwards to the appropriate command handler

28 CS 349 - Events

Toolkit Summary

• BWS and widget cooperate to dispatch events.

– Heavyweight toolkits:

• BWS has visibility into all widgets in the

application. – BWS can dispatch top-down (application window) or bottom-up (directly to widget). – Lightweight toolkits:

• BWS only has visibility to the application

window. – BWS can dispatch top-down only (i.e. to the application window). – Toolkit dispatches to the widget. » In Java, the JVM manages dispatch.

29 CS 349 - Events

Dispatch Summary

• Mouse-down events are almost always

positional: dispatched to widget under cursor (top-down or bottom-up)

• Other mouse and keyboard events go to widget

in focus

• Positional and focus dispatch work together!

30 CS 349 - Events

Event Handling

How to manage event-code binding

• Switch Statement Binding
• Inheritance Binding
• Event Interfaces & Listeners
• Delegate Binding

CS 349 - Events 31

Event Dispatch vs. Handling

• Event Dispatch phase addresses:

– Which window receives an event? – Which widget processes it?

• Positional dispatch

– Bottom-up dispatch – Top-down dispatch

• Focus dispatch
• Event Handling attempts to answer:

– After dispatch to a widget, how do we bind an event to code?

32 CS 349 - Events

Event-to-Code Binding Key Question: How do we design our GUI architecture to enable application logic to interpret events once they’ve arrived at the widget?

• Design Goals:

– Easy to understand (clear connection between each event and code that will execute) – Easy to implement (binding paradigm or API) – Easy to debug (how did this event get here?) – Good performance

33 CS 349 - Events

Code-Binding Mechanisms

• Event Loop & Switch Statement Binding
• Inheritance Binding
• Event Interfaces & Listeners
• Delegate Binding

34 CS 349 - Events

Event Loop and Switch Statement Binding (X11)

• All application events are consumed in one

event loop (not by the widgets themselves)

• Outer switch statement selects window and

inner switch selects code to handle the event

• Used in Xlib, Apple System 7, and, until

recently, Blender

35

while( true ) { XNextEvent(display, &event); // wait next event switch(event.type) { case Expose: // ... handle expose event ... cout << event.xexpose.count << endl; break; case ButtonPress: // ... handle button press event ... cout << event.xbutton.x << endl; break; ...

CS 349 - Events

WindowProc Binding (MS Windows)

• Each window registers a WindowProc function

(Window Procedure) which is called each time an event is dispatched

• The WindowProc uses a switch statement to

identify each event that it needs to handle. – There are over 100 standard events…

LRESULT CALLBACK WindowProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) { switch (uMsg) { case WM_SIZE: { int width = LOWORD(lParam); // low-order word. int height = HIWORD(lParam); // high-order word. // Respond to the message: OnSize(hwnd, (UINT)wParam, width, height); } break;

CS 349 - Events 36

Code-Binding Mechanisms

• Event Loop & Switch Statement Binding
• Inheritance Binding
• Event Interfaces & Listeners
• Delegate Binding

37 CS 349 - Events

Java Event Handling

• Java simplifies much of event handling

– Events are transmitted to onscreen objects without programmer intervention – The event loop is hidden and managed by the JVM (i.e. you don’t need to explicitly manage it) – To handle events, tell onscreen objects what you’re interested in and what to do

CS 349 - Events 38

Inheritance Binding (Java 1.0, OSX)

• Event is dispatched to an Object-Oriented (OO)

widget – OO widget inherits from a base widget class with all event handling methods defined a priori

• nMousePress, onMouseMove, onKeyPress, etc

– The widget overrides methods for events it wishes to handle. e.g. Java 1.0, NeXT, OSX

• Each method handles multiple related events

CS 349 - Events 39

Inheritance Problems

• 1. Each widget handles its own events, or the widget

container has to check what widget the event is meant for

• 2. Multiple event types are processed through each

event method: complex and error-prone (just a switch statement again)

• 3. No filtering of events: performance issues (e.g. with

frequent events, like mouse-move events)

• 4. It doesn’t scale well: How to add new events?

– e.g. penButtonPress, touchGesture, ….

• 5. Muddies separation between GUI and application

logic: event handling application code is in the inherited widget – Take-home point: Use inheritance for extending class functionality, not for binding events

41 CS 349 - Events

Code-Binding Mechanisms

• Event Loop & Switch Statement Binding
• Inheritance Binding
• Event Interfaces & Listeners
• Delegate Binding

42 CS 349 - Events

Event Interfaces

• Rather than subclass widget, define an interface

for event handling

• Here, an interface refers to a set of functions or

method signatures for handling specific types of events

• For example, in Java, can define an interface for

handling mouse events

• Can then create a class that implements that

interface by implementing methods for handling these mouse events

CS 349 - Events 43

Listener Interface Binding (Java)

• Widget object implements event “listener”

interfaces – e.g. MouseListener, MouseMotionListener, KeyListener, …

• When event is dispatched to widget, the relevant

listener method is called

– mousePressed, mouseMoved, …

44 CS 349 - Events

CS 349 - Events 45

public class MyAwesomePanel extends JPanel implements MouseMotionListener { MyAwesomePanel() { } public void mouseDragged(MouseEvent e) { x = e.getX(); y = e.getY(); // Do everything else here // Assume that we need to repaint afterwards repaint(); } public void mouseMoved(MouseEvent e) { // Empty body, forced to implement b/c of interface } }

Interface Better, But Still Problems Improvements: – Each event type assigned to an event method – Events are filtered: only sent to object which implements interface – Easy to scale to new events: add new interfaces

e.g. PenInputListener, TouchGestureListener

Problems:

• 1. Each widget handles its own events, or widget

container has to check what widget the event is meant for (i.e. no mediator)

• 2. Muddies separation between GUI and

application logic: event handling application code is in inherited widget

CS 349 - Events 46

Listener Object Binding (Java 1.1)

• Widget object is associated with one or more

event listener objects (which implement an event binding interface) – e.g. MouseListener, MouseMotionListener, KeyListener, …

• When event is dispatched to a widget, the

relevant listener object processes the event with implemented method: mousePressed, mouseReleased, …

• application logic and event handling are

decoupled

47 CS 349 - Events

CS 349 - Events 48

public class MyImportantPanel extends JPanel { MyImportantPanel() { this.addMouseMotionListener(new MyPanelListener()); } // inner class listener class MyPanelListener implements MouseMotionListener { public void mouseDragged(MouseEvent e) { x = e.getX(); y = e.getY(); // Make some meaningful change to app repaint(); } public void mouseMoved(MouseEvent e) { /* no-op */ }

MouseListener

Listener Adapter Pattern

• Many listener interfaces have only a single

method – e.g. ActionListener has only actionPerformed

• Other listener interfaces have several methods

– e.g. WindowListener has 7 methods, including

windowActivated, windowClosed, windowClosing, …

• Typically interested in only a few of these
• methods. Leads to lots of “boilerplate” code with

no-op methods, e.g. void windowClosed(WindowEvent e) { }

• Each listener with multiple methods has an

Adapter class with no-op methods. Simply extend the adapter, overriding only the methods

• f interest.

49 CS 349 - Events

CS 349 - Events 50

public class AdapterEvents extends JPanel { AdapterEvents() { this.addMouseMotionListener(new MyListener()); } class MyListener extends MouseMotionAdapter { public void mouseDragged(MouseEvent e) { x = e.getX(); y = e.getY(); // Do something meaningful here repaint(); } }

MouseMotionAdapter

Code-Binding Mechanisms

• Event Loop & Switch Statement Binding
• Inheritance Binding
• Event Interfaces & Listeners
• Delegate Binding

55 CS 349 - Events

Delegate Binding (.NET)

• Interface architecture can be a bit heavyweight
• Can instead have something closer to a simple

function callback (a function called when a specific event occurs)

• Delegates in Microsoft’s .NET are like a C/C++

function pointer for methods, but they: – Are object oriented – Are completely type checked – Are more secure – Support multicasting (able to “point” to more than one method)

• Using delegates is a way to broadcast and

subscribe to events

• .NET has special delegates called “events”

CS 349 - Events 56

Using Delegates

• 1. Declare a delegate using a method signature

public delegate void Del(string m);

• 2. Declare a delegate object

Del handler;

• 3. Instantiate the delegate with a method

// method to delegate (in MyClass) public static void MyMethod(string m) { System.Console.WriteLine(m); } handler = myClassObject.MyMethod;

• 4. Invoke the delegate

handler(“Hello World”);

57 CS 349 - Events

Multicasting

• Instantiate more than one method for a delegate
• bject

handler = MyMethod1 + MyMethod2; handler += MyMethod3;

• Invoke the delegate, calling all the methods

handler(“Hello World”);

• Remove method from a delegate object

handler -= MyMethod1;

• What about this?

handler = MyMethod4;

CS 349 - Events 58

Events in .NET

• Events are delegates that are designed for event

handling – Delegates with restricted access – Declare an event object instead of a delegate

• bject:

public delegate void Del(string message); event Del handler;

• “event” keyword allows enclosing class to use

delegate as normal, but outside code can only use the -= and += features of the delegate

• Gives enclosing class exclusive control over the

delegate

59 CS 349 - Events

Events for High Frequency Input

• Pen and touch generate a higher number and

frequency of events than normal hardware

– pen motion input can be 125Hz or higher – multi-touch hardware can generate many simultaneous contact/move events for all fingers – pen sensor is much higher resolution than display

• This is often faster than an application can handle it!
• Not all events are guaranteed to be delivered

individually

– All penDown and penUp, but may skip some penMove events – Event object includes array of “skipped” penMove positions – Android does this for touch input

• For things like pen input, use other methods to grab

these events because of their high rate of generation

62 CS 349 - Events

63

Surface Pro 4 vs iPad Pro pencil tracking https://www.youtube.com/watch?v=pK41eAYNLu4

CS 349 - Events

Event Handling in Java

Handling events using Listeners or Adapters.

CS 349 - Events 64

Java Listener Model

65

• Java has interfaces specialized by event type.

– Each interface lists the methods that are needed to support that device’s events

• To use them, write a class that implements this interface,

and override the methods for events you care about.

• Because it’s an interface, you have to override all
• f these methods – even for events you don’t care

about!

CS 349 - Implementing GUIs

Using Listeners

What’s wrong with this approach?

BasicForm2.java

66 CS 349 - Implementing GUIs

Adapters vs. Listeners

• Java also has adapters, which are base classes

with empty listeners. – Extend the adapter and override the event handlers that you care about; avoids bloat.

What’s wrong with this approach?

BasicForm3.java

67 CS 349 - Implementing GUIs

Anonymous Inner Classes

• We really, really don’t want to create custom

adapters for every component. – Solution? Anonymous inner class.

68

BasicForm4.java

CS 349 - Implementing GUIs

Swing UI Thread

• Swing needs to make sure that all events are

handled on the Event Dispatch thread.

• If you just “run” your application from main, as we’ve

been doing in the examples, you risk the main program accepting input before the UI is instantiated! – Use invokeLater() to safely create the UI. – We’ll discuss in greater detail later in the course.

69 CS 349 - Implementing GUIs

Summary

• Events (structure, selecting)
• Event loops (timing)
• Event Dispatch
• Event Handling
• Handling Events in Java

CS 349 - Events 70