cs349 - s10 - Lecture 10
CS349 -
Implementing User Interfaces - Spring 2010
Public Service Annoucements
- Assignment 2
- Midterm
Lecture 10 - UI Toolkits
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?
- Freedom from modes
- User can do anything anywhere
- Freedom from state chains
- Undo capability
- Consistency
- enables learning transfer
- consistency of appearance
- consistency of action
- positive & negative consistency
- Similar things look similar
- Different things look different
- Classic `not the way I think' blunders
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
- Containers
- hold other components, including other containers
- containers form a tree with non-containers at the leaves
- usually have a layout policy
- Canvases
- hold uneditable pictures and text
- Selectors
- choose one of many
- selection aspect
- `now' aspect
- Changers
- 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. 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
Macintosh Seven
| Macintosh item |
Type |
Subsidiary types |
| Button |
Container |
selector, canvas |
| Slider |
Changer |
|
| Pulldown menu |
Selector |
|
| Check box |
Changer |
|
| Radio buttons |
Selector |
|
| Text entry |
Editor |
|
| File Open/Save/Close |
Container |
editor, selector, button |
Return to: