java model-view-controller design pattern. the mvc pattern mvc stands for model-view-controller the...
TRANSCRIPT
![Page 1: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/1.jpg)
Java
Model-View-Controllerdesign pattern
![Page 2: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/2.jpg)
The MVC pattern
• MVC stands for Model-View-Controller
• The Model is the actual internal representation
• The View (or a View) is a way of looking at or displaying the model
• The Controller provides for user input and modification
![Page 3: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/3.jpg)
Model
View
Controller
![Page 4: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/4.jpg)
The Model
• Most programs are supposed to do work, not just be "another pretty face"– but there are some exceptions– useful programs existed long before GUIs
• The Model is the part that does the work
• The Model should be independent of the GUI
• Independence gives flexibility, robustness
Model
View
Controller
![Page 5: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/5.jpg)
The Controller
• A GUI lets the user control what work the program is doing
• The design of the GUI depends on the Model...
• ...but the Model should not depend on the GUI
• Unless the Model (what the program does) is the GUI, these can always be separated
• Java's controls are Buttons, TextFields, etc.
Model
View
Controller
![Page 6: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/6.jpg)
The View
• The user has to be able to see, or view, what the program is doing
• The Model should be independent of the View (but it can provide access methods)
• The View should not display what the Controller thinks is happening
Model
View
Controller
![Page 7: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/7.jpg)
Combining the Controller and View
• 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!
ModelView
Controller
![Page 8: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/8.jpg)
Separation of concerns
• As always, you want code independence
• The Model should not be contaminated with control code or display code
• The View should represent the Model as it really is, not some remembered status
• The Controller should talk to the Model and View, not manipulate them
![Page 9: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/9.jpg)
The Bouncing Ball Applet
• Each click of the Step button advances the ball a small amount
• The step number and ball position are displayed in the status line
![Page 10: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/10.jpg)
The Ball Applet: Model
• The Ball Applet shows a ball bouncing in a window
• The Model controls the motion of the ball
• To know when to bounce, the Model must know the size of the window
• The Model doesn’t need to know anything else about the GUI
![Page 11: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/11.jpg)
Sample CRC index card
Class Name
Responsibilities. . .. . .. . .
Collaborators. . .. . .. . .
![Page 12: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/12.jpg)
Model
• Set initial position• Move one step
• No collaborators...• …but allow access
from View
Model
![Page 13: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/13.jpg)
Model I
class Model { final int BALL_SIZE = 20; int xPosition = 0; int yPosition = 0; int xLimit, yLimit; int xDelta = 6; int yDelta = 4; // more...
![Page 14: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/14.jpg)
Model II
void makeOneStep ( ) { xPosition += xDelta; if (xPosition < 0) { xPosition = 0; xDelta = -xDelta; } // more...
![Page 15: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/15.jpg)
Model III
if (xPosition >= xLimit) { xPosition = xLimit; xDelta = -xDelta; } // still more...
![Page 16: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/16.jpg)
Model IV
yPosition += yDelta; if (yPosition < 0 || yPosition >= yLimit) { yDelta = -yDelta; yPosition += yDelta; } } // end of makeOneStep method} // end of Model class
![Page 17: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/17.jpg)
Model (repeated)
• Set initial position• Move one step
• No collaborators...• …but allow access
from View
Model
![Page 18: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/18.jpg)
The Ball Applet: View
• The View needs access to the ball’s state (in this case, it’s x-y location)
• For a static drawing, the View doesn’t need to know anything else
![Page 19: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/19.jpg)
View
• Paint the ball • Access Model
View
![Page 20: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/20.jpg)
View I
class View extends Canvas { Controller controller; Model model; int stepNumber = 0; // more...
![Page 21: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/21.jpg)
View II
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
![Page 22: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/22.jpg)
View (repeated)
• Paint the ball • Access Model
View
![Page 23: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/23.jpg)
The Ball Applet: Controller
• The Controller tells the Model what to do
• The Controller tells the View when it needs to refresh the display
• The Controller doesn’t need to know the inner workings of the Model
• The Controller doesn’t need to know the inner workings of the View
![Page 24: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/24.jpg)
Controller
• Create Model• Create View• Give View access to
Model• Tell Model to advance• Tell View to repaint
• Model• View
Controller
![Page 25: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/25.jpg)
Controller 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.*;
![Page 26: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/26.jpg)
Controller II
public void init () { // Lay out components setLayout (new BorderLayout ()); buttonPanel.add (stepButton); this.add (BorderLayout.SOUTH, buttonPanel); this.add (BorderLayout.CENTER, view);
// more...
![Page 27: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/27.jpg)
Controller III
// Attach actions to components stepButton.addActionListener (new ActionListener () { public void actionPerformed (ActionEvent event) { model.makeOneStep (); view.repaint (); }});
// more...
![Page 28: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/28.jpg)
Controller IV
// Tell the View about myself (Controller) and // about the Model view.model = model; view.controller = this;
} // end init method
// more...
![Page 29: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/29.jpg)
Controller 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
![Page 30: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/30.jpg)
Controller (repeated)
• Create Model• Create View• Give View access to
Model• Tell Model to advance• Tell View to repaint
• Model• View
Controller
![Page 31: Java Model-View-Controller design pattern. The MVC pattern MVC stands for Model-View-Controller The Model is the actual internal representation The View](https://reader030.vdocuments.net/reader030/viewer/2022033100/5697c0111a28abf838ccbe12/html5/thumbnails/31.jpg)
The End