MVC

CompSci 230 S2 2015Software Construction

2

MVC Architecture A typical application includes software to

maintain application data, document text in a word processor state of a chess game -- positions of pieces

present output outline view or print preview in a word processor graphical view of chess game

process user input key presses mouse click on controls

13

3

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.]

13

4

MVC: According to Wikipedia A controller can send commands to the model to

update the model's state (e.g., editing a document). 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).

A model notifies its associated views and controllers when there has been a change in its state. 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

5

Model-View-Controller (MVC)

Data model

Data display User input

Model

View ControllerUI:

Data:

manipulaterefresh

refresh

events

13

6

Spaghetti Code vs Modular Design Spaghetti Code

Haphazard connections, probably grown over time

No visible cohesive groups High coupling: high interaction between

random parts Understand it: all or nothing

Modular System High cohesion within modules Low coupling between modules Modules can be understood separately Interaction between modules is easily-

understood and thoroughly specified

Both examples have 10 modules and 13 connections!

13

7

E.g. C# TreeView Control

TreeView control

Nodes collection

treeView1.Nodes

Java:model listeners

Model

ViewController

13

8

Multiple Views

Model

ViewController

View

Controller

13

9

Typical real-world approach

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!

Data model

Data display Data manipulation logic

Model

View Controller

13

10

E.g. C# TreeView Control

TreeView control

Nodes collection

treeView1.Nodes

Java:model listeners

Model

ViewController

13

11

C# DataBase Controls

DataSet class -tables

-columns -rows

DataGrid control

-scroll, sort, edit, …

Model

ViewController

DB

13

12

MVC Example in Java

Example: 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

DefaultListModel

Javax.swing.JList

modifies notifies

DefaultListModel

<<abstract>>

AbstractListModel

<<interface>>Javax.swing.ListMode

l

isEmpty(): booleangetSize(): intaddElement(Object)removeElement(Object)elementAt(): ObjectremoveElementAt(int)insertElementAt(int)indexOf(Object): intetc

JList

Javax.swing.JComponent

13