research-article

ConstraintJS: programming interactive behaviors for the web by integrating constraints and states

Authors:

Joel BrandtAuthors Info & Claims

UIST '12: Proceedings of the 25th annual ACM symposium on User interface software and technology

Pages 229 - 238

https://doi.org/10.1145/2380116.2380146

Published: 07 October 2012 Publication History

Abstract

Interactive behaviors in GUIs are often described in terms of states, transitions, and constraints, where the constraints only hold in certain states. These constraints maintain relationships among objects, control the graphical layout, and link the user interface to an underlying data model. However, no existing Web implementation technology provides direct support for all of these, so the code for maintaining constraints and tracking state may end up spread across multiple languages and libraries. In this paper we describe ConstraintJS, a system that integrates constraints and finite-state machines (FSMs) with Web languages. A key role for the FSMs is to enable and disable constraints based on the interface's current mode, making it possible to write constraints that sometimes hold. We illustrate that constraints combined with FSMs can be a clearer way of defining many interactive behaviors with a series of examples.

Supplementary Material

JPG File (paper_0236-file3.jpg)

Download
7.03 KB

suppl.mov (paper_0236-file3.m4v)

Supplemental video

Download
27.78 MB

References

[1]

Appert, C. and Beaudouin-Lafon, M. SwingStates: Adding state machines to Java and the Swing toolkit. Software: Practice and Experience 38, 11 (2008), 1149--1182.

Digital Library

[2]

Badros, G. J., Marriott, K., Borning, A., and Stuckey, P. Constraint Cascading Style Sheets for the Web. UIST, (1999), 73--82.

Digital Library

[3]

Blanch, R., Beaudouin-lafon, M., and Futurs, I. Programming Rich Interactions using the Hierarchical State Machine Toolkit. AVI, (2006), 51--58.

Digital Library

[4]

Bostock, M., Ogievetsky, V., and Heer, J. D³: Data-Driven Documents. Visualization and Computer Graphics 17, 12 (2011), 2301--9.

Digital Library

[5]

Freeman-Benson, B. Kaleidoscope: Mixing Objects, Constraints, and Imperative Programming. OOPSLA, (1990), 77--88.

Digital Library

[6]

Grossman, T. and Balakrishnan, R. The Bubble Cursor: Enhancing Target Acquisition by Dynamic Resizing of the Cursor's Activation Area. CHI, (2005), 281--290.

Digital Library

[7]

Heer, J. and Bostock, M. Declarative language design for interactive visualization. Visualization and Computer Graphics 16, 6 (2010), 1149--56.

Digital Library

[8]

Kin, K., Hartmann, B., DeRose, T., and Agrawala, M. Proton: Multitouch Gestures as Regular Expressions. CHI, (2012).

Digital Library

[9]

Letondal, C., Chatty, S., Phillips, W. G., and Andre, F. Usability requirements for interaction-oriented development tools. PPIG, (2010), 12--26.

[10]

Meyerovich, L., Guha, A., and Baskin, J. Flapjax: A Programming Language for Ajax Applications. OOPSLA, (2009), 1--20.

Digital Library

[11]

Myers, B., Hudson, S. E., and Pausch, R. Past, Present, and Future of User Interface Software Tools. TOCHI 7, 1 (2000), 3--28.

Digital Library

[12]

Myers, B., Park, S. Y., Nakano, Y., Mueller, G., and Ko, A. How Designers Design and Program Interactive Behaviors. VL/HCC, (2008), 177--184.

Digital Library

[13]

Myers, B. Separating Application Code from Toolkits: Eliminating the Spaghetti of Callbacks. UIST, (1991), 211--220.

Digital Library

[14]

Olsen, D. R. User Interface Management Systems: Models and Algorithms. Morgan Kaufmann, San Mateo, CA, 1992.

Digital Library

[15]

Sannella, M. and Borning, A. Multi-Garnet: Integrating Multi-Way Constraints with Garnet. UW Technical Report, (1992).

[16]

Sannella, M. SkyBlue: A Multi-Way Local Propagation Constraint Solver for User Interface Construction. UIST, (1994), 137--146.

Digital Library

[17]

Vander Zanden, B. T., Myers, B. A., Giuse, D. A., and Szekely, P. Integrating Pointer Variables into One-Way Constraint Models. TOCHI l, 2 (1994), 161--213.

Digital Library

[18]

Vander Zanden, B. T., Richard, H., Myers, B. A., et al. Lessons Learned About One-Way, Dataflow Constraints in the Garnet and Amulet Graphical Toolkits. TOPLAS 23, 6 (2001), 776--796.

Digital Library

[19]

Wingrave, C. A., Laviola Jr, J. J., and Bowman, D. A. A natural, tiered and executable UIDL for 3D user interfaces based on Concept-Oriented Design. TOCHI 16, 4 (2009), 21.

Digital Library

[20]

Ember. http://emberjs.com/.

[21]

Backbone. http://documentcloud.github.com/backbone/.

[22]

KnockoutJS. http://knockoutjs.com/.

[23]

Handlebars.JS. http://handlebarsjs.com/.

[24]

Adobe Flex. http://www.adobe.com/products/flex.html.

[25]

Tangle. http://worrydream.com/Tangle/.

Cited By

Myers B(2024)Pick, Click, Flick!undefinedOnline publication date: 14-Mar-2024
Blouin AJezequel J(2022)Interacto: A Modern User Interaction Processing ModelIEEE Transactions on Software Engineering10.1109/TSE.2021.308332148:9(3206-3226)Online publication date: 1-Sep-2022
Niyazov AMellado NBarthe LSerrano M(2021)Dynamic DecalsProceedings of the ACM on Human-Computer Interaction10.1145/34885385:ISS(1-27)Online publication date: 5-Nov-2021
Show More Cited By

Index Terms

ConstraintJS: programming interactive behaviors for the web by integrating constraints and states
1. Human-centered computing
  1. Human computer interaction (HCI)

Recommendations

Skyblue: a multi-way local propagation constraint solver for user interface construction
UIST '94: Proceedings of the 7th annual ACM symposium on User interface software and technology

Many user interface toolkits use constraint solvers to maintain geometric relationships between graphic objects, or to connect the graphics to the application data structures. One efficient and flexible technique for maintaining constraints is multi-way ...
Constraint Hierarchies as Semiring-Based CSPs
ICTAI '09: Proceedings of the 2009 21st IEEE International Conference on Tools with Artificial Intelligence

Constraints provide an effective means for the high-level modeling and reasoning of various problems. In particular, soft constraints are useful since they treat over-constrained problems that naturally arise in real-life applications. Therefore, ...
Description and evaluation of a generic design to integrate CLP and tabled execution
PPDP '16: Proceedings of the 18th International Symposium on Principles and Practice of Declarative Programming

Logic programming systems with tabling and constraints (TCLP, tabled constraint logic programming) have been shown to be more expressive and in some cases more efficient than those featuring only either tabling or constraints. Previous implementations ...

Comments

Information & Contributors

Information

Published In

cover image ACM Conferences

UIST '12: Proceedings of the 25th annual ACM symposium on User interface software and technology

October 2012

608 pages

ISBN:9781450315807

DOI:10.1145/2380116

General Chair:
Rob Miller
MIT CSAIL, USA
,
Program Chairs:
Hrvoje Benko
Microsoft Research, USA
,
Celine Latulipe
University of North Carolina at Charlotte, USA

Copyright © 2012 ACM.

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for components of this work owned by others than ACM must be honored. Abstracting with credit is permitted. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. Request permissions from [email protected]

Sponsors

Publisher

Association for Computing Machinery

New York, NY, United States

Publication History

Published: 07 October 2012

Permissions

Request permissions for this article.

Request Permissions

Check for updates

Author Tags

Qualifiers

Research-article

Conference

UIST '12

Sponsor:

UIST '12: The 25th Annual ACM Symposium on User Interface Software and Technology

October 7 - 10, 2012

Massachusetts, Cambridge, USA

Acceptance Rates

Overall Acceptance Rate 561 of 2,567 submissions, 22%

Upcoming Conference

UIST '25

Sponsor:
sigchi
sigchi

The 38th Annual ACM Symposium on User Interface Software and Technology

September 28 - October 1, 2025

Busan , Republic of Korea

Contributors

Other Metrics

View Article Metrics

Bibliometrics & Citations

Bibliometrics

Article Metrics

30
Total Citations
View Citations
510
Total Downloads

Downloads (Last 12 months)11
Downloads (Last 6 weeks)0

Reflects downloads up to 03 Feb 2025

Other Metrics

View Author Metrics

Citations

Cited By

Myers B(2024)Pick, Click, Flick!undefinedOnline publication date: 14-Mar-2024
Blouin AJezequel J(2022)Interacto: A Modern User Interaction Processing ModelIEEE Transactions on Software Engineering10.1109/TSE.2021.308332148:9(3206-3226)Online publication date: 1-Sep-2022
Niyazov AMellado NBarthe LSerrano M(2021)Dynamic DecalsProceedings of the ACM on Human-Computer Interaction10.1145/34885385:ISS(1-27)Online publication date: 5-Nov-2021
Dayama NSantala SBrückner LTodi KDu JOulasvirta AHammond TVerbert KParra DKnijnenburg BO'Donovan JTeale P(2021)Interactive Layout TransferProceedings of the 26th International Conference on Intelligent User Interfaces10.1145/3397481.3450652(70-80)Online publication date: 14-Apr-2021
Dayama NTodi KSaarelainen TOulasvirta ABernhaupt RMueller FVerweij DAndres JMcGrenere JCockburn AAvellino IGoguey ABjørn PZhao SSamson BKocielnik R(2020)GRIDS: Interactive Layout Design with Integer ProgrammingProceedings of the 2020 CHI Conference on Human Factors in Computing Systems10.1145/3313831.3376553(1-13)Online publication date: 21-Apr-2020
Canny APalanque PNavarre D(2020)Model-Based Testing of GUI Applications Featuring Dynamic Instanciation of Widgets2020 IEEE International Conference on Software Testing, Verification and Validation Workshops (ICSTW)10.1109/ICSTW50294.2020.00029(95-104)Online publication date: Oct-2020
Haveraaen MJärvi J(2020)Semantics of multiway dataflow constraint systemsJournal of Logical and Algebraic Methods in Programming10.1016/j.jlamp.2020.100634(100634)Online publication date: Dec-2020
Coppers SLuyten KVanacken DNavarre DPalanque PGris C(2019)FortunettesProceedings of the ACM on Human-Computer Interaction10.1145/33311623:EICS(1-20)Online publication date: 13-Jun-2019
Krosnick RLee SLaseck WOnev S(2018)Expresso: Building Responsive Interfaces with Keyframes2018 IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC)10.1109/VLHCC.2018.8506516(39-47)Online publication date: Oct-2018
Barbosa JWanderley MHuot S(2018)ZenStates: Easy-to-Understand Yet Expressive Specifications for Creative Interactive Environments2018 IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC)10.1109/VLHCC.2018.8506491(167-175)Online publication date: Oct-2018
Show More Cited By

View Options

Login options

Check if you have access through your login credentials or your institution to get full access on this article.

Full Access

Get this Publication

View options

PDF

View or Download as a PDF file.

eReader

View online with eReader.

Figures

Tables

Media

View Table of Conten