Model-View-Model-View-ControllerController

design patterndesign pattern

Design PatternsDesign Patterns

“Making abstractions which are powerful and deep is an art. It requires tremendous ability to go to the heart of things, and get at the really deep abstraction. No one can tell you how to do it in science. No one can tell you how to do it in design. – Christopher Alexander

Christopher Alexander

““A pattern language actually gives us the power toA pattern language actually gives us the power togenerate these coherent arrangements of space. Thus,generate these coherent arrangements of space. Thus,as in the case of natural languages, the pattern languageas in the case of natural languages, the pattern languageis generative. It not only tells us the rules ofis generative. It not only tells us the rules ofarrangement, but shows us how to constructarrangement, but shows us how to constructarrangements—as many as we want—which satisfy the arrangements—as many as we want—which satisfy the rules. . . When a person is faced with an act of design, rules. . . When a person is faced with an act of design, what he does what he does is governed entirelyis governed entirely by the pattern by the pattern language which he has in his mind at that moment. . . His language which he has in his mind at that moment. . . His act of design, whether humble, or gigantically complex, act of design, whether humble, or gigantically complex, is governed entirely byis governed entirely by the patterns he has in his mind at the patterns he has in his mind at that moment, and his ability to combine these patterns that moment, and his ability to combine these patterns to form a new design.” –Christopher Alexanderto form a new design.” –Christopher Alexander

Software design patternsSoftware design patterns Starting in the late 80’s, OO programming researchers Starting in the late 80’s, OO programming researchers

developed the idea that software design was like other developed the idea that software design was like other design disciplines and could benefit from recognizing design disciplines and could benefit from recognizing common, successful design patterns.common, successful design patterns. Classic book: Design Patterns: Elements of Reusable Classic book: Design Patterns: Elements of Reusable

Object-Oriented Software; Erich Gamma, Richard Object-Oriented Software; Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides; Addison-Helm, Ralph Johnson, and John Vlissides; Addison-Wesley, 1995 Wesley, 1995

Good starting point: Good starting point: http://hillside.net/http://hillside.net/ Basic idea: a competent software designer should be Basic idea: a competent software designer should be

familiar with a large set of design patterns that “work familiar with a large set of design patterns that “work well”.well”.

When presented with a new problem, you should start When presented with a new problem, you should start by selecting one or more patterns that “fit” the problem.by selecting one or more patterns that “fit” the problem.

The MVC patternThe MVC pattern

MVC stands for Model-View-MVC stands for Model-View-ControllerController

The Model is the actual internal The Model is the actual internal representationrepresentation

The View (or a View) is a way of The View (or a View) is a way of looking at or displaying the modellooking at or displaying the model

The Controller provides for user The Controller provides for user input and modificationinput and modification

Model

View

Controller

The ModelThe Model

Most programs are supposed to do work, Most programs are supposed to do work, not just be "another pretty face"not just be "another pretty face" but there are some exceptionsbut there are some exceptions useful programs existed long before GUIsuseful programs existed long before GUIs

The The ModelModel is the part that does the work is the part that does the work The Model should be independent of the The Model should be independent of the

GUIGUI Independence gives flexibility, robustnessIndependence gives flexibility, robustness

Model

View

Controller

The ControllerThe Controller

A GUI lets the user A GUI lets the user controlcontrol what work the what work the program is doingprogram is doing

The design of the GUI depends on the The design of the GUI depends on the Model...Model...

...but the Model should not depend on the ...but the Model should not depend on the GUIGUI

Unless the Model (what the program does) Unless the Model (what the program does) isis the GUI, these can always be separated the GUI, these can always be separated

Java's controls are Buttons, TextFields, etc.Java's controls are Buttons, TextFields, etc.

Model

View

Controller

The ViewThe View

The user has to be able to see, or The user has to be able to see, or viewview, what the program is doing, what the program is doing

The Model should be independent The Model should be independent of the View (but it can provide of the View (but it can provide access methods)access methods)

The View should not display what The View should not display what the Controller the Controller thinksthinks is happening is happening

Model

View

Controller

Combining the Combining the Controller and ViewController and View

Sometimes the Controller and View Sometimes the Controller and View are combined, especially in small are combined, especially in small programsprograms

Combining the Controller and View is Combining the Controller and View is appropriate if they are very appropriate if they are very interdependentinterdependent

The Model should still be independentThe Model should still be independent NeverNever mix Model code with GUI code! mix Model code with GUI code!

ModelView

Controller

Separation of concernsSeparation of concerns

As always, you want code independenceAs always, you want code independence The Model should not be contaminated The Model should not be contaminated

with control code or display codewith control code or display code The View should represent the Model as The View should represent the Model as

