Event Dispatch. Interactor Tree Lightweight vs. Heavyweight Positional Dispatch Focus Dispatch. Event Architecture. A pipeline: Event Capture

Similar documents
Event Dispatch. Interactor Tree Lightweight vs. Heavyweight Positional Dispatch Focus Dispatch. 2.4 Event Dispatch 1

Event Dispatch. Dispatching events to windows and widgets.

Widget Toolkits CS MVC

Events. Dispatch, event-to-code binding. Review: Events Defined 1/17/2014. occurrence.

Widget. Widget is a generic name for parts of an interface that have their own behaviour. e.g., buttons, progress bars, sliders, drop-down

Widgets. Widgets Widget Toolkits. 2.3 Widgets 1

Widgets. Widgets Widget Toolkits. User Interface Widget

Event Dispatch. Review: Events

Widgets. Overview. Widget. Widgets Widget toolkits Lightweight vs. heavyweight widgets Swing Widget Demo

Model-view-controller View hierarchy Observer

We will talk about Alt-Tab from the usability perspective. Think about: - Is it learnable? - Is it efficient? - What about errors and safety?

GUI Components: Part 1

Windows and Events. created originally by Brian Bailey

Input (part 2: input models)

UI Software Organization

Fall UI Design and Implementation 1

Lecture 9: UI Software Architecture. Fall UI Design and Implementation 1

PROGRAMMING DESIGN USING JAVA (ITT 303) Unit 7

Heavyweight with platform-specific widgets. AWT applications were limited to commonfunctionality that existed on all platforms.

CS 4300 Computer Graphics

Fall UI Design and Implementation 1

TYPES OF INTERACTORS Prasun Dewan Department of Computer Science University of North Carolina at Chapel Hill

CS260. UI Toolkits. Björn Hartmann University of California, Berkeley EECS, Computer Science Division Fall 2010

MOBILE COMPUTING 1/20/18. How many of you. CSE 40814/60814 Spring have implemented a command-line user interface?

All the Swing components start with J. The hierarchy diagram is shown below. JComponent is the base class.

GUI Implementation Support

CS11 Java. Fall Lecture 4

WIMP Elements. GUI goo. What is WIMP?

Clip Art and Graphics. Inserting Clip Art. Inserting Other Graphics. Creating Your Own Shapes. Formatting the Shape

GUI Design for Android Applications

Advanced Effects in Java Desktop Applications

The Racket Graphical Interface Toolkit

Course Details. Skills Gained. Who Can Benefit. Prerequisites. View Online URL:

GUI in C++ PV264 Advanced Programming in C++ Nikola Beneš Jan Mrázek Vladimír Štill. Faculty of Informatics, Masaryk University.

Programming Languages and Techniques (CIS120)

CS 349 Midterm Exam Spring 2014

Lecture 19 GUI Events

Lecture 4: UI Software Architecture. Fall UI Design and Implementation 1

Java Concurrency in practice Chapter 9 GUI Applications

CSE 331 Software Design & Implementation

Graphical User Interfaces (GUIs)

WPF and MVVM Study Guides

Superficial the concepts

GUI: Racket Graphical Interface Toolkit

UI Toolkits. HCID 520 User Interface Software & Technology

Introduction to the JAVA UI classes Advanced HCI IAT351

Today s Hall of Fame or Shame example is a feature of Microsoft Office 2007 that gives a preview of what a style command will do to the document

CMSC434. Introduction to Human-Computer Interaction. Week 10 Lecture 16 Mar 29, 2016 Engineering Interfaces II. Jon

GUI Basics and Windowing Systems. Using X Windows as a case study

CSE 331 Software Design & Implementation

Design Pattern: Composite

(Incomplete) History of GUIs

Input: Interaction Techniques

Swing. By Iqtidar Ali

ROUTED EVENTS. Chapter 5 of Pro WPF : By Matthew MacDonald Assist Lect. Wadhah R. Baiee. College of IT Univ. of Babylon

GUI Basics and Windowing Systems

User Interaction. User Interaction. Input devices. Input devices. Input devices GUIs and GUI design Event-driven programming 3D interaction

Designing Interactive Systems II

Interactor Tree. Edith Law & Mike Terry

CS11 Java. Fall Lecture 3

GUI Basics and Windowing Systems. Using X Windows as a case study

BASICS OF GRAPHICAL APPS

Graphical User Interface (GUI)

Output in Window Systems and Toolkits

Borland JBuilder 7 Product Certification. Study Guide

GUI Programming. Chapter. A Fresh Graduate s Guide to Software Development Tools and Technologies

CSE 331 Software Design and Implementation. Lecture 19 GUI Events

Lecture 11: Toolkits. Fall UI Design and Implementation 1

ICS Tutorials: Basic Operations

Cracked IntegralUI Studio for Web all pc software ]

Graphical User Interface (GUI)

Event Driven UIs and Model-View-Controller

Input part 3: Interaction Techniques

Lecture 5: Java Graphics

The Composite Pattern

Chapter 10: Interface Components

Design Document The Disease Outbreaks Team

Design Patterns IV. Alexei Khorev. 1 Structural Patterns. Structural Patterns. 2 Adapter Design Patterns IV. Alexei Khorev. Structural Patterns

Background Information About GTK+ and Related Libraries

