Implementing Browser Constraints Using Dynamic HTML


Bill Rosener, Ph.D.
Northeastern State University


April 19, 2001
















Implementing Constraints Using DHTML

 
Outline
Introduction
Motivations and Examples
DHTML Specifications
Runtime Implementation
Conclusions















Motivations and Examples

1. Specify the graphical layout

    • Alignment
    • Placement
    • Size of graphical objects

Example 1
















Motivations and Examples Cont.

2. Re-compute formulas

    • Force values to be recomputed automatically
    • Like formulas in spreadsheet applications

Example 2
















Motivations and Examples Cont.

3. Maintain Consistency Between Multiple Views of Data

    • Graphics interfaces often display multiple views
    • When one view changes, other views automatical change

Example 3
















Classroom Projects

DHTML 1 object
DHTML 3 objects
















DHTML Specifications

  • Document Object Model (DOM)
  • Cascading Style Sheets (CSS)
  • Programming language (e.g., Javascript)
















Runtime Implementation

  • Create a linked list of constrained objects
  • Constraints marked invalid then re-solved.

  • Example 
    object2.left = object1.left
object2.top  = object1.top + 50
object3.left = object1.left + 100
















Conclusions

  • Developing DHTML applications is difficult
  • Potentials of a Constraint Solver
    • Specify graphical layout of objects
    • Re-compute formulas
    • Maintain consistency