it really is, not some remembered statusit really is, not some remembered status The Controller should talk to the Model The Controller should talk to the Model

and View, not manipulate themand View, not manipulate them

The Bouncing Ball The Bouncing Ball AppletApplet

Each click of the Each click of the Step button Step button advances the ball a advances the ball a small amountsmall amount

The step number The step number and ball position and ball position are displayed in are displayed in the status linethe status line

The Ball Applet: ModelThe Ball Applet: Model

The Ball Applet shows a ball The Ball Applet shows a ball bouncing in a windowbouncing in a window

The Model controls the motion of the The Model controls the motion of the ballball

To know when to bounce, the Model To know when to bounce, the Model must know the size of the windowmust know the size of the window

The Model doesn’t need to know The Model doesn’t need to know anything else about the GUIanything else about the GUI

Sample CRC index cardSample CRC index card

Class Name

Responsibilities. . .. . .. . .

Collaborators. . .. . .. . .

ModelModel

Set initial Set initial positionposition

Move one stepMove one step

No No collaborators...collaborators...

……but allow but allow access from access from ViewView

Model

Model Model class Model { final int BALL_SIZE=20; int xPosition=0; int yPosition=0; int xLimit,yLimit; int xDelta=6; int yDelta=4; void makeOneStep ( ) { xPosition += xDelta; if (xPosition < 0) {xPosition=0;xDelta=-xDelta;} if (xPosition >= xLimit) {xPosition=xLimit; xDelta=-xDelta;} yPosition += yDelta; if (yPosition<0 || yPosition>=yLimit) { yDelta = -yDelta; yPosition += yDelta; } } // end of makeOneStep method} // end of Model class

Model (repeated)Model (repeated)

Set initial Set initial positionposition

Move one stepMove one step

No No collaborators...collaborators...

……but allow but allow access from access from ViewView

Model

The Ball Applet: ViewThe Ball Applet: View

The View needs access to the The View needs access to the ball’s state (in this case, it’s ball’s state (in this case, it’s x-y location)x-y location)

For a static drawing, the For a static drawing, the View doesn’t need to know View doesn’t need to know anything elseanything else

ViewView

Paint the ballPaint the ball Access ModelAccess Model

View

View View class View extends Canvas { Controller controller; Model model; int stepNumber = 0; public void paint(Graphics g) { g.setColor(Color.red); g.fillOval(model.xPosition, model.yPosition, model.BALL_SIZE, model.BALL_SIZE); controller.showStatus("Step " + (stepNumber++) + ", x = " + model.xPosition +", y = " + model.yPosition); } // end paint method

View (repeated)View (repeated)

Paint the ballPaint the ball Access ModelAccess Model

View

The Ball Applet: The Ball Applet: ControllerController

The Controller tells the Model what The Controller tells the Model what to doto do

The Controller tells the View when it The Controller tells the View when it needs to refresh the displayneeds to refresh the display

The Controller doesn’t need to know The Controller doesn’t need to know the inner workings of the Modelthe inner workings of the Model

The Controller doesn’t need to know The Controller doesn’t need to know the inner workings of the Viewthe inner workings of the View

ControllerController

Create ModelCreate Model Create ViewCreate View Give View access to Give View access to

ModelModel Tell Model to Tell Model to

advanceadvance Tell View to repaintTell View to repaint

ModelModel ViewView

Controller

Controller IController I

public class Controller extends Applet { Panel buttonPanel = new Panel (); Button stepButton = new Button ("Step"); Model model = new Model (); View view = new View ();

// more...

import java.applet.*;import java.awt.*;import java.awt.event.*;

Controller IIController II

public void init () { // Lay out components setLayout (new BorderLayout ()); buttonPanel.add (stepButton); this.add (BorderLayout.SOUTH, buttonPanel); this.add (BorderLayout.CENTER, view);

// more...

Controller IIIController III

// Attach actions to components stepButton.addActionListener (new ActionListener () { public void actionPerformed (ActionEvent event) { model.makeOneStep (); view.repaint (); }});

// more...

Controller IVController IV

// Tell the View about myself (Controller) and // about the Model view.model = model; view.controller = this;

} // end init method

// more...

Controller VController V

public void start ( ) { model.xLimit = view.getSize ( ).width - model.BALL_SIZE; model.yLimit = view.getSize ( ).height - model.BALL_SIZE; repaint (); } // end of start method

} // end of Controller class

Controller (repeated)Controller (repeated)

Create ModelCreate Model Create ViewCreate View Give View access to Give View access to

ModelModel Tell Model to Tell Model to

advanceadvance Tell View to repaintTell View to repaint

ModelModel ViewView

Controller