Design Patterns IV Structural Design Patterns, 1

Release Date April 24 th 2013

Sri Vidya College of Engineering & Technology

Guile-GNOME: Atk. version , updated 9 December Bill Haneman Marc Mulcahy Padraig O Briain

Tcl/Tk lecture. What is the Wish Interpreter? CIS 410/510 User Interface Programming

CSC207H: Software Design Lecture 11

Event-driven Programming: GUIs

Today s hall of fame or shame candidate is the Domino s Pizza build-your-own-pizza process. You can try it yourself by going to the Domino s website

Android Basics. Android UI Architecture. Android UI 1

Mouse. Mouse Action Location. Image Location

Educational Fusion. Implementing a Production Quality User Interface With JFC

Algorithms: Lecture 10. Chalmers University of Technology

Custom Shapes As Text Frames In Photoshop

Practical WPF. Learn by Working Professionals

Last Lecture. Lecture 26: Design Patterns (part 2) State. Goals of Lecture. Design Patterns

= 3 + (5*4) + (1/2)*(4/2)^2.

COMP 110/401 WINDOWS COMMAND INTERPRETER. Instructor: Prasun Dewan (FB 150,

Introduction. Part I: jquery API 1. Chapter 1: Introduction to jquery 3

Organization of User Interface Software

Leow Wee Kheng CS3249 User Interface Development. Windowing Systems CS3249

UI Toolkits. HCID 520 User Interface Software & Technology

Transcription:

Event Dispatch Interactor Tree Lightweight vs. Heavyweight Positional Dispatch Focus Dispatch 2.4 Event Dispatch 1 Event Architecture A pipeline: - Capture and Queue low-level hardware events - Dispatch events to correct window and widget - Handle event with application code Event Capture Event Queue Event Dispatch Event Handling Hardware events (interrupts) Software events (generic) 2.4 Event Dispatch 2

Event Loop Iterate through event queue, and dispatch event to handler(s) - Low-level mechanism for event dispatch BWS event queue always dispatches to an application window - what window triggered the event - what window has mouse or keyboard focus Final dispatch depends on what manages application-level events: - BWS could dispatch to widget level (heavyweight) - application could manage dispatch (lightweight, e.g. Xlib) - toolkit could dispatch to widgets (lightweight, JVM/Swing) 2.4 Event Dispatch 3 Interactor Tree 2D layout of widgets forms a hierarchy Container widgets are ancestors of simple widgets Dispatching an event is done by traversing the interactor tree 2.4 Event Dispatch 4

Lightweight vs. Heavyweight Widgets 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 - BWS can dispatch events to a specific widget - e.g. nested X Windows, Java s AWT, HTML forms, Windows MFC Lightweight widgets - The widget toolkit draws its own widgets and is responsible for mapping incoming events to widgets - BWS/OS dispatches to the window (NOT the widget) - e.g. Java Swing, JQuery UI, Windows WPF 2.4 Event Dispatch 5 multiwindow.cpp (xlib Heavyweight Widgets) // true: window is like heavyweight widget // false: window is just another window bool issibling = false; window like heavyweight widget window just another window 2.4 Event Dispatch 6

Heavyweight Dispatch click on button BWS dispatch to button 2.4 Event Dispatch 7 Lightweight Dispatch click on button BWS dispatch to window toolkit or application dispatches to button toolkit or application 2.4 Event Dispatch 8

Positional Dispatch Strategy: send input to widget under mouse cursor Issue: many widgets overlap, which one receives event? Two methods: - Bottom-up - Top-down 2.4 Event Dispatch 9 Bottom-up Positional Dispatch Lowest-level node has first chance to handle event Event is dispatched to leaf node widget in the UI tree that contains the mouse cursor The leaf node widget can either: 1. handle the event itself 2. pass the event to its parent (who can process it or send to its parent...) 10

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. 2.4 Event Dispatch 11 Top-down Positional Dispatch Highest-level node has first chance to handle event Event is dispatched to widget in the highest level node in the UI tree that contains the mouse cursor. The top node widget can either: 1. handle the event itself 2. pass the event to the child under the mouse (who can process it or send to its child...) 12

Top-down vs. Bottom-up Dispatch When do these behave the same way? Advantages of top-down? disabled container widget policy 13 Positional Dispatch Limitations Positional dispatch can lead to odd behaviour: - Send keystrokes to scrollbar if mouse over the scrollbar? - Mouse drag starts in a scrollbar, but then moves outside the scrollbar: send the events to the adjacent widget? - Mouse press event in one button widget but release is in another: each button gets one of the events? Sometimes position isn t enough, also need to consider which widget is in focus 14

Focus Dispatch Events dispatched to widget regardless of mouse cursor position Needed for all keyboard and some mouse events: - Keyboard focus: Click on text field, move cursor off, start typing - Mouse focus: Mouse down on button, move off, mouse up also called mouse capture Maximum one keyboard focus and one mouse focus - why? Need to gain and lose focus at appropriate times - Transfer focus on mouse down ( capture ) - Transfer focus when TAB key is pressed 2.4 Event Dispatch 15 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. 2.4 Event Dispatch 16

Accelerator Key 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 17 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 Non-input events may go elsewhere - Paint/damage events not necessarily associated with widget which receives input events (e.g. slider events ultimately effect other widgets to be repainted) 18