User Interface Toolkits

1
User Interface Toolkits
213 User Interface Design and Development

• Lecture 10 - March 19th, 2009

2
Todays Outline

• Model-View-Controller (MVC)
• Widgets
• UI Toolkits
• Internationalization

3
Model-View-Controller (MVC)
4
Model-View-Controller (MVC)

• Architecture for developing programs with
  modular, reusable components
• Originally conceived in Smalltalk-80,
  immortalized in Design Patterns book
• Allows separation of application state (model)
  from display (view) and logic (controller)

5
Source Krasner and Pope, A Description of the
Model-View-Controller User Interface Paradigm in
Smalltalk-80
6
Model-View-Controller (MVC)

• Model
• Maintains application data
• Provides methods to access and modify data
• Notifies observers when data changes
• View
• Maintains application display
• Updates view by listening to and querying model
• Can have multiple views for the same model
• Controller
• Handles user input
• Mediates between view and model
• Manages lifecycle of other objects
• Views, models and controllers can be reusable
  across applications

7
Example A Text Field
Screen
Keyboard
Text display
Keystroke handler
get text
Controller
View
change events
edit text
Mutable string
Model
Adapted from Rob Miller
8
Example Web Browser
Screen
Mouse
Page view
Hyperlink handler
get nodes
Controller
View
change events
load page
Document Model (DOM)
Model
Adapted from Rob Miller
9
Observer Pattern

• Used to decouple model from views (can support
  multiple simultaneous views of one model)

graph
View A
query
Model
update
update
View B
stock market data
query
table
Adapted from Rob Miller
10
Observer Pattern
Observer
Model
register
interface Model void register(Observer)
void unregister(Observer) Object get()
void modify() interface Observer void
update(Event)
modify
update
gets
return
Adapted from Rob Miller
11
View-Controller

• In practice, it is often difficult to separate
  the view and the controller
• Output is closely tied to Input
• View needs to update itself based on controller
  state (currently depressed button, currently
  selected text, etc.)
• MVC has largely been superseded by MV -
  Model-View
• View encapsulated as reusable GUI components
  providing both input and output (also called
  widgets)

Adapted from Rob Miller
12
Widgets
13
Widgets

• Reusable user interface components
• Also called components, controls, interactors,
  etc.
• Handle both input and output
• Includes a view, a controller, and possibly a
  model
• Embedded model - data included in widget needs
  to be copied in and out
• Linked model - data stored in model object, which
  provides interface for accessing and editing
• Allows binding of widgets to data objects

Adapted from Rob Miller
14
Kinds of Widgets

• Text boxes
• Buttons
• Scrollbars
• Menubars
• Containers
• Etc

15
Widgets for 1-of-N Choices
Radio buttons
Drop-down menu
Single-selectionlistbox
Toggle buttons
Adapted from Rob Miller
16
Widgets for Boolean Choices
Checkbox
Toggle button
Adapted from Rob Miller
17
Widgets for K-of-N Choices
N checkboxes
Multiple-selectionlistbox
Two listboxes
Adapted from Rob Miller
18
Widgets for Commands
Menubar
Toolbar
Context menu (right-click)
Push button
Hyperlink
www.ischool.berkeley.edu
Adapted from Rob Miller
19
Widgets for Organizing Content
Tabbed Pane
Scrolled Pane
Listbox Pane
Split Pane
Adapted from Rob Miller
20
Widgets for Dialogs
Dialog Box (Modal or Modeless)
Sidebar
Adapted from Rob Miller
21
View Hierarchy

• Views can be arranged into hierarchies of
  containers and components
• Containers Window, Frame, Panel, etc.
• Components / Widgets Canvas, Text Box, Button,
  etc.
• Containers are also components / widgets
• This hierarchy is used to delegate handling of
  input, output and layout

Adapted from Rob Miller
22
View Hierarchy Output

• Drawing
• Draw requests are passed top-down through the
  hierarchy
• Clipping
• Parent container prevents its child components
  from drawing outside its extent
• Z-order
• Children are (usually) drawn on top of parents
• Child order dictates drawing order between
  siblings
• Coordinate system
• Every container has its own coordinate system
• Child positions are expressed in terms of parent
  coordinates

Adapted from Rob Miller
23
View Hierarchy Input

• Raw input events (key presses, mouse movements,
  mouse clicks) are sent to lowest component
