model-view-controller and event driven uijfc/cs160/f08/lecs/lec12.pdfevent-driven uis old model...
TRANSCRIPT
![Page 1: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/1.jpg)
Model-View-Controller and Event Driven UI
CS160: User Interfaces
John Canny
Includes slides based on those of James Landay & Jeffrey Heer
.
![Page 2: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/2.jpg)
ReviewPersuasion and Games
Rhetoric
– Ethos, Logos, Pathos
The psychology of persuasion
– 9 principles and application to games
Persuasion and interactivity
– Dialogic presentation of information is more persuasive.
![Page 3: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/3.jpg)
Topics
2D graphics fundamentals
Interactive application programming
– Component Model
– Event-Driven User Interfaces
Model-View-Controller
– Architecture for interactive components
– Why do we need it?
– Changing the display
![Page 4: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/4.jpg)
10/15/2008 4
2-D Computer Graphics
Models for images
– Strokes, pixels, regions
Coordinate systems
– Device, physical
Canvas
Drawing
– Paths, shapes, text
![Page 5: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/5.jpg)
10/15/2008 5
Describe image as strokes (w/ color/thickness)• Line ((10, 4), (17,4), thick 2, red)
• Circle (( 19, 13), radius 3, thick 3, white)
Maps to early vector displays & plotters
Most UI toolkits have stroked objects
– arcs, ellipses, rounded rectangles, etc.
Stroke Model
![Page 6: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/6.jpg)
10/15/2008 6
Problems with Stroke Model?
How would you represent with strokes?
Solution?
![Page 7: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/7.jpg)
10/15/2008 7
Pixel Model
Break-up complex images into discrete “pixels” & store color for each
Resolution
– Spatial: number of rows by columns
– e.g., 1280 x 1024 is a good monitor display
– Quality laser printer: 10200 x 13200 (1200 dpi)
– Image depth (i.e., number of bits per pixel)
– Several styles... 8-bit, 24-bit, 32-bit
![Page 8: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/8.jpg)
10/15/2008 8
Image Depth
Bit map - 1 bit/pixel (on/off)
– B&W screens or print-outs
![Page 9: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/9.jpg)
10/15/2008 9
Image Depth (cont.)
Gray scale - 2-8 bits/pixel
Full color - 24 bits/pixel
– 8 bits per primary color (Red, Green, Blue)
![Page 10: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/10.jpg)
10/15/2008 10
Image Depth (cont.)
Full color – 32 bits/pixel
– Usually just 24-bit color (used for efficiency)
– Extra 8-bits are optional – can be used for “alpha” (transparency)
Color mapped - 8 bits/pixel
– Store index @ pixel - map into table w/ 24 bits
– Cuts space & computation
– Problem????
![Page 11: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/11.jpg)
10/15/2008 11
Image Depth (cont.)
Jpeg image of blue sky
![Page 12: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/12.jpg)
10/15/2008 12
Image Depth (cont.)
Blue sky with limited image depth
![Page 13: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/13.jpg)
10/15/2008 13
Image compression
Lossless formats: BMP, TIFF
JPEG: based on image spectral analysis. Best for natural images.
GIF/PNG: Best for line art and synthetic images.
![Page 14: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/14.jpg)
10/15/2008 14
Aliasing
Smooth objects (e.g., lines) appear jagged since resolution is too low
Antialiasing - fill-in some jagged places w/ gray scale or primary colors
![Page 15: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/15.jpg)
10/15/2008 15
Anti-Aliasing
Pixels colored in proportion to relative amount of line that crosses them.
Equivalently, draw the line in B/W at finer resolution and then color each pixel in proportion to number of colored sub-pixels.
![Page 16: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/16.jpg)
10/15/2008 16
Cleartype
The pixel matrix for a laptop or LCD screen.
![Page 17: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/17.jpg)
10/15/2008 17
Cleartype
Use sub-pixel color pixels as though they were gray pixels (can cause color anomalies).
![Page 18: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/18.jpg)
10/15/2008 18
Outline Fonts
Used by both Postscript & TrueType
Boundary is represented with splines, and can be scaled to any size.
![Page 19: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/19.jpg)
10/15/2008 19
Vector formats
Vector graphics increasingly popular as the rendering platform to support many device types:
• Flash
• SVG (Scalable Vector Graphics) and XML format
• XAML (eXtensible Application Markup Language) and WPF (Windows Presentation Foundation), the heart of Vista.
• VML (Microsoft) in Powerpoint/Internet Explorer.
![Page 20: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/20.jpg)
Interactive Application Programming
![Page 21: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/21.jpg)
In the beginning…
http://www.cryptonomicon.com/beginning.html
![Page 22: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/22.jpg)
The Xerox Alto (1973)
![Page 23: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/23.jpg)
Event-Driven UIs
Old model (e.g., UNIX shell, DOS)
– Interaction controlled by system, user queried for input when needed by system
Event-Driven Interfaces (e.g., GUIs)
– Interaction controlled by user
– System waits for user actions and then reacts
– More complicated programming and architecture
![Page 24: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/24.jpg)
Component/Widget Model
Encapsulation and organization of interactive components (“widgets”)
– Typically using a class hierarchy with a top-level “Component” type implementing basic bounds management, and event processing
Drawn using underlying 2D graphics library
Input event processing and handling
– Typically mouse and keyboard events
Bounds management (damage/redraw)
– Only redraw areas in need of updating
![Page 25: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/25.jpg)
What are Some Examples of Components?
![Page 26: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/26.jpg)
What are Some Examples of Components?
-Windows
-Layout panels
-Drawing panes
-Buttons
-Sliders
-Scrollbars
-Images
-Dropdown boxes
-Toolbars
-Menus
-Dialogue Boxes
-Progress indicators
-Video
-Icons
-Links
-Checkboxes
-Radio buttons
-Etc.
![Page 27: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/27.jpg)
Periodic Table of Motif Widgets
![Page 28: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/28.jpg)
Java Swing Widgets
![Page 29: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/29.jpg)
Windows Vista/.Net Widgets
![Page 30: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/30.jpg)
User Interface Components
public void paint(Graphics g) {
g.fillRect(…); // interior
g.drawString(…); // label
g.drawRect(…); // outline
}
• Each component is an object with
– Bounding box
– Paint method for drawing itself
• Drawn in the component’s coordinate system
– Callbacks to process input events
• Mouse clicks, typed keys
![Page 31: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/31.jpg)
2D Graphics Model• Every component is a clipped drawing canvas
with a coordinate system– Origin typically at top-left, increasing down and to the right
– Units depend on the output medium (e.g., pixels for screen)
– Rendering methods
• Draw, fill shapes
• Draw text strings
• Draw images
(0,0)
(0,0)
![Page 32: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/32.jpg)
Composing a User InterfaceLabel TextArea
Buttons
How might we instruct the computer to generate this layout?
![Page 33: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/33.jpg)
Absolute LayoutLabel
TextArea
Buttons
(x=0, y=0, w=350, h=20)
(x=0, y=20, w=350, h=150)
(x=200, y=175, w=45, h=30)
(x=250, y=175, w=85, h=30)
But this is inflexible and doesn’t scale or resize well.
![Page 34: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/34.jpg)
Containment HierarchyWindow
Panel
Label TextArea Panel
Button Button
![Page 35: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/35.jpg)
Component Layout
Border Layout
(direct placement)
NORTH
CENTER
SOUTHstrutssprings
“Struts and Springs”
(simple constraint-
based layout)
• Each container is responsible for allocating space for and positioning its contents
Window
Panel
Label TextArea Panel
Button Button
![Page 36: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/36.jpg)
Events
![Page 37: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/37.jpg)
Events
User input is modeled as “events” that must be handled by the system and applications.
Examples?
- Mouse input (and touch, pen, etc.)
- Mouse entered, exited, moved, clicked, dragged
- Inferred events: double-clicks, gestures
- Keyboard (key down, key up)
- Sensor inputs
- Window movement, resizing
![Page 38: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/38.jpg)
Anatomy of an Event
An event encapsulates the information needed for handlers to react to the input
– Event Type (mouse moved, key down, etc)
– Event Source (the input component)
– Timestamp (when did event occur)
– Modifiers (Ctrl, Shift, Alt, etc)
– Event Content
• Mouse: x,y coordinates, button pressed, # clicks
• Keyboard: which key was pressed
![Page 39: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/39.jpg)
Events
Level of abstraction may vary. Consider:
- Mouse down vs. double click vs. drag
- Pen move vs. gesture
![Page 40: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/40.jpg)
Callbacks
mouse over
click
drag
onMouseOver(Event e){…}
onMouseClick(Event e){…}
onMouseClick(Event e){…}
onMouseDown(Event e){…}
onMouseUp(Event e){…}
Slider
![Page 41: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/41.jpg)
Event Dispatch Loop
Event Queue
• Queue of input events
Event Loop (runs in dedicated thread)
• Remove next event from queue
• Determine event type
• Find proper component(s)
• Invoke callbacks on components
• Repeat, or wait until event arrives
Component
• Invoked callback method
• Update application state
• Request repaint, if needed
Mouse moved (t0,x,y)
![Page 42: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/42.jpg)
Event DispatchEvent Queue
• Mouse moved (t0,x,y)
• Mouse pressed (t1,x,y,1)
• Mouse dragged (t2,x,y,1)
• Key typed (t3, „F1‟)
• …
(queues and dispatches
incoming events in a
dedicated thread)
/* callback for TextArea */
public void mouseMoved(e) {
// process mouse moved event
}
Window
Panel
Label TextArea Panel
Button Button
![Page 43: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/43.jpg)
10/15/2008 43
Interactor Tree
Display Screen
Outer Win [black]
Result Win [tan]Result String
Inner Win [green]
Keypad [Teal]
- button
+ button
0 button
= button
7 8 9
4 5 6
0 + -
1 2 3
=
93.54
ENT
![Page 44: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/44.jpg)
Model-View-Controller Architecture
![Page 45: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/45.jpg)
Model-View-Controller
Architecture for interactive apps
– introduced by Smalltalk developers at PARC
Partitions application in a way that is
– scalable
– maintainable
Model
View
Controller
![Page 46: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/46.jpg)
Example Application
Blue circles: 4
Cardinal squares: 2
![Page 47: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/47.jpg)
Model
Information the app is trying to manipulate
Representation of real world objects
– circuit for a CAD program
• logic gates and wires connecting them
– shapes in a drawing program
• geometry and color
ModelView
Controller
![Page 48: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/48.jpg)
View
Implements a visual display of the model
May have multiple views
– e.g., shape view and numerical view
Model
View
Controller
![Page 49: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/49.jpg)
Multiple Views
Blue circles: 4
Cardinal squares: 2
![Page 50: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/50.jpg)
View
Implements a visual display of the model
May have multiple views
– e.g., shape view and numerical view
Any time the model is changed, each view must be notified so that it can change later
– e.g., adding a new shape
Model
View
Controller
![Page 51: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/51.jpg)
Controller
Receives all input events from the user
Decides what they mean and what to do
– communicates with view to determine the objects being manipulated (e.g., selection)
– calls model methods to make changes on objects
• model makes change and notifies views to update
Model
View
Controller
![Page 52: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/52.jpg)
Controller
Blue circles: 3
Cardinal squares: 2
![Page 53: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/53.jpg)
Controller
Blue circles: 3
Cardinal squares: 2
![Page 54: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/54.jpg)
Controller
Blue circles: 3
Cardinal squares: 2
Click!
![Page 55: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/55.jpg)
Controller
Blue circles: 4
Cardinal squares: 2
![Page 56: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/56.jpg)
Relationship of View & Controller
“pattern of behavior in response to user events (controller issues) is independent of visual geometry (view issues)” –Olsen, Chapter 5.2
![Page 57: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/57.jpg)
Relationship of View & Controller
“pattern of behavior in response to user events (controller issues) is independent of visual geometry (view issues)”
Controller must contact view to interpret what user events mean (e.g., selection)
![Page 58: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/58.jpg)
Combining View & Controller
View and controller are tightly intertwined
– lots of communication between the two
Almost always occur in pairs
– i.e., for each view, need a separate controller
Many architectures combine into a single class
Model
View
Controller
![Page 59: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/59.jpg)
Why MVC?
Combining MVC into one class will not scale
– model may have more than one view
• each is different and needs update when model changes
Separation eases maintenance and extensibility
– easy to add a new view later
– model info can be extended, but old views still work
– can change a view later, e.g., draw shapes in 3-d (recall, view handles selection)
– flexibility of changing input handling when using separate controllers
![Page 60: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/60.jpg)
Adding Views Later
Blue circles: 4
Cardinal squares: 2
![Page 61: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/61.jpg)
Changing the Display
How do we redraw when shape moves?
![Page 62: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/62.jpg)
Moving Cardinal Square
Blue circles: 4
Cardinal squares: 2
![Page 63: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/63.jpg)
Erase w/ Background Color and Redraw
Blue circles: 4
Cardinal squares: 2
![Page 64: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/64.jpg)
Changing the Display
Erase and redraw
– using background color to erase fails
– drawing shape in new position loses ordering
Move in model and then redraw view
– change position of shapes in model
– model keeps shapes in a desired order
– tell all views to redraw themselves in order
– slow for large / complex drawings
• flashing! (can solve w/ double buffering)
![Page 65: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/65.jpg)
Damage / Redraw Method
View informs windowing system of areas that need to be updated (i.e., damaged)
– does not redraw them at this time…
Windowing system
– batches updates
– clips them to visible portions of window
Next time waiting for input
– windowing system calls Repaint method
• passes region that needs to be updated
![Page 66: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/66.jpg)
Damage old, Change position in model, Damage new
Blue circles: 4
Cardinal squares: 2
![Page 67: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/67.jpg)
Event Flow
Creating a new shape
![Page 68: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/68.jpg)
Event Flow (cont.)
Assume blue circle selected
Blue circles: 0
Cardinal squares: 0
![Page 69: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/69.jpg)
Event Flow (cont.)
Press mouse over tentative position
Windowing system identifies proper window for event
Controller for drawing area gets mouse click event
Checks mode and sees “circle”
Calls model’s AddCircle method with new position
Blue circles: 0
Cardinal squares: 0
![Page 70: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/70.jpg)
Event Flow (cont.)
AddCircle adds new circle to model’s list of objects
Model then notifies list of views of change
– drawing area view and text summary view
Views notifies windowing system of damage
– both views notify WS without making changes yet!
• model may override
Blue circles: 0
Cardinal squares: 0
![Page 71: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/71.jpg)
Event Flow (cont.)
Views return to model, which returns to controller
Controller returns to event handler
Event handler notices damage requests pending and responds
If one of the views was obscured, it would be ignored
Blue circles: 0
Cardinal squares: 0
![Page 72: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/72.jpg)
Event Flow (cont.)
Event handler calls views’ Repaint methods with damaged areas
Views redraw all objects in model that are in damaged area
Blue circles: 1
Cardinal squares: 0
![Page 73: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/73.jpg)
Dragging at Interactive Speeds
Damage old, move, damage new method may be
too slow
– must take less than ~100 ms to be smooth
Solutions
– don’t draw object, draw an outline (cartoon)
• use XOR to erase fast (problems w/ color)
– save portion of frame buffer before dragging
• draw bitmap rather than redraw the component
– modern hardware often alleviates the problem
![Page 74: Model-View-Controller and Event Driven UIjfc/cs160/F08/lecs/lec12.pdfEvent-Driven UIs Old model (e.g., UNIX shell, DOS) –Interaction controlled by system, user queried for input](https://reader034.vdocuments.net/reader034/viewer/2022042310/5ed7a61748b98015c2020f6d/html5/thumbnails/74.jpg)
Review
2D graphics fundamentals
Event-Driven Interfaces– Hierarchy of components or widgets
– Input events dispatched to components
– Components process events with callback methods
Model-View-Controller– Break up a component into
• Model of the data backing the widget(s)
• View determining the look of the widget
• Controller for handling input events
– Provides scalability and extensibility