THESIS DEFENSE: Stephen Oney
When
-
Where
NSH 3305
Description
Expressing Interactivity with States and Constraints
Stephen Oney
COMMITTEE
Brad Myers (Chair)
Joel Brandt (Adobe Research)
Scott Hudson
John Zimmerman
DOCUMENT AND MATERIALS
http://thesis.from.so/
ABSTRACT
A Graphical User Interface (GUI) is defined by its appearance and its behavior. A GUI's behavior defines how it reacts to user events such as mouse, keyboard, or touchscreen presses. Although many tools are effective in enabling designers to specify a GUI's appearance, defining a custom behavior is difficult and error-prone. Many of the difficulties developers face in defining GUI behaviors are the result of their reactive nature. The order in which GUI code is executed depends upon the order in which it receives external inputs.
Most widely used user interface programming frameworks use an event-callback model, where developers define GUI behavior by defining callbacks—sequences of low-level actions—to take in reaction to user and system events. However, the event-callback model for user-interface development has several problems, many of which have been pointed out long before I wrote this dissertation. First, it is disorganized: the location and order of event-callback code often has little correspondence with the order in which it will be executed. Second, it divides GUI code in a way that encourages writing interdependent code to keep the interface in a consistent state. This is because maintaining a consistent state requires referencing and modifying the same state variables across callbacks in event-callback code.
In this dissertation, I will introduce a new framework for defining GUI behavior that constraints and state machines. Constraints allow developers to define relationships between interface elements that are automatically maintained by the system. State machines allow developers to specify more nuanced constraints and allow the GUI's appearance and behavior to vary by state. I created two tools using this framework: a library for Web developers (ConstraintJS) and an interactive graphical language (InterState).
InterState introduces a visual notation and live editor to clearly represent how states and constraints combine to define GUI behavior. An evaluation of InterState showed that its computational model, visual notation, and editor were effective in allowing developers to define GUI behavior compared to conventional event-callback code. InterState also introduces extensions to the state-constraint framework to allow developers to easily re-use behaviors and primitives for authoring multi-touch gestures.