• Event propagates up the hierarchy until some
  component handles it
• This component has the focus (which it can choose
  to delegate / pass on to its ancestors)

Adapted from Rob Miller
24
View Hierarchy Layout

• Children can be automatically positioned and
  sized relative to their parents and siblings
• Allows window-resizing
• Can handle internationalization and platform
  differences (window size, font size, etc.)
• Reduces requirement for programmer to manage
  sizing and positioning (usually requires fiddling
  to achieve graphic design requirements)

Adapted from Rob Miller
25
Pros and Cons of Widgets

• Pros
• Reduce development effort - designing, coding,
  testing, maintaining, etc.
• Maintain consistency across platforms and/or
  applications
• Cons
• Constrains designers thinking
• Encourages form and menu-based styles as opposed
  to more direct manipulation
• Further Reading
• Jeff Johnson, GUI Bloopers 2.0 Common User
  Interface Design Don'ts and Dos

Adapted from Rob Miller
26
User Interface Toolkits

• Software architecture
• Usually MV, or MVC
• Output
• View hierarchy
• Stroke drawing
• Pixel-level access
• Input
• Event handling
• Widgets
• Buttons, menus, containers, etc.

Adapted from Rob Miller
27
Toolkit Examples

• Win32 Java Swing HTML
• components windows JComponents elements
• strokes GDI Graphics ltcanvasgt
• pixels bitmaps Image ltimggt
• input messages listeners Javascript window
  proc event handlers
• widgets button, menu, JButton, JMenu, ltbuttongt,
• textbox, JTextField, ltinputgt,

Adapted from Rob Miller
28
Cross-Platform Toolkits Swing
Java Swing
Java AWT
Windows
Motif
OS X
XLib
Adapted from Rob Miller
29
Cross-Platform Toolkits HTML
HTML
Firefox
IE
Safari
MS Windows
GTK
Mac OS
XLib
Adapted from Rob Miller
30
Cross-Platform Toolkits

• AWT, HTML
• Use native widgets, but only those common to all
  platforms
• Consistent look-and-feel with native
  applications, because they use the same
  underlying code
• Sometimes misses some widgets
• Swing
• Reimplement all widgets
• Not constrained by least common denominator
• Provides consistent look-and-feel across
  platforms
• SWT
• Use native widgets where possible
• Reimplement missing widgets

Adapted from Rob Miller
31
Themes for Successful Toolkits

• Address the Important Parts of the UI
• Provide a Low Threshold and a High Ceiling
• Make it Easy to do the Right Thing, and Hard to
  Do the Wrong Thing
• Make the Behavior of Your Toolkit Predictable
• Make Sure the Target of your Toolkit is Stable
  and Well-defined

Source Myers, Hudson and Pausch Past, Present
and Future of User Interface Software Tools
32
Internationalization(i18n)
33
Internationalization
Adapted from Rob Miller
34
Challenges of i18n

• Translations
• Have to translate every visible word in the
  application
• Requires specialists who are not only fluent in
  the language, but are aware of local culture,
  conventions and standards
• Right-to-left languages (arabic, hebrew, etc.)
• Affects drawing, screen layout, icon shapes

Adapted from Rob Miller
35
Challenges of i18n

• Encodings
• Can vary across (and even within) languages
• Fonts and input methods both support specific
  encodings
• Sorting (collation)
• Uppercase / lowercase, accents, different letters
  - all affect sorting in different languages
• Numbers
• 172,350.55 (US), 172.350,55 (Germany)
• 1,72,350.55 (India)
• Dates
• 3/6/8 (US) vs. 6/3/8 (everywhere else)

Adapted from Rob Miller
36
Challenges of i18n

• Colors
• Does white represent a wedding or a funeral?
• Icons

Adapted from Rob Miller
37
Toolkit Support for i18n

• Message files
• Separate messages from source code
• OK vs. gettext(OK)
• Human translators generate a message file for
  each supported locale
• Skins
• Separates images, icons, presentation rules from
  source code
• Formatting support
• Numbers, dates, currency
• Bidirectional layout

Adapted from Rob Miller
38
For Next Time

• Heuristic evaluation is due the Monday you get
  back!
• Two more assignments posted - Interactive
  Prototype 2, and Experiment Design
• Have a good Spring Break!!!