model-view controller iat351
TRANSCRIPT
![Page 2: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/2.jpg)
Administrivia
• CHANGE to assignments and grading • 4 assignments • This one (Assignment 3) is worth 20% • Assignment 4 is worth 25% (it’s a longer one)
• Final project proposals should be in to me by the beginning of next week.
Advanced HCI | IAT351 | 9.05.2012 2
![Page 3: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/3.jpg)
Administrivia
• Assignment 3 • Multiple user interfaces to your same application • The “regular” laptop/desktop view you have been
assuming • A mobile phone-size version
• 2 parts to this assignment: • DESIGN CHOICES • MODULAR CODE
Advanced HCI | IAT351 | 9.05.2012 3
![Page 4: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/4.jpg)
Model-View-Controller | IAT351 | October 15, 2012
Problems with GUIs
User interfaces are especially prone to changes in requirements
• New types of input • Keyboard • Mouse • Pen • Remote
• New types of output • Porting to different “look-and-feel” • Information visualization: charts, graphs, plots • Output device heterogeneity: phones, applets, Javascript,
HTML, Swing
![Page 5: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/5.jpg)
Model-View-Controller | IAT351 | October 15, 2012
• New features require UI changes • ex. Add in-text spellcheck to
word processor
• User must have a way to access the feature
• Feedback
• What is changing “underneath the hood”?
![Page 6: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/6.jpg)
Model-View-Controller | IAT351 | October 15, 2012
• Changes to UI: Need to input corrections and update the underlying document model
• Changes to underlying document model: None
![Page 7: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/7.jpg)
Multiple views of same computation
![Page 8: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/8.jpg)
Model-View-Controller | IAT351 | October 15, 2012
Separate the user interface from the application logic
• Many different ways to present and interact with the same underlying information
• Presentation and interaction needs to be only loosely coupled to the underlying computational information abstraction
• How do we implement this?
![Page 9: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/9.jpg)
Model-View-Controller | IAT351 | October 15, 2012
MVC: Model-View-Controller
• Architectural pattern for building systems • Divide system responsibilities into three parts
• Model : Contains all program data and logic • View : Visual representation of model • Controller : manages input and system behavior
• Step by step • User uses controller to change data in model • Model then informs view(s) of change • View changes visual presentation to reflect change
![Page 10: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/10.jpg)
Model-View-Controller | IAT351 | October 15, 2012
Model-View-Controller (MVC) Pattern
• Developed at Xerox PARC in 1978 for Smalltalk™
Model
View
Controller
Application data and logic
User interaction
Visual interface
![Page 11: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/11.jpg)
Model-View-Controller | IAT351 | October 15, 2012
MVC Interaction Order
1 User performs action, controller is notified 2 Controller may request changes to model 3 Controller may tell view to update 4 Model may notify view if it has been modified 5 View may need to query model for current data 6 View updates display for user
Model View
Controller 1 2 3
4,5 6
![Page 12: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/12.jpg)
Model-View-Controller | IAT351 | October 15, 2012
MVC Pattern – Advantages
• Separates data from its appearance • More robust • Easier to maintain
• Provides control over interface • Easy to support multiple displays for same data
Model
Model
GUI
GUI
GUI
![Page 13: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/13.jpg)
Model-View-Controller | IAT351 | October 15, 2012
MVC Pattern – Model
• Contains application & its data • Provide methods to access & update data
• Model interface defines allowed interactions • Fixed interface enable both model & GUIs to be easily pulled out and
replaced • Examples
• Text documents (DOM – document object model) • Spreadsheets
• provides a number of services to manipulate the data e.g., recalculate, save
• computation and persistence issues • Web browser
![Page 14: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/14.jpg)
Model-View-Controller | IAT351 | October 15, 2012
MVC Pattern – View
• Provides visual representation of model • Multiple views can display model at same time
• Example: data represented as table and graph
• When model is updated, all its views are informed & given chance to update themselves
![Page 15: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/15.jpg)
Model-View-Controller | IAT351 | October 15, 2012
MVC Pattern – Controller
• Users interact with the controller • Interprets mouse movement, keystrokes, etc. • Communicates those activities to the model • Interaction with model causes view(s) to update
![Page 16: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/16.jpg)
Model-View-Controller | IAT351 | October 15, 2012
Dependencies
![Page 17: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/17.jpg)
Principles of GUI Design
• Model
• Controller • View
• perform actual work (logic) • independent of the GUI ;provide access methods • Lets user control what work the program is doing • Design of controller depends on model
• Lets user see what the program is doing • Should not display what controller thinks is happening
(base display on model, not controller)
Model-View-Controller | IAT351 | October 15, 2012
![Page 18: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/18.jpg)
Model-View-Controller | IAT351 | October 15, 2012
Principles of GUI Design
• Model is separate • Never mix model code with GUI code • View should represent model as it really is
• Not some remembered status
• In GUIs, user code for view and controller tend to mingle • Especially in small programs
• To date, you largely have a mishmash of these functions in your application … except for ..
![Page 19: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/19.jpg)
Model-View-Controller | IAT351 | October 15, 2012
Do you have a good model?
• Could you reuse the model if you wanted to port the application to: • a command-line textual interface • an interface for the blind • an iPod • a web application, run on the web server, accessed
via a web browser
![Page 20: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/20.jpg)
Dependencies
• Issues • need to maintain consistency in the views (or
observers) • need to update multiple views of the common data
model (or subject)
• need clear, separate responsibilities for presentation (look), interaction (feel), computation, persistence
Model-View-Controller | IAT351 | October 15, 2012
![Page 21: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/21.jpg)
Swing components are internally based on MVC
• the component is divided into three separate objects: • view: how it looks (output/display) • model: what state it is in (data) • controller: what user input it accepts and
what it does (input/events)
21
![Page 22: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/22.jpg)
22
Internal MVC components within JButton
![Page 23: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/23.jpg)
Model-View-Controller | IAT351 | October 15, 2012
Fundamental principle
• Separation: • you can modify or create views without affecting the underlying
model • the model should not need to know about all the kinds of views
and interaction styles available for it
• How do we do this in Swing? • the programmer has the responsibility of program
modularization • can put data into graphical components (bad style), or
represent it separately (a better way)
![Page 24: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/24.jpg)
Delegate model
• In practice, Swing provides a delegate approach
• View and controller may share same “delegate class” • Inner class
• Controllers are basically listeners
Advanced HCI | IAT351 | 9.05.2012 24
![Page 25: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/25.jpg)
Model-View-Controller (MVC)
25
often, interactions between controller and view, too
![Page 26: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/26.jpg)
Controller
Model
View
createsview
attachesview tomodel
updatesview
![Page 27: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/27.jpg)
Java supports MVC with its Observable library class and Observer interface
w A “model” class extends Observable, which provides methods for attaching observers and notifying them when a change occurs
w A “view” class implements Observer and must supply the update method, called automatically when the model changes
w A “controller” class implements at least one Listener interface
w A “manager” class creates these and attaches/detaches them to each other.
w Often the controller class is the “manager”, but this is entirely up to the individual application structure
![Page 28: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/28.jpg)
Simple example
Demo (src is on the website) 4 classes: • JournalModel.java extends java.util.Observable • JournalView.java implements java.util.Observer • JournalController.java implements ActionListener • RunJournalMVC.java
Advanced HCI | IAT351 | 9.05.2012 28
![Page 29: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/29.jpg)
public void setValue(int value) {
this.entryCounter = value;
setChanged(); notifyObservers(entryCounter); } //setValue()
public void incrementValue() {
entryCounter++;
setChanged(); notifyObservers(entryCounter); }
JournalModel
public void update(Observable obs, Object obj) {
//who called us and what did they send? myTextField.setText("" + ((Integer)obj).intValue()); //obj is an Object, need to cast to an Integer
}
Advanced HCI | IAT351 | 9.05.2012 29
JournalView
![Page 30: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/30.jpg)
addModel(JournalModel m) { this.model=m; }
actionPerformed(ActionEvent e)
{
model.incrementValue();
}
JournalModel
//create Model and View myModel = new JournalModel();
myView1 = newJournalView();
bview = new JournalView(400,400,200,200, Color.YELLOW);
myModel.addObserver(myView1); myModel.addObserver(bview); myController = new JournalController(); myController.addModel(myModel);
Advanced HCI | IAT351 | 9.05.2012 30
Manager (RunVMC) JournalController
![Page 31: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/31.jpg)
addModel(JournalModel m) { this.model=m; }
actionPerformed(ActionEvent e)
{
model.incrementValue();
}
JournalModel
//add controllers to view because of BUTTON myView1.addController(myController); bview.addController(myController); }
Advanced HCI | IAT351 | 9.05.2012 31
Manager (RunVMC) JournalController
![Page 32: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/32.jpg)
Advanced HCI | IAT351 | 9.05.2012 32
![Page 33: Model-View Controller IAT351](https://reader030.vdocument.in/reader030/viewer/2022012718/61b054f6c2d9e93400170c11/html5/thumbnails/33.jpg)
Summary: MVC Advantages
• Input processing is separated from output processing. • Controllers can be interchanged, allowing different user
interaction modes. • Multiple views of the model can be supported easily.