CS349 - Implementing User Interfaces - Spring 2010

Public Service Annoucements

1. Assignment 2

Lecture 12 - Formalizing User Interfaces

UI Components

Completeness

Types of components

1. Containers
   • hold other components, including other containers
     • containers form a tree with non-containers at the leaves
   • usually have a layout policy
2. Selectors
   • choose one of many
   • selection aspect
   • `now' aspect
3. Changers
   • change a value
   • value aspect
   • persistence aspect
4. Canvases
   • hold uneditable (usually) pictures and text
5. Text editors
   • enter & edit text
   • shows very clearly the importance of reuse
     • and the difficulty of innovation
     • "include the previous interface" has all sorts of problems
     • (Exercise for the reader. List six problems. Yes, `all sorts' is really right. Think concretely.)

Anatomy of a file chooser

• container
• text editor
• selector
• buttons

Anatomy of a button

• container
• selector
• canvas

Formalizing User Interfaces

What is Formalization?

1. Abstraction
   • linked list example
2. Isomorphism
   • linked list example
3. Metalanguage
   • required
   • for defining the elements of the formal language

Examine two types of formalism

• State machine
• Production system

The State-Machine Formalism

Definition

1. Set of states
2. Set of actions
3. Set of side effects
   • This is the most important aspect because it's what affects the user
   • Can change side effect to action by widening the universe of the abstraction
   • Can change action to side effect by narrowing the universe of the abstraction.
   • Choosing the `best' universe is an art, not a science.
   • Could `the universe of the abstraction' be `the universe less the user'?

Example: the Simple Button

First try -- Press-release

• States: outside, unarmed, armed
• Side effects:
  • actionEvent
• Actions
  • mouseEnter: outside -> unarmed
  • mouseExit:
    • unarmed -> outside
    • armed -> outside
  • press: unarmed ->armed
  • release: armed -> unarmed & actionEvent

Second try -- Exit after press

• States: {outside, inside} X {unarmed, armed}
• Side effects:
  • actionEvent
• Actions
  • mouseEnter: outside -> inside
  • mouseExit: inside -> outside
  • press: unarmed & inside ->armed & inside
  • release: armed & inside -> unarmed & inside & actionEvent

Return to:

• CS349 - Spring 2010 - Lecture schedule
• CS349 - Spring 2010
• CS349 page
• Bill Cowan's home page.