Download Interactive System Design: Lecture 5 - Interactive Programming and Interfaces and more Study notes Information Technology in PDF only on Docsity!
INFSCI 2470
Interactive System Design
Peter Brusilovsky
http://www2.sis.pitt.edu/~peterb/2470-042/
Lecture 5: Interactive Programming
Introduction: Interfaces
No interface: Batch processing
Command/Dialogue Interface
Graphical User Interface (GUI)
Direct manipulation Interface NL and Speech Virtual reality Gestures
Commands/Dialogue Direct manipulation
Two paradigms of interactive
programming
Command, Key-modal GUI, DM
Procedural Object-Oriented
The paradigm shift was caused by
interface change
Event-based programming
Dialogue programming
Examples
Interface Keyboard/Screen^ Windows/Mouse
Language
OS Support Input waiting Events
Dialogue Interfaces
a b
c d
Dialogue interfaces can be differentiated in two dimensions
- The presence of modes
- The element of interaction
Non-modal Modal
Line-based exchange
Form-based exchange
Modal Dialogue Interfaces
Program can be designed as a set of independent dialogue states Each dialogue states performs necessary actions A “goto” to another state may happen after processing Modeled by transition diagrams
Form-Based Modal Interfaces
Typical for advanced Web-based applications The interface can be designed using transition diagrams Need to keep the state of the dialogue We will get to using states with forms and HTML later
Graphical User Interface ("Goo-ee")
- Pictorial interface to a program
- Distinctive "look" and "feel"
- Different applications with consistent GUIs
improve productivity
GUIs built from components
- Component: object with which user
interacts
- Examples: Labels, Text fields, Buttons,
Checkboxes
Graphical User Interface (GUI)
Example GUI: Netscape Communicator
Button Label Menu Menu^ bar Text field
GUI and Widgets
Affordances: Knurling
Event-redraw loop in GUI
Initial Presentation
Interpret Input
Produce Output
Events
Redraw
Event-Redraw in GUI
Asynchronous events input (multiple!)
- Events coming from GUI controls
Supported by OS and programming
environment
- Events are sent to the corresponding
components of the program
- Programming in terms of event responses
2-3D, not a 1D “stream” output
- elements of the”picture” and controls
changed separately
Event-based programming with
widgets
Event-based programming is supported
by GUI toolkits, packages, APIs, etc.
A package provides a set of predefined
widgets for getting the user’s input
A widget gets the input, calls the user-
defined program that reacts to this input
and passes parameters of the event to it
The reaction program “does the job”
Models “behind” the windows
Each component of the interface has an
“internal model” behind the screen (data)
The presentation part of the interface
visualizes this model
The widgets let the user to do actions on
this model
The actions usually result in a change of
the model and it has to be re-displayed
Implementation of the model
Model is implemented as a class or set
of classes (encapsulation of data)
Methods are provided to:
- Present components of the model on the
screen (usually private for the class)
- Query model parameters
- Change the model parameters - this will
trigger a sequence of component re-
drawing actions
Example 3: Graphing Calculator
Internal model
Events
Changing model
setEq("x=3(y*2)-3”); increaseScale(); decreaseScale();
Drawing
drawGraph();
Example 4: Date and Time
Internal Model
Events
Changing model
Drawing
Model View Controller Pattern
Model
- Represent internal state of the world
View (views)
- Visualize the status of the model in UI
- Multiple views are possible
Controller
- Process user’s input
- Multiple controllers are possible for
different users
Benefits of MVC Pattern
Separating presentation from the model
- Independent design
- Multiple views
- Reliable, maintainable
Separate view and controller
A better way of thinking about the GUI
design
Once More about Paradigms
Command, Key-modal GUI, DM
Procedural Object-Oriented
New interface capabilities changes the paradigm
Event-based programming
Dialogue programming
Examples
Interface Keyboard/Screen^ Windows/Mouse
Language
OS Support Input waiting Events
?
?
?
?
What is the future?
Interaction types: natural
- New hand-based GUI, gestures, voice/NL
Interfaces
- Ubiquitous, adaptive, distributed
Programming style
Infrastructure
- Web service architectures – CORBA, e-speak, JXTA, .NET…
