User interface toolkits
Download
1 / 38

User Interface Toolkits - PowerPoint PPT Presentation


  • 168 Views
  • Uploaded on

213: User Interface Design and Development. User Interface Toolkits. Lecture #10 - March 19th, 2009. Today’s Outline. Model-View-Controller (MVC) Widgets UI Toolkits Internationalization. Model-View-Controller (MVC). Model-View-Controller (MVC).

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'User Interface Toolkits' - edna


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
User interface toolkits

213: User Interface Design and Development

User Interface Toolkits

Lecture #10 - March 19th, 2009


Today s outline
Today’s Outline

  • Model-View-Controller (MVC)

  • Widgets

  • UI Toolkits

  • Internationalization



Model view controller mvc1
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)


Source: Krasner and Pope, “A Description of the Model-View-Controller User Interface Paradigm in Smalltalk-80”


Model view controller mvc2
Model-View-Controller (MVC) Model-View-Controller User Interface Paradigm in Smalltalk-80”

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


Example a text field
Example: A Text Field Model-View-Controller User Interface Paradigm in Smalltalk-80”

Screen

Keyboard

Keystroke

handler

Text display

get text

Controller

View

edit text

change

events

Mutable string

Model

Adapted from Rob Miller


Example web browser
Example: Web Browser Model-View-Controller User Interface Paradigm in Smalltalk-80”

Screen

Mouse

Hyperlink

handler

Page view

get nodes

Controller

View

load page

change

events

Document

Model (DOM)

Model

Adapted from Rob Miller


Observer pattern
Observer Pattern Model-View-Controller User Interface Paradigm in Smalltalk-80”

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


Observer pattern1
Observer Pattern Model-View-Controller User Interface Paradigm in Smalltalk-80”

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


View controller
View-Controller Model-View-Controller User Interface Paradigm in Smalltalk-80”

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


Widgets
Widgets Model-View-Controller User Interface Paradigm in Smalltalk-80”


Widgets1
Widgets Model-View-Controller User Interface Paradigm in Smalltalk-80”

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


Kinds of widgets
Kinds of Widgets Model-View-Controller User Interface Paradigm in Smalltalk-80”

Text boxes

Buttons

Scrollbars

Menubars

Containers

Etc…


Widgets for 1 of n choices
Widgets for 1-of-N Choices Model-View-Controller User Interface Paradigm in Smalltalk-80”

Radio buttons

Drop-down menu

Single-selectionlistbox

Toggle buttons

Adapted from Rob Miller


Widgets for boolean choices
Widgets for Boolean Choices Model-View-Controller User Interface Paradigm in Smalltalk-80”

Checkbox

Toggle button

Adapted from Rob Miller


Widgets for k of n choices
Widgets for K-of-N Choices Model-View-Controller User Interface Paradigm in Smalltalk-80”

N checkboxes

Multiple-selectionlistbox

Two listboxes

Adapted from Rob Miller


Widgets for commands
Widgets for Commands Model-View-Controller User Interface Paradigm in Smalltalk-80”

Menubar

Toolbar

Context menu

(right-click)

Push button

Hyperlink

www.ischool.berkeley.edu

Adapted from Rob Miller


Widgets for organizing content
Widgets for Organizing Content Model-View-Controller User Interface Paradigm in Smalltalk-80”

Tabbed Pane

Scrolled Pane

Listbox + Pane

Split Pane

Adapted from Rob Miller


Widgets for dialogs
Widgets for Dialogs Model-View-Controller User Interface Paradigm in Smalltalk-80”

Dialog Box

(Modal or Modeless)

Sidebar

Adapted from Rob Miller


View hierarchy
View Hierarchy Model-View-Controller User Interface Paradigm in Smalltalk-80”

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


View hierarchy output
View Hierarchy: Output Model-View-Controller User Interface Paradigm in Smalltalk-80”

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


View hierarchy input
View Hierarchy: Input Model-View-Controller User Interface Paradigm in Smalltalk-80”

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


View hierarchy layout
View Hierarchy: Layout Model-View-Controller User Interface Paradigm in Smalltalk-80”

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


Pros and cons of widgets
Pros and Cons of Widgets Model-View-Controller User Interface Paradigm in Smalltalk-80”

Pros

  • Reduce development effort - designing, coding, testing, maintaining, etc.

  • Maintain consistency across platforms and/or applications

    Cons

  • Constrains designer’s 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


User interface toolkits1
User Interface Toolkits Model-View-Controller User Interface Paradigm in Smalltalk-80”

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


Toolkit examples
Toolkit Examples Model-View-Controller User Interface Paradigm in Smalltalk-80”

Win32Java SwingHTML

components windows JComponents elements

strokes GDI Graphics <canvas>

pixels bitmaps Image <img>

input messages listeners Javascript window proc event handlers

widgets button, menu, JButton, JMenu, <button>,

textbox, … JTextField, … <input>, …

Adapted from Rob Miller


Cross platform toolkits swing
Cross-Platform Toolkits: Swing Model-View-Controller User Interface Paradigm in Smalltalk-80”

Java Swing

Java AWT

Windows

Motif

OS X

XLib

Adapted from Rob Miller


Cross platform toolkits html
Cross-Platform Toolkits: HTML Model-View-Controller User Interface Paradigm in Smalltalk-80”

HTML

IE

Firefox

Safari

MS Windows

GTK+

Mac OS

XLib

Adapted from Rob Miller


Cross platform toolkits
Cross-Platform Toolkits Model-View-Controller User Interface Paradigm in Smalltalk-80”

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


Themes for successful toolkits
Themes for Successful Toolkits Model-View-Controller User Interface Paradigm in Smalltalk-80”

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”


Internationalization i18n
Internationalization Model-View-Controller User Interface Paradigm in Smalltalk-80”(i18n)


Internationalization
Internationalization Model-View-Controller User Interface Paradigm in Smalltalk-80”

Adapted from Rob Miller


Challenges of i18n
Challenges of i18n Model-View-Controller User Interface Paradigm in Smalltalk-80”

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


Challenges of i18n1
Challenges of i18n Model-View-Controller User Interface Paradigm in Smalltalk-80”

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


Challenges of i18n2
Challenges of i18n Model-View-Controller User Interface Paradigm in Smalltalk-80”

Colors

  • Does white represent a wedding or a funeral?

    Icons

Adapted from Rob Miller


Toolkit support for i18n
Toolkit Support for i18n Model-View-Controller User Interface Paradigm in Smalltalk-80”

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


For next time
For Next Time Model-View-Controller User Interface Paradigm in Smalltalk-80”

Heuristic evaluation is due the Monday you get back!

Two more assignments posted - Interactive Prototype 2, and Experiment Design

Have a good Spring Break!!!


ad