Events Event-driven programming Event loop Event dispatch Event - PowerPoint PPT Presentation

Events Event-driven programming Event loop Event dispatch Event handling

Event Driven Programming Interactive System User perceive present milliseconds seconds or faster translat express e Event-driven programming is a programming paradigm that bases program execution flow on events. These can represent user actions or other triggers in the system. 2

Event  English: - An observable occurrence, often extraordinary occurrence  User Interface Architecture: - An event is a a message to notify an application that something happened - A message of interest to an interface.  Events can be initiated by a user e.g. mouse, or the system e.g. timer  Examples ( exact event name will vary by toolkit): - Keyboard (key press, key release) - Pointer Events (button press, button release, mouse move) - Window crossing (mouse enter, mouse leave) - Input focus (focus gained, focus lost) - Window events (window exposed, window destroy, window minimize) - Timer events (tick) 3

Why Event Driven Programming? The system is designed to be responsive to events. This allows us to prioritize user-initiated actions, and carefully prioritize work while remaining responsive to a user.  Foreground Events - Events initiated by the user - Created as a result of the user interacting with the user interface  Background Events - Events generated by the system - May be received and processed by the user interface. 4

What does an event look like?  Events are just messages representing something of interest.  JavaFX has a rich Event class, with several specific event types.  All event classes include the following fields: - EventType Type of the event that occurred e.g. KEY_EVENT - Source Origin of the event (previous node in the scene graph) - Target Node on which the event occurred (for user events) - Consumed Whether this event has been processed  Events also include fields specific to their subtype. - e.g. MouseEvent will contain a Point representing the mouse coordinates. 5

Event Subclasses The following event subclasses are commonly used.  MouseEvent − This is an input event that occurs when a mouse is manipulated. It includes actions like mouse clicked, mouse pressed, mouse released, mouse moved, mouse entered target, mouse exited target, etc.  KeyEvent − This is an input event that indicates the key stroke occurred on a node. This event includes actions like key pressed, key released and key typed.  DragEvent − This is an input event which occurs when the mouse is dragged. It includes actions like drag entered, drag dropped, drag entered target, drag exited target, drag over, etc.  WindowEvent − This is an event related to window showing/hiding actions. It includes actions like window hiding, window shown, window hidden, window showing, etc. https://www.tutorialspoint.com/javafx/javafx_event_handling.htm 6

KeyEventDemo.java MouseEvents.java 7

Java Event Type Hierarchy 8

How does the windowing system manage events? The Windowing System needs to package events and pass them to the appropriate application toolkit (e.g. as Java events). It performs these steps: Collect event information from user action, or underlying hardware 1. Put relevant information in a known event structure 2. Order the events, by time, in a queue 3. Deliver the events from the queue to the correct application 4. 9

Event Architecture This can be modelled as a pipeline:  Capture and Queue low-level hardware events,  Dispatch events to the correct window, and  Handle each event within the application Event Event Event Event Capture Queue Dispatch Handling 10

Event Loop The windowing system uses an event loop to continuously check for new events.  It iterates through the system event queue, and dispatches events to the correct application.  This can be either the application which triggered the event, or the window in the foreground that is intercepting events. // windowing system event loop while get next event determine which window gets the event dispatch event to the window loop 11

Event Loop The application will sometimes have its own event loop and secondary event queue, to accumulate events until it is ready to handle them.  e.g. XWindows need to be written to pull events from this local event queue. // XWindows application event loop while get next event from windowing system handle the event: if the event was a quit message exit the loop else do something based on the type of event draw to the screen loop 12

Xwindows Event Loop eventloop.min.cpp // select which events to monitor XSelectInput(dis, win, PointerMotionMask | KeyPressMask); ... XEvent event; // save the event here while(true) { // loop until we explicitly stop XNextEvent( display, &event ); // block waiting for an event switch( event.type ) { // one event class (unusual!) case MotionNotify: // handle mouse movement event // handle here … break; case KeyPress: // handle key press event // handle here … exit(0); // exit event loop break; } } 13

Java Event Loop The Windowing System delivers to the application, then the JVM takes over. Java applications rely on the JVM to queue, manage and dispatch events for each running application. This is the point The JRE has an event-handling thread that at which events • pulls events from the JVM event queue are handed off • formats them into Java events, and to the • passes them to the application code to process. application // JRE event loop (implicit) while get next event handle the event: package as Java event pass to the application (to do something with it) loop 14

Event Dispatch View Hierarchy Lightweight vs. Heavyweight Positional Dispatch Focus Dispatch

Event Dispatch Let’s talk about events being delivered within the application window. We want the event to eventually get dispatched to the Node that is responsible for initiating the event.  e.g. if you click a button on a form, we want that button to receive and process the MouseEvent .  e.g. if you build a drawing app and click on a circle to select it, the circle class should receive the corresponding MouseEvent. If you then drag it, it should receive anotehr MouseEvent representing the drag itself. 16

View Hierarchy  2D layout of widgets forms scene graph.  Container widgets are the ancestors of simple widgets  Dispatching an event to a specific widget is done by traversing this hierarchy 17

Heavyweight Widgets  Underlying platform provides widgets and hierarchical “windowing” system  Widget toolkit wraps platform widgets for programming language  The platform (ex. BWS) can dispatch events to a specific widget  Examples: Java’s AWT, OSX Cocoa, Windows MFC, nested X Windows, standard HTML form widgets Advantages  Events generated by user are passed directly to components by the Platform  Preserves Platform look and feel Disadvantages  Platform-specific programming  Multi- platform toolkits tend to be defined as the “lowest - common set” of components 18

Heavyweight Dispatch WS dispatch to button click on button Most toolkits don’t work like this. JavaFX is lightweight (see next slides!) 19

Lightweight Widgets  OS provides a top level window  Widget toolkit draws its own widgets in the window.  Toolkit is responsible for mapping events to their corresponding widgets  Examples: Java Swing, JQuery UI, Windows WPF Advantages  Can guarantee identical look-and-feel across platforms.  Can guarantee consistent widget set on all platforms.  Can implement very light/optimized widgets. Disadvantages  Concerns that they appear “non - native”.  Concerns about performance with extra layer of abstraction. 20

Lightweight Dispatch BWS dispatch to window toolkit or application click on dispatches button to button This is a more modern approach, that works with self-contained toolkits – like Java FX. 21

Dispatching Events in Java FX The event dispatch process contains the following steps: - Target selection Determine which node should receive the event - Route construction Calculate a path through graph to this node - Event capturing Traverse the path DOWN from Root to Node - Event bubbling Traverse the path back UP from Node to Root Scene graph. Clicking on Triangle will generate a MouseClicked event that will need to be dispatched to the triangle instance to handle. 22

Target & Route Selection Target Selection is determined by the type of Event.  For key events , the target is the node that has focus.  For mouse events , the target is the node at the location of the cursor.  For continuous gesture events that are generated by a gesture on a touch screen, the target is the node at the center point of all touches at the beginning of the gesture.  For swipe events that are generated by a swipe on a touch screen, the target is the node at the center of the entire path of all of the fingers.  For touch events , the default target for each touch point is the node at the location first pressed. Route Selection is the path to a particular Node through the tree.  Stored as chain, using the Source and Target fields of the event. 23