1 Model View Controller. 2 Outline Review Definitions of MVC Why do we need it? Administiriva Changing the display Event flow Dragging at interactive.

Slides:



Advertisements
Similar presentations
Introduction to Macromedia Director 8.5 – Lingo
Advertisements

Create a Simple Game in Scratch
Objectives Build and modify an organization chart.
Create a Simple Game in Scratch
OOP Design Patterns Chapters Design Patterns The main idea behind design patterns is to extract the high level interactions between objects and.
Glue Microarray Database System Using Struts Technology Chen Liu Bioinformatics Group Meeting May 13, 2002.
6/13/20151 CS 160: Lecture 13 Professor John Canny Fall 2004.
Graphical User Interface (GUI) Nelson Padua-Perez Bill Pugh Department of Computer Science University of Maryland, College Park.
Graphical User Interface (GUI) Nelson Padua-Perez Chau-Wen Tseng Department of Computer Science University of Maryland, College Park.
0 CS 160: Design Process: Implement Event-based UI Programming, Model-View-Controller, and the Web Jeffrey Nichols IBM Almaden Research Center
Object-Oriented Analysis and Design
Code Generation CS 480. Can be complex To do a good job of teaching about code generation I could easily spend ten weeks But, don’t have ten weeks, so.
Stanford hci group / cs376 research topics in human-computer interaction UI Software Tools Scott Klemmer 27 October 2005.
SE320: Introduction to Computer Games Week 8: Game Programming Gazihan Alankus.
User Interface Programming in C#: Direct Manipulation Chris North CS 3724: HCI.
© 2011 Delmar, Cengage Learning Chapter 8 Building Complex Animations.
Chapter 9 Introduction to ActionScript 3.0. Chapter 9 Lessons 1.Understand ActionScript Work with instances of movie clip symbols 3.Use code snippets.
Chapter 3 Working with Symbols and Interactivity.
Copyright 2007, Information Builders. Slide 1 Maintain & JavaScript: Two Great Tools that Work Great Together Mark Derwin and Mark Rawls Information Builders.
MVC pattern and implementation in java
EnSight analyze, visualize, communicate EnSight 6.x Advanced Training Part 1 Instructors: Mike Krogh, Anders Grimsrud.
Object-Oriented Design & Patterns Cay S
Software Tools.  It accomplishes an important task  (for better and for worse) You don’t have to make it yourself, and it abstracts a set of knowledge.
MVC and MVP. References enter.html enter.html
Introduction to Visual Basic. Quick Links Windows Application Programming Event-Driven Application Becoming familiar with VB Control Objects Saving and.
Model-View-Controller Ku-Yaw Chang Assistant Professor, Department of Computer Science and Information Engineering Da-Yeh University.
MVC CompSci 230 S Software Construction. MVC Architecture  A typical application includes software to  maintain application data,  document text.
ISP666 MVC & Design Patterns. Outline Review Event Programming Model Model-View-Controller Revisit Simple Calculator Break Design Patterns Exercise.
(c) University of Washington08-1 CSC 143 Models and Views Reading: Ch. 18.
Gary MarsdenSlide 1University of Cape Town Human-Computer Interaction - 3 Programmer Support Gary Marsden ( ) July 2002.
Computer Science 111 Fundamentals of Programming I Model/View/Controller and Data model design.
COMP 6471 Software Design Methodologies Winter 2006 Dr Greg Butler
4.1 Advanced Operating Systems Desktop Scheduling You are running some long simulations. In the mean time, why not watch an illegally downloaded Simpsons.
Web Application Design Patterns. Large Scale Architectures Early systems were monolithic applications –Large and hard to maintain Then came the client-server.
Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 Chapter 5: MVC Architecture.
Model View Controller (MVC) Bigger than a Pattern: It’s an Architecture Rick Mercer with help from many others 1.
User Interface Programming in C#: Direct Manipulation Chris North CS 3724: HCI.
Model View Controller A Pattern that Many People Think They Understand, But Has A Couple Meanings.
WIRED 4 An extensible generic Event Display Mark Donszelmann SLAC, Stanford, U.S.A. CHEP2004, 27 september – 1 october Interlaken, Switzerland.
CS324e - Elements of Graphics and Visualization Java GUIs - Event Handling.
Java Direct Manipulation Chris North cs3724: HCI.
Interactive Programs Java API. Terminology Event—an action or occurrence, not part of a program, detected by the program. Events can be Event—an action.
CS160 Discussion Section Matthew Kam Apr 7, 2003.
Model View Controller (MVC) Bigger than a Pattern: It’s an Architecture Rick Mercer with help from many of others 1.
TRIGGERS Triggers tell a script to start executing There are four types of triggers: When green flag is clicked When I am clicked When is pressed When.
Java Dynamic Graphics.
ANDROID AND MODEL / VIEW / CONTROLLER. Slide 2 Design Patters Common solutions to programming problems are called design patterns Design patterns are.
SOEN 343 Software Design Section H Fall 2006 Dr Greg Butler
Model-View-Controller Architecture. 2 Give someone a program, you frustrate them for a day; teach them how to program, you frustrate them for a lifetime.
Model View Controller (MVC) an architecture Rick Mercer with help from many of others 1.
Extracting Information from an Excel List The purpose of creating a database, or list in Excel, is to be able to manipulate the data elements in ways that.
Scratch for Interactivity Dr. Ben Schafer Department of Computer Science University of Northern Iowa.
Java - hello world example public class HelloWorld { public static void main (String args[]) { System.out.println("Hello World"); }
Creating a Simple Game in Scratch Barb Ericson Georgia Tech May 2009.
High degree of user interaction Interactive Systems: Model View Controller Presentation-abstraction-control.
Programming Paradigms, Software Architectural Patterns, and MVC CS 378 – Mobile Computing for iOS Dr. William C. Bulko.
Mobile Computing CSE 40814/60814 Spring 2017.
Scratch for Interactivity
Section 8: Model-View-Controller
Welcome to… CATIA.
Section 8: Model-View-Controller
Chapter 16 – Programming your App’s Memory
Model-View-Controller Patterns and Frameworks
Using Functions
Professor John Canny Spring 2004 March 5
Model, View, Controller design pattern
Professor John Canny Spring 2003 March 12
Creating a Simple Game in Scratch
Presentation transcript:

1 Model View Controller

2 Outline Review Definitions of MVC Why do we need it? Administiriva Changing the display Event flow Dragging at interactive speeds

3 Model View Controller Model-View-Controller Architecture for interactive apps introduced by Smalltalk developers at PARC Partitions application so that it is scalable maintainable

4 Example Application Blue circles: 4 Cardinal squares: 2

5 Model View Controller Model Information application is manipulating Data rep. of “real” world objects “circuit” for a CAD program ? logic gates & connections between them shapes in a drawing program ? geometry & color

6 View Implements visual display of model May have multiple views e.g., circuit view & netlist view (wires & connections) Model View Controller

7 Multiple Views Blue circles: 4 Cardinal squares: 2 Shape view Numerical View

8 Implements visual display of model May have multiple views e.g., shape view & numerical view When model is changed notify views so view can change later (e.g., adding new item) Model View Controller

9 Receives all input events from user Decides what they mean & what to do Model View Controller

10 Controller Blue circles: 0 Cardinal squares: 0

11 Controller Blue circles: 0 Cardinal squares: 0

12 Controller Communication Communicates with view determine which objects are being manipulated e.g., which object was selected with mouse click Calls model methods to make changes model makes change & notifies views to update Model View Controller

13 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)

