CS349 - Implementing User Interfaces - Spring 2010

Public Service Annoucements

1. Assignment 1
2. Class `almost cancelled' next Wednesday

Lecture 9 - Interactive Components

Implementation Architecture: Model-view-controller

So well known (over-exposed) that it is a design pattern.

Spreadsheet

Model

• database containing data/expression for each cell

View

• displays database contents in a form adapted to human capabilities
• several views can correspond to the same contents

Controller

• converts user actions to database queries
• several actions can correspond to the same query

In practice

View & controller are never independent. Why?

Designing Interactive Components

What we try to achieve

All of the following are problematic

• Controllability
  • Can you get there from here?
• Observability
  • Is information available allowing the user to find out how to get there from here?
• Consistency
  • enables learning transfer
  • consistency of appearance
  • consistency of action
  • positive & negative consistency
    • Similar things look similar
    • Different things look different
• Freedom from modes
  • User can do anything anywhere
• Undo capability

How we try to achieve it: UI toolkit

A collection of components that are assembled into an interface.

Apple, for example, controlled the look-and-feel of third party applications by providing a UI toolkit.

• Strongly encouraged developers to use it
• Lots of other things along the same line
  • books
  • sample code
  • Macintosh University

UI toolkits

Important properties of a UI toolkit

• Complete
• Consistent
• Customizable

Completeness

Types of components

1. Containers
   • hold other components, including other containers
   • usually have a layout policy
2. Canvases
   • hold uneditable pictures and text
3. Selectors
   • choose one of many
   • selection aspect
   • `now' aspect
4. Changers
   • change a value
5. Text editors
   • enter & edit text

Anatomy of a file chooser

• container
• text editor
• selector
• buttons

Anatomy of a button

• container
• selector
• canvas

Macintosh Seven

Return to:

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