Model-View-Controller Explained in C++

The Permanent URL is: Model-View-Controller Explained in C++.

The Model-View-Controller (MVC) is not a technology, but a concept in software design/engineering. The MVC consists of three components, the Model, the View and the Controller, as illustrated in below figure.

model-view-controller-mvc-explained

THE MODEL

The Model is directly responsive for handling data. For example, the Model component accesses MySQL database. The Model should not rely on other components such as View or Controller. In other words, the Model does not care how its data can be displayed or when to be updated.

The data changes in the Model will generally be published through some event handlers. For example, the View model must register on the Model so that it understands the data changes. We can define a function callback when data changes:

// common.h

// https://helloacm.com/model-view-controller-explained-in-c/

#pragma once

#include <string>

using namespace std;

typedef void (*DataChangeHandler)(string newData);

DataChangeHandler is now a function pointer type that returns void and takes a parameter of a string (data type). The Model is responsible for data retrieval and optionally, it can register the data-change-event.

// model.h

// https://helloacm.com/model-view-controller-explained-in-c/

#pragma once

#include <string>

using namespace std;

#include "common.h"

// Model is responsible for data get and set

class Model {

    public:

        Model(const string &data) {

            this->SetData(data);

        }

        Model() { } // default constructor

        string Data(){

            return this->data;

        }

 

        void SetData(const string &data) {

            this->data = data;

            if (this->event != nullptr) { // data change callback event

                this->event(data);

            }  

        }

        //  register the event when data changes.

        void RegisterDataChangeHandler(DataChangeHandler handler) {

            this->event = handler;

        }

    private:

        string data = "";

        DataChangeHandler event = nullptr;

};

VIEW

The View component knows how to present the Data to the users. It needs to access the Model and normally needs to define its ‘Render()’ function.

// view.h

// https://helloacm.com/model-view-controller-explained-in-c/

#pragma once

#include <iostream>                  

#include "model.h"                                              

// View is responsible to present data to users

class View {

    public:

        View(const Model &model) {

            this->model = model;

        }

        View() {}

        void SetModel(const Model &model) {

            this->model = model;

        }

        void Render() {

            std::cout << "Model Data = " << model.Data() << endl;

        }

    private:

        Model model;

};

CONTROLLER

The Controller can ask the Model to update its data. Also, the Controller can ask the View to change its presentation, e.g. Showing a Dialog instead of Outputing to Console. Basically it is a component that takes input from the user and sends commands to the View or Model.

// controller.h

// https://helloacm.com/model-view-controller-explained-in-c/

#pragma once

#include "model.h"

#include "view.h"

 

// Controller combines Model and View

class Controller {

    public:

        Controller(const Model &model, const View &view) {

          this->SetModel(model);

          this->SetView(view);        

        }

        void SetModel(const Model &model) {

            this->model = model;

        }

        void SetView(const View &view) {

            this->view = view;

        }

        // when application starts

        void OnLoad() {

            this->view.Render();

        }

    private:

        Model model;

        View view;

};

MVC DEMO

With the above three component classes, we can have the following code to demonstrate MVC.

// mvc.cpp

// https://helloacm.com/model-view-controller-explained-in-c/

#include <iostream>

#include "view.h"

#include "model.h"

#include "controller.h"

#include "common.h"

 

using namespace std;

void DataChange(string data) {

  cout << "Data Changes: " << data <<endl;

}

 

int main() {

    Model model("Model");

    View view(model);    

    // register the data-change event

    model.RegisterDataChangeHandler(&DataChange);

    // binds model and view.

    Controller controller(model, view);

    // when application starts or button is clicked or form is shown...

    controller.OnLoad();

    model.SetData("Changes"); // this should trigger View to render

    return 0;

}

To avoid the circular dependency in C++ between class View and Model, we use a function pointer to represent the event of data-change instead of the pointer to a member of object. To compile the above code, use the following command:

1	g++ --std=c++11 mvc.cpp

Then run ./a.out should give you:

1 2	Model Data = Model Data Changes: Changes

The model.SetData(“Changes”); triggers the data-change event that is registered in the Model component.

https://helloacm.com/model-view-controller-explained-in-c/