Transcript CompSci 230 S2 2015 Software Construction MVC MVC Architecture  A typical application includes software to  maintain application data,    present output    outline view or print preview in.

CompSci 230 S2 2015
Software Construction
MVC
MVC Architecture

A typical application includes software to

maintain application data,



present output



outline view or print preview in a word processor
graphical view of chess game
process user input


2
document text in a word processor
state of a chess game -- positions of pieces
key presses
mouse click on controls
13
Swing’s Model-based Architecture


“Swing architecture is rooted in the model-view-controller (MVC)
design that dates back to SmallTalk.
“MVC architecture calls for a visual application to be broken up
into three separate parts:



A model that represents the data for the application
The view that is the visual representation of that data
A controller that takes user input on the view and translates that to
changes in the model.”
[Amy Fowler, ibid.]
3
13
MVC: According to Wikipedia

A controller can send commands to the model to
update the model's state (e.g., editing a document).


A model notifies its associated views and controllers
when there has been a change in its state.



4
It can also send commands to its associated view to
change the view's presentation of the model (e.g., by
scrolling through a document).
This notification allows the views to produce updated
output, and the controllers to change the available set of
commands.
In some cases an MVC implementation may instead be
'passive' and other components must poll the model for
updates rather than being notified.
A view requests information from the model that it
uses to generate an output representation to the
user.
13
Model-View-Controller (MVC)
UI:
refresh
View
Data display
Controller
events
refresh
Data:
5
User input
manipulate
Model
Data model
13
Spaghetti Code vs Modular Design

Spaghetti Code





Modular System




6
Haphazard connections, probably grown over time
No visible cohesive groups
High coupling: high interaction between random
parts
Understand it: all or nothing
Both examples have
10 modules and 13
connections!
High cohesion within modules
Low coupling between modules
Modules can be understood separately
Interaction between modules is easily-understood
and thoroughly specified
13
E.g. C# TreeView Control
TreeView control
View
Controller
treeView1.Nodes
Java:
model listeners
Nodes collection
Model
7
13
Multiple Views
View
Controller
View
Controller
Model
8
13
Typical real-world approach
View
Controller
Data display
Data manipulation logic
Model
Data model




9
Sometimes the Controller and View are combined, especially in small programs
Combining the Controller and View is appropriate if they are very
interdependent
The Model should still be independent
Never mix Model code with GUI code!
13
E.g. C# TreeView Control
TreeView control
View
Controller
treeView1.Nodes
Java:
model listeners
Nodes collection
Model
10
13
C# DataBase Controls
DataGrid
control
-scroll, sort, edit,
…
View
Controller
DataSet class
DB
11
-tables
-columns
-rows
Model
13
MVC Example in Java
<<interface>>
Javax.swing.ListModel
<<abstract>>
AbstractListModel
DefaultListModel
Javax.swing.JComponent
JList

modifies
notifies
DefaultList
Model
Example: JList


12
isEmpty(): boolean
getSize(): int
addElement(Object)
removeElement(Object)
elementAt(): Object
removeElementAt(int)
insertElementAt(int)
indexOf(Object): int
etc
Javax.swing.
JList
A javax.swing.ListModel is an object which maintains a list of objects: it knows
how big the list is, which object is where in the list, etc, and can insert/remove
objects
A javax.swing.JList is a graphical component giving a view of the list and able to
receive user input to modify the list
13