Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212...
Transcript of Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212...
![Page 1: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/1.jpg)
mith College
Computer Science
Dominique Thiébaut [email protected]
Graphical User Interfaces (GUI) &
Model View Controller (MVC)CSC212 — Fall 2014
![Page 2: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/2.jpg)
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.
![Page 3: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/3.jpg)
D. Thiebaut, Computer Science, Smith College
1: 2, 3,4 2: 1, 5 3: 1 4: 1, 5 5: 4, 1
Model
userClick() { …}
ControllerViewer
![Page 4: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/4.jpg)
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
![Page 5: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/5.jpg)
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
![Page 6: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/6.jpg)
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
![Page 7: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/7.jpg)
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
![Page 8: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/8.jpg)
D. Thiebaut, Computer Science, Smith College
http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
![Page 9: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/9.jpg)
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
![Page 10: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/10.jpg)
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
![Page 11: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/11.jpg)
D. Thiebaut, Computer Science, Smith College
Application: A Graph Viewer
![Page 12: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/12.jpg)
D. Thiebaut, Computer Science, Smith College
Lecture1Lab2
Project3
![Page 13: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/13.jpg)
D. Thiebaut, Computer Science, Smith College
https://www.youtube.com/watch?v=keR1A5pISxU
![Page 14: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/14.jpg)
D. Thiebaut, Computer Science, Smith College
https://www.youtube.com/watch?v=YmuAVhqq4iI
![Page 15: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/15.jpg)
D. Thiebaut, Computer Science, Smith College
Model//Graph: network 50x50 //Adjacency Matrix
initGraph(); adjList();
controller viewer
![Page 16: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/16.jpg)
D. Thiebaut, Computer Science, Smith College
Model//Graph: network 50x50 //Adjacency Matrix
initGraph(); adjList();
controller viewer
Controller
initAll(); // creates // reference // system
vertexUnderMouse();
model
viewer
![Page 17: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/17.jpg)
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
![Page 18: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/18.jpg)
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
![Page 19: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/19.jpg)
D. Thiebaut, Computer Science, Smith College
Following of The Execution of the MVC
![Page 20: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/20.jpg)
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
![Page 21: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/21.jpg)
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
![Page 22: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/22.jpg)
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
![Page 23: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/23.jpg)
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
![Page 24: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/24.jpg)
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
![Page 25: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/25.jpg)
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
![Page 26: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/26.jpg)
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
![Page 27: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/27.jpg)
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
![Page 28: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/28.jpg)
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
![Page 29: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/29.jpg)
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
![Page 30: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/30.jpg)
D. Thiebaut, Computer Science, Smith College
Understanding Special-Effects with Processing
![Page 31: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/31.jpg)
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
![Page 32: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/32.jpg)
D. Thiebaut, Computer Science, Smith College
Java Code
![Page 33: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/33.jpg)
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
![Page 34: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/34.jpg)
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
![Page 35: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/35.jpg)
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
![Page 36: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/36.jpg)
D. Thiebaut, Computer Science, Smith College
public void setVertexUnderMouse( int vertex ) {// display vertex nameviewer.displayVertexName( vertex );// display adjacency listviewer.displayAdjacencyList( vertex );
}
}
Controller
![Page 37: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/37.jpg)
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
![Page 38: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/38.jpg)
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
![Page 39: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/39.jpg)
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
![Page 40: Graphical User Interfaces (GUI) Model View Controller (MVC) · Model View Controller (MVC) CSC212 — Fall 2014. D. Thiebaut, Computer Science, Smith College Model View Controller](https://reader035.fdocuments.in/reader035/viewer/2022062605/5fc7206c0df50e2ea36cbd41/html5/thumbnails/40.jpg)
D. Thiebaut, Computer Science, Smith College