User Interface Software, Architecture, and Implementation

1
User Interface Software, Architecture, and
Implementation

• Loren Terveen
• CS 5115, Fall 2008
• November 24

2
Objectives for today

• Introduce key UI Software / Implementation
  concepts
• Preview two classes from next semester

3
Deliverables for next week

• Change List
• Presentation Plans

4
Exam Review
5
Classic UI Software Concepts

• Widgets
• Layout management
• Event Handling
• Model-View-Controller Architecture
• Toolkits

6
Well look at these concepts through

• Visual Basic .NET
• Visual interface builder scripting language to
  associate behaviors with graphical objects
• Java/Swing
• Powerful, high-level programming language with
  integrated GUI constructs

7
Object-orientation

• Most powerful UI toolkits are object-oriented

8
Quick review of widgets

• Software input devices
• All UI toolkits provide a basic set they are
  the building blocks for user interfaces
• Standard types include
• Buttons
• Sliders
• Menus
• Lists
• Text Boxes
• Multi-Values
• Containers

9
Automated Layout Management

• Placing widgets in the desired position
• Specifying how much space they get
• Specifying resize behavior

10
The home of automated layout management

• Java/Swing http//java.sun.com/docs/books/tutoria
  l/uiswing/layout/index.html
• Tcl/Tk
• From simple grids to complex constraint systems
• Contrast to systems where layout is done
  manually, e.g., Visual Basic

11
Events - The Basics

• Events happen they must be noticed, then
  handled
• A contrast to traditional top-down sequential
  flow
• Examples
• User input
• Button clicked
• Mouse dragged
• Enter key pressed
• Etc.
• External programs
• Timers
• Observe that events are
• Discrete software gets notified after an event
  happens
• Unambiguous there is no doubt which event happens

12
VB .NET

• Illustrate, including showing how event handlers
  are defined

13
Key Architectural Concept
Model-View-Controller

• Developed as part of the Smalltalk language
• Cleanly separates three aspects of user interface
  programming
• Model the application data, or state
• View screen presentation, what the user sees
  and interacts with, the look
• Controller defines how events are handled, the
  feel
• See Olsen, Figures 1.3 1.7

14
MVC Communication
data for rendering
Model
View
events
updates
Controller
15
Lets look at Windows Explorer
16
Explorer Details View
17
Explorer Icons View
18
Explorer Thumbnails View
19
MVC in Windows Explorer

• Windows Explorer
• Model a set of files
• Views Large Icons, Small Icons, List, Details,
  Thumbnails
• Controller how actions such as mouse clicking
  and dragging are interpreted
• Note some actions just change an individual
  view, others change the shared model

20
MVC in Swing

• View and controller are combined
• http//java.sun.com/docs/books/tutorial/uiswing/co
  mponents/model.html
• Converter
• Shared Model Demo

21
Advantages of MVC (1)?

• Decreases coupling
• Simplifies complex user interface code
• Multiple controllers may be defined based on
  desired behavior
• Changes to part can affect others without
  requiring the changed object to know details of
  others
• Increases Cohesion
• Only the view is concerned with pixels and
  screen-based data

22
Advantages of MVC (2)?

• Improved Flexibility
• New views can be added without changing model
• Increases Reuse
• One model can be represented in several ways

23
Advantages of MVC (3)?

• Multiple, automatically synchronized views
• Views and controllers often provided by toolkit
• Application developers may create new views and
  controllers if needed
• Very helpful for multi-user applications

24
Disadvantages of MVC

• Introduces some complexity
• More classes
• More abstractions
• Since its a conceptual definition, not a
  specification
• Means different things to different people
• Different instantiations in different toolkits

25
Thats (part of) the desktop GUI implementation
story, but

• Software toolkits evolved with and are based on a
  particular hardware platform
• High resolution, bitmap displays pointing
  devices
• Toolkits promote consistency, which benefits end
  users

26
How do things differ when you create a

• Web-based UI?
• Collaborative / multi-user UI?
• Ubiquitous computing app
• Very large or small displays different input
  devices
• Recognition-based interface (e.g., speech
  recognition)?
• event loop may not make sense

27
Key desktop metaphor Direct Manipulation

• Shneiderman
• Continuous representation of the object of
  interest
• Physical actions or labeled button presses
  instead of complex syntax
• Rapid incremental reversible operations whose
  impact on the object of interest is immediately
  visible
• Examples

28
Web-based UIs

• The classic web approach
• Newer approaches / frameworks, e.g., AJAX,
  Springs, Strut, Ruby on Rails, Flex

29
Web 1.0 interaction (Form)?
Compare/contrast appearance/interaction to
desktop GUIs, such as Swing
30
Web page, showing results
31
Old web programming model
4. Prints response to stdout, eventually exits
Application Program (CGI)?
3. Data passed via stdin and/or environment
variables
HTML Document
Server
5. New html document sent to browser
Client
Web browser (typically displaying a form)?
3. Script name form data sent to server
USER

• fills out form
• submits

Contrasts and Issues?
32
AJAX

• Set of techniques for making web pages more
  interactive
• More work done on the client side
• Google popularized this with Google Suggest and
  Google Maps lets look at them

33
Flash/ActionScript (Flex)?
34
CS 5125 Collaborative and Social Computing

• Theory, applications, technology, and methods
• Readings
• Likely topics wikis, blogs, social networking,
  open source software, mmporgs, recommender
  systems, work studiesLectures Discussion
• Assignments

35
5980 (Prof. Riedl's section)?

• Designing the Interactive Web
• Systems-oriented
• Programming Languages for web UI toolkits

36
Your project

• What implementation platform did you select?
• Why?
• Pros and cons of your choice
• Discuss in inter-project groups