Model View Controller Design pattern Code Example

Question

I was studying the Model-View-Controller design pattern and i understand the concept behind the pattern theorotically, but I wanted to get a peek at how one would actually put i

Answer 1

Code is the best approach to understand and learn Model View Controller:

Here is a simple JS example (from Wiki)

/** Model, View, Controller */
var M = {}, V = {}, C = {};

/** Model stores data */
M.data = "hello world";

/** View controls what to present */
V.render = (M) => { alert(M.data); }

/** Controller bridges View and Model */
C.handleOnload = () => { V.render(M); }

/** Controller on Windows OnLoad event */
window.onload = C.handleOnload;

Here is a detailed post in C/C++ Model-View-Controller Explained in C++

Answer 2

There are couple of complete MVC examples, plus discussion, in ch 2 of an introduction to programming in Python 3.x that I wrote (I've not completed ch 3 etc., that project's been on ice for some time -- Python community really like angry swarm of bees when discovered I'd written that Python was perhaps not suitable for very large scale development, so it became difficult to get sensible feedback). It's available in PDF format from Google Docs. I don't know how well it maps to common MVC implementations, I was mostly concerned with getting the general idea across. :-)

Cheers & hth.,

PS: There's a nice table of contents in the PDF file but Google Docs doesn't show it. You'd need to dl and use Foxit or Acrobat or some other PDF viewer. I think there's a separate viewable TOC at Google Docs, though, haven't checked and don't remember whether updated.

PPS: Forgot to mention, the MVC image processing example near the end has nice pic of Lena Söderberg! :)

Answer 3

A simple text editor could be designed based on MVC. Think of the string class as the model, where data is stored. We might have a class called SimpleTextView which displays the text in the string attached to it, as it is. A class called KeyboardEventHandler can act as the controller. The controller will notify the view about new keyboard events. The view in turn modifies the model (like appending or removing text). The changes in the model is reflected on all views attached to it. For instance, there might be another view called HtmlView attached to the string object manipulated from within the SimpleTextView. If the user enters valid HTML tags in the SimpleTextView, the HtmlView will display the formatted output - real-time.

Answer 4

Here's a quick example I made (didn't try compiling it, let me know if there's errors):

class Button; // Prewritten GUI element

class GraphGUI {
public:
    GraphGUI() {
        _button = new Button("Click Me");
        _model = new GraphData();
        _controller = new GraphController(_model, _button);
    }
    ~GraphGUI() {
        delete _button;
        delete _model;
        delete _controller;
    }

    drawGraph() {
        // Use model's data to draw the graph somehow
    }
    ...

private:
    Button*              _button;
    GraphData*           _model;
    GraphController*     _controller;
};

class GraphData {
public:
    GraphData() {
        _number = 10; 
    }
    void increaseNumber() {
        _number += 10;
    }
    const int getNumber() { return _number; }
private:
    int _number;
};

class GraphController {
public:
    GraphController(GraphData* model, Button* button) {
        __model = model;
        __button = button;
        __button->setClickHandler(this, &onButtonClicked);
    }

    void onButtonClicked() {
        __model->increaseNumber();
    }

private:
    // Don't handle memory
    GraphData*    __model;
    Button*       __button; 
};

Ignoring the implementation of Button, basically this program will use GraphGUI to display a graph that will change when a button is pressed. Let's say it's a bar graph and it will get taller.

Since the model is independent of the view (the button), and the controller handles the communication between the two, this follows the MVC pattern.

When the button is clicked, the controller modifies the model via the onButtonClicked function, which the Button class knows to call when it is clicked.

The beauty of this is since the model and view are completely independent, the implementation of each can drastically change and it won't affect the other, the controller might simply have to make a few changes. If the model in this case calculated some result based off some database data, then clicking the button could cause this to happen, but the button implementation wouldn't have to change. Or, instead of telling the controller when a click occurs, maybe it can tell the controller when the button is moused-over. The same changes are applied to model, regardless of what triggered the changes.