graphical user interfaces (gui) model view controller (mvc) · model view controller (mvc) csc212...

mith College

Computer Science

Dominique Thiébaut [email protected]

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.


1: 2, 3,4 2: 1, 5 3: 1 4: 1, 5 5: 4, 1

Model

userClick() { …}

ControllerViewer


1: 2, 3,4 2: 1, 5 3: 1 4: 1, 5 5: 4, 1

Model

userClick() { …}

ControllerViewer

User


1: 2, 3,4 2: 1, 5 3: 1 4: 1, 5 5: 4, 1

Model

userClick() { …}

ControllerViewer

User

User clicks button


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


1: 2, 3,4 2: 1, 5 3: 1 4: 1, 5 5: 4, 1

Model

Viewer

User

Viewer displays

updated Model

userClick() { …}

Controller


http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller

http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller


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


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


Application: A Graph Viewer


Lecture1Lab2

Project3


https://www.youtube.com/watch?v=keR1A5pISxU




https://www.youtube.com/watch?v=YmuAVhqq4iI

https://www.youtube.com/watch?v=YmuAVhqq4iI


Model//Graph: network 50x50 //Adjacency Matrix

initGraph(); adjList();

controller viewer




controller viewer

Controller

initAll(); // creates // reference // system

vertexUnderMouse();

model

viewer


Viewer: PApplet

setup(); // calls controller // to initialize // system

draw(); // called 30 times // per second // displays grid // of vertices

model

controller



controller viewer

Controller


vertexUnderMouse();

model

viewer


Following of The Execution of the MVC


Viewer: PApplet



model

controller



controller viewer

Controller


vertexUnderMouse();

model

viewer

1


Viewer: PApplet



model

controller



controller viewer

Controller


vertexUnderMouse();

model

viewer

12


Viewer: PApplet



model

controller


initGraph();adjList();

controller viewer

Controller


vertexUnderMouse();

model

viewer

123


Viewer: PApplet



model

controller



controller viewer

Controller


vertexUnderMouse();

model

viewer

123

4


Viewer: PApplet



model

controller



controller viewer

Controller


vertexUnderMouse();

model

viewer

123

4

5


Viewer: PApplet



model

controller



controller viewer

Controller


vertexUnderMouse();

model

viewer

123

4

56


Viewer: PApplet



model

controller



controller viewer

Controller


vertexUnderMouse();

model

viewer

123

4

567


Viewer: PApplet



model

controller



controller viewer

Controller


vertexUnderMouse();

model

viewer

123

4

5678


Viewer: PApplet



model

controller



controller viewer

Controller


vertexUnderMouse();

model

viewer

123

4

5678Event


Viewer: PApplet



model

controller



controller viewer

Controller


vertexUnderMouse();

model

viewer

123

4

56789


Understanding Special-Effects with Processing


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


Java Code


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


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


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


public void setVertexUnderMouse( int vertex ) {// display vertex nameviewer.displayVertexName( vertex );// display adjacency listviewer.displayAdjacencyList( vertex );

}

}

Controller


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


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


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

graphical user interfaces (gui) model view controller (mvc) · model view controller (mvc) csc212...

Documents