graphical user interfaces (gui) model view controller (mvc) · model view controller (mvc) csc212...
Post on 20-Aug-2020
29 Views
Preview:
TRANSCRIPT
mith College
Computer Science
Dominique Thiébaut dthiebaut@smith.edu
Graphical User Interfaces (GUI) &
Model View Controller (MVC)CSC212 — Fall 2014
D. Thiebaut, Computer Science, Smith College
Model View Controller• Introduced in the 70's in language SmallTalk by Trygve
Reenskaug, after visiting Xerox Park
• MVC divides graphical software app. into 3 components:
• Model: holds the data structure and algorithms
• View: displays some aspect of the data
• Controller: sends command to model to change its state. sends command to view to change display.
D. Thiebaut, Computer Science, Smith College
1: 2, 3,4 2: 1, 5 3: 1 4: 1, 5 5: 4, 1
Model
userClick() { …}
ControllerViewer
D. Thiebaut, Computer Science, Smith College
1: 2, 3,4 2: 1, 5 3: 1 4: 1, 5 5: 4, 1
Model
userClick() { …}
ControllerViewer
User
D. Thiebaut, Computer Science, Smith College
1: 2, 3,4 2: 1, 5 3: 1 4: 1, 5 5: 4, 1
Model
userClick() { …}
ControllerViewer
User
User clicks button
D. Thiebaut, Computer Science, Smith College
1: 2, 3,4 2: 1, 5 3: 1 4: 1, 5 5: 4, 1
Model
Viewer
User
Controller changes
state of Model
userClick() { …}
Controller
D. Thiebaut, Computer Science, Smith College
1: 2, 3,4 2: 1, 5 3: 1 4: 1, 5 5: 4, 1
Model
Viewer
User
Viewer displays
updated Model
userClick() { …}
Controller
D. Thiebaut, Computer Science, Smith College
http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
D. Thiebaut, Computer Science, Smith College
In Reality…• The interactions between Model, View, and
Controller are not always implemented as cleanly
• Controller and Viewer sometimes implemented as a closely intertwined pair of programs
• Each should be as independent from other two as possible, interface as clean as possible, so that replacement/upgrade/growth can be easily performed
D. Thiebaut, Computer Science, Smith College
Advantages• Clear design, simple interaction patterns
• Modularity: can change one element without having to change others
• Multiple views: can have multiple viewers showing data in different ways
• Scalable: can grow the modules separately, and easily
• Can be distributed: client-server system: MVC can be spread over server and client, in different ways
D. Thiebaut, Computer Science, Smith College
Application: A Graph Viewer
D. Thiebaut, Computer Science, Smith College
Lecture1Lab2
Project3
D. Thiebaut, Computer Science, Smith College
https://www.youtube.com/watch?v=keR1A5pISxU
D. Thiebaut, Computer Science, Smith College
https://www.youtube.com/watch?v=YmuAVhqq4iI
D. Thiebaut, Computer Science, Smith College
Model//Graph: network 50x50 //Adjacency Matrix
initGraph(); adjList();
controller viewer
D. Thiebaut, Computer Science, Smith College
Model//Graph: network 50x50 //Adjacency Matrix
initGraph(); adjList();
controller viewer
Controller
initAll(); // creates // reference // system
vertexUnderMouse();
model
viewer
D. Thiebaut, Computer Science, Smith College
Viewer: PApplet
setup(); // calls controller // to initialize // system
draw(); // called 30 times // per second // displays grid // of vertices
model
controller
Model//Graph: network 50x50 //Adjacency Matrix
initGraph(); adjList();
controller viewer
Controller
initAll(); // creates // reference // system
vertexUnderMouse();
model
viewer
D. Thiebaut, Computer Science, Smith College
Viewer: PApplet
setup(); // calls controller // to initialize // system
draw(); // called 30 times // per second // displays grid // of vertices
model
controller
Model//Graph: network 50x50 //Adjacency Matrix
initGraph(); adjList();
controller viewer
Controller
initAll(); // creates // reference // system
vertexUnderMouse();
model
viewer
D. Thiebaut, Computer Science, Smith College
Following of The Execution of the MVC
D. Thiebaut, Computer Science, Smith College
Viewer: PApplet
setup(); // calls controller // to initialize // system
draw(); // called 30 times // per second // displays grid // of vertices
model
controller
Model//Graph: network 50x50 //Adjacency Matrix
initGraph(); adjList();
controller viewer
Controller
initAll(); // creates // reference // system
vertexUnderMouse();
model
viewer
1
D. Thiebaut, Computer Science, Smith College
Viewer: PApplet
setup(); // calls controller // to initialize // system
draw(); // called 30 times // per second // displays grid // of vertices
model
controller
Model//Graph: network 50x50 //Adjacency Matrix
initGraph(); adjList();
controller viewer
Controller
initAll(); // creates // reference // system
vertexUnderMouse();
model
viewer
12
D. Thiebaut, Computer Science, Smith College
Viewer: PApplet
setup(); // calls controller // to initialize // system
draw(); // called 30 times // per second // displays grid // of vertices
model
controller
Model//Graph: network 50x50 //Adjacency Matrix
initGraph();adjList();
controller viewer
Controller
initAll(); // creates // reference // system
vertexUnderMouse();
model
viewer
123
D. Thiebaut, Computer Science, Smith College
Viewer: PApplet
setup(); // calls controller // to initialize // system
draw(); // called 30 times // per second // displays grid // of vertices
model
controller
Model//Graph: network 50x50 //Adjacency Matrix
initGraph(); adjList();
controller viewer
Controller
initAll(); // creates // reference // system
vertexUnderMouse();
model
viewer
123
4
D. Thiebaut, Computer Science, Smith College
Viewer: PApplet
setup(); // calls controller // to initialize // system
draw(); // called 30 times // per second // displays grid // of vertices
model
controller
Model//Graph: network 50x50 //Adjacency Matrix
initGraph(); adjList();
controller viewer
Controller
initAll(); // creates // reference // system
vertexUnderMouse();
model
viewer
123
4
5
D. Thiebaut, Computer Science, Smith College
Viewer: PApplet
setup(); // calls controller // to initialize // system
draw(); // called 30 times // per second // displays grid // of vertices
model
controller
Model//Graph: network 50x50 //Adjacency Matrix
initGraph(); adjList();
controller viewer
Controller
initAll(); // creates // reference // system
vertexUnderMouse();
model
viewer
123
4
56
D. Thiebaut, Computer Science, Smith College
Viewer: PApplet
setup(); // calls controller // to initialize // system
draw(); // called 30 times // per second // displays grid // of vertices
model
controller
Model//Graph: network 50x50 //Adjacency Matrix
initGraph(); adjList();
controller viewer
Controller
initAll(); // creates // reference // system
vertexUnderMouse();
model
viewer
123
4
567
D. Thiebaut, Computer Science, Smith College
Viewer: PApplet
setup(); // calls controller // to initialize // system
draw(); // called 30 times // per second // displays grid // of vertices
model
controller
Model//Graph: network 50x50 //Adjacency Matrix
initGraph(); adjList();
controller viewer
Controller
initAll(); // creates // reference // system
vertexUnderMouse();
model
viewer
123
4
5678
D. Thiebaut, Computer Science, Smith College
Viewer: PApplet
setup(); // calls controller // to initialize // system
draw(); // called 30 times // per second // displays grid // of vertices
model
controller
Model//Graph: network 50x50 //Adjacency Matrix
initGraph(); adjList();
controller viewer
Controller
initAll(); // creates // reference // system
vertexUnderMouse();
model
viewer
123
4
5678Event
D. Thiebaut, Computer Science, Smith College
Viewer: PApplet
setup(); // calls controller // to initialize // system
draw(); // called 30 times // per second // displays grid // of vertices
model
controller
Model//Graph: network 50x50 //Adjacency Matrix
initGraph(); adjList();
controller viewer
Controller
initAll(); // creates // reference // system
vertexUnderMouse();
model
viewer
123
4
56789
D. Thiebaut, Computer Science, Smith College
Understanding Special-Effects with Processing
D. Thiebaut, Computer Science, Smith College
import processing.core.PApplet;
public class ProcessingDemo1 extends PApplet {
public void setup() {size( 800, 600 );smooth();
}
public void draw() {background( 255, 255, 200 );
fill( 255, 255, 255 );stroke( 0, 0, 0 );ellipse( mouseX, mouseY, 30, 30 );fill( 0, 0, 0 );text( "" + frameCount, mouseX + 30, mouseY );
}}
Suggested Mods: • comment out background() • use frameCount%30 • make radius of circle =
frameCount%30 • make background color =
framecount%256
demo: ProcessingDemo1.java
D. Thiebaut, Computer Science, Smith College
Java Code
D. Thiebaut, Computer Science, Smith College
public class MVC1_model {private final int maxNoVerticesRows = 50; private final int maxNoVerticesCols = 50; private int maxNoVertices = maxNoVerticesRows *
maxNoVerticesCols;private boolean[][] adjMat = null; // adjacency matrixprivate MVC1_viewer viewer = null;private MVC1_controller controller = null;
public MVC1_model( ) { }
public void addEdge( int v, int u ) {adjMat[v][u] = true;adjMat[u][v] = true;System.out.println( "add edge " + v + " " + u );
}
// continued on next page…
Model
D. Thiebaut, Computer Science, Smith College
public void initGraph() { // code removed for simplicity
}
public ArrayList<Integer> adjList( int v ) {ArrayList<Integer> adj = new ArrayList<Integer>();for ( int u=0; u<maxNoVertices; u++ )
if ( adjMat[v][u] )adj.add( u );
return adj;}
}
Model
D. Thiebaut, Computer Science, Smith College
public class MVC1_controller {MVC1_viewer viewer = null;MVC1_model model = null;
public MVC1_controller() { }public void initAll( MVC1_viewer v ) {
// init viewerviewer = v;
// create the model model = new MVC1_model();
// create reference system between MVC componentsmodel.setController( this );viewer.setModel( model );model.setViewer( viewer );
// create the graph of vertices and edgesmodel.initGraph();
}
// continued on next page…
Controller
D. Thiebaut, Computer Science, Smith College
public void setVertexUnderMouse( int vertex ) {// display vertex nameviewer.displayVertexName( vertex );// display adjacency listviewer.displayAdjacencyList( vertex );
}
}
Controller
D. Thiebaut, Computer Science, Smith College
public class MVC1_viewer extends PApplet {MVC1_controller controller = null;MVC1_model model = null;public int WIDTH = 800; // best generic widthpublic int HEIGHT = 800; // best generic heightprivate final int DELTAX = 10; // no pixels between verticesprivate final int DELTAY = 10; // no pixels between verticesprivate int MINDIST = 5; // min dist for vertex detected private int vertexUnderMouse = -1;
public void setup() {//--- create model and controller, create reference --- //--- system between all three. ---controller = new MVC1_controller( );controller.initAll( this );
//--- make window fit model graph exactly ---//--- add blank area of 30 pixels high at bottom ---WIDTH = DELTAX * (model.getNoCols() + 1 );HEIGHT = 30 + DELTAY * (model.getNoRows() + 1 );
//--- set Applet geometry ---size( WIDTH, HEIGHT );smooth();
}
Viewer
D. Thiebaut, Computer Science, Smith College
public void draw() {background( 255, 255, 255 );
// get geometry of gridint V = model.getNoVertices();int noRows = model.getNoRows();int noCols = model.getNoCols();
vertexUnderMouse = closestVertexToMouse();if ( vertexUnderMouse != -1 )
controller.setVertexUnderMouse( vertexUnderMouse );
// draw the vertices and edges fill( 0, 0, 0 ); // make vertices blackstrokeWeight( 2 ); // make line width 2 pixels
for ( int v = 0; v < V; v++ ) {int[] xy = getXY( v, noRows, noCols );
ellipse( xy[0], xy[1], 4, 4 );
for ( int u: model.adjList( v ) ) { int[] xy2 = getXY( u, noRows, noCols );line( xy[0], xy[1], xy2[0], xy2[1] );
}}
}
Viewer
D. Thiebaut, Computer Science, Smith College
public void displayVertexName(int vertexNo ) {// get position of vertexint[] xy = getXY( vertexNo, model.getNoRows(),
model.getNoCols() );// set text color to red fill( 255, 0, 0 ); // display texttext( " "+vertexNo, xy[0], xy[1] );
}
public void displayAdjacencyList( int vertexNo ) {String s = "";for ( int u: model.adjList( vertexNo ) )
s += u + ", ";// remove last ", " part of the strings = s.trim();if ( s.length() > 0 )
s = s.substring( 0, s.length()-1 );text( s, 100, HEIGHT-25 );
}}
Viewer
D. Thiebaut, Computer Science, Smith College
top related