14 Model View Controller Combining View & Controller View & controller 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 in 1 class

15 Why MVC? Combining MVC into one class or using global variables will not scale. Why? model may have more than one view each different & needing update on model changes Separation eases maintenance. Why? easy to add a new view later may need new model info, but old views still work can change a view later e.g., draw shapes in 3-d  recall that the view handles selection

16 Adding Views Later Blue circles: 4 Cardinal squares: 2

17 Changing the Display How do we redraw when shape moves?

18 How can we Move The Cardinal Square? Blue circles: 4 Cardinal squares: 2 Ideas…?

19 Erase w/ Background Color and Redraw Blue circles: 4 Cardinal squares: 2 Works fine in this case

20 Moving Cardinal Square Blue circles: 4 Cardinal squares: 2

21 Erase w/ Background Color and Redraw Blue circles: 4 Cardinal squares: 2

22 Erase w/ Background Color and Redraw Blue circles: 4 Cardinal squares: 2 No way should cardinal be on top! Big hole here!

23 Changing the Display Erase & redraw fails using background color to erase leaves holes drawing shape in new position loses ordering how do we do it correctly? Move in model & then redraw view change position of shapes in model model keeps shapes in a desired order tell all views to redraw themselves in order drawbacks? slow for large / complex drawings -> flashing solution?

24 Damage / Redraw Method View informs windowing system of damage areas that need to be updated view 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 Redraw method for window passes region that needs to be updated

25 Blue circles: 4 Cardinal squares: 2 Damage old, Change position in model, Damage new, Redraw

26 Event Flow Creating a new shape

27 Event Flow (cont.) Assume blue circle selected Blue circles: 0 Cardinal squares: 0

28 Event Flow (cont.) Press mouse over tentative position Window sys. identifies proper window for event Drawing area controller gets mouse click event Blue circles: 0 Cardinal squares: 0  Checks mode & sees “circle” Calls model’s AddCircle method with position

29 Event Flow (cont.) Views notify windowing system of damage both views notify WS without making changes yet! AddCircle adds new obj. to model’s list of objs Model then notifies list of views of change drawing area view text summary view Blue circles: 0 Cardinal squares: 0

30 Event Flow (cont.) Views return to model Model returns to controller Controller returns to event handler Blue circles: 0 Cardinal squares: 0 Event handler notices damage requests pending & responds if one of the views was obscured, it would be ignored

31 Event Flow (cont.) Event handler calls view’s Redraw methods with damaged area Views redraw all objects in model that are in damaged area Blue circles: 1 Cardinal squares: 0

32 Dragging at Interactive Speeds Obvious method damage old, move a few pixels, damage new Problems? may be too slow how fast must we do that to look smooth? must take less than 200 ms Solutions? don’t draw object, draw an outline (or dashed box) use XOR to erase quickly  complement (problems w/ color) save portion of frame buffer before dragging  restore afterwards to erase less of an issue these days with FAST hardware

33 Summary The three parts of MVC are model, which is? underlying information that application is manipulating view, which is? visual display of the model information controller, which does? handles interaction with the user & decides what to do Which two pieces are often combined? view & controller – they always occur in pairs anyways MVC partitions an application so that it is scalable – may have multiple views for a single model maintainable – add or change views later