{"id":6545,"date":"2023-04-17T07:05:43","date_gmt":"2023-04-17T07:05:43","guid":{"rendered":"https:\/\/www.modernescpp.com\/index.php\/model-view-controller\/"},"modified":"2023-04-17T07:05:43","modified_gmt":"2023-04-17T07:05:43","slug":"model-view-controller","status":"publish","type":"post","link":"https:\/\/www.modernescpp.com\/index.php\/model-view-controller\/","title":{"rendered":"Model-View-Controller"},"content":{"rendered":"<p>The Model-View-Controller (MVC) is one of the classic architectural patterns from the book <a href=\"https:\/\/en.wikipedia.org\/wiki\/Pattern-Oriented_Software_Architecture\">&#8220;<span id=\"productTitle\" class=\"a-size-extra-large\">Pattern-Oriented Software Architecture, Volume 1<\/span><\/a>&#8220;. It addresses interactive applications with a&nbsp; flexible human-machine interface.<\/p>\n<p><!--more--><\/p>\n<p>&nbsp;<img loading=\"lazy\" decoding=\"async\" class=\" size-full wp-image-6541\" src=\"https:\/\/www.modernescpp.com\/wp-content\/uploads\/2023\/04\/MVC.png\" alt=\"\" width=\"650\" height=\"330\" style=\"display: block; margin-left: auto; margin-right: auto;\" data-alt=\"MVC\" srcset=\"https:\/\/www.modernescpp.com\/wp-content\/uploads\/2023\/04\/MVC.png 1230w, https:\/\/www.modernescpp.com\/wp-content\/uploads\/2023\/04\/MVC-300x152.png 300w, https:\/\/www.modernescpp.com\/wp-content\/uploads\/2023\/04\/MVC-1024x519.png 1024w, https:\/\/www.modernescpp.com\/wp-content\/uploads\/2023\/04\/MVC-768x390.png 768w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/p>\n<p>The MVC divides the program logic of a user interface into separate components model, view, and controller. The model manages the data and rules of the application. The view represents the data, and the controller interacts with the user.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Model-View-Controller\"><\/span>Model-View-Controller<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Purpose\"><\/span>Purpose<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>User interfaces need to be changed frequently<\/li>\n<li>Different user interfaces must be supported<\/li>\n<li>The data model is stable<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Solution\"><\/span>Solution<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>The application is divided into the components Model (data model), View (output components), and Controller (input components)<\/li>\n<li>Multiple output components can use the same data model<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Structure\"><\/span>Structure<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" size-full wp-image-6542\" src=\"https:\/\/www.modernescpp.com\/wp-content\/uploads\/2023\/04\/ModelViewControler.png\" alt=\"ModelViewControler\" width=\"400\" height=\"197\" style=\"display: block; margin-left: auto; margin-right: auto;\" srcset=\"https:\/\/www.modernescpp.com\/wp-content\/uploads\/2023\/04\/ModelViewControler.png 360w, https:\/\/www.modernescpp.com\/wp-content\/uploads\/2023\/04\/ModelViewControler-300x148.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/p>\n<h3><img loading=\"lazy\" decoding=\"async\" class=\" size-full wp-image-6543\" src=\"https:\/\/www.modernescpp.com\/wp-content\/uploads\/2023\/04\/ModelViewControllerCRC.png\" alt=\"ModelViewControllerCRC\" width=\"600\" height=\"337\" style=\"display: block; margin-left: auto; margin-right: auto;\" srcset=\"https:\/\/www.modernescpp.com\/wp-content\/uploads\/2023\/04\/ModelViewControllerCRC.png 1261w, https:\/\/www.modernescpp.com\/wp-content\/uploads\/2023\/04\/ModelViewControllerCRC-300x168.png 300w, https:\/\/www.modernescpp.com\/wp-content\/uploads\/2023\/04\/ModelViewControllerCRC-1024x575.png 1024w, https:\/\/www.modernescpp.com\/wp-content\/uploads\/2023\/04\/ModelViewControllerCRC-768x431.png 768w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/h3>\n<p><strong><code>Model<\/code><\/strong><\/p>\n<ul>\n<li>The central component of the pattern<\/li>\n<li>Contains the data (and the business logic)<\/li>\n<li>Is independent of the <code>View<\/code> and <code>Controller<\/code><\/li>\n<\/ul>\n<p><strong><code>View<\/code><\/strong><\/p>\n<ul>\n<li>Is responsible for the representing of the data and user interaction<\/li>\n<li>Observes the <code>Model<\/code><\/li>\n<li>A <code>View<\/code> is associated with a <code>Controller<\/code> to manipulate the Model<\/li>\n<\/ul>\n<p><strong><span style=\"color: #000000;\"><code>Controller<\/code><\/span><\/strong><\/p>\n<ul>\n<li>Manages one or more<code> View<\/code>s<\/li>\n<li>Accepts user interactions and prepares them for the <code>Model<\/code> or <code>View<\/code><\/li>\n<li>Observes the <code>Model<\/code><\/li>\n<li>Implements the update logic<\/li>\n<\/ul>\n<p>There are two exciting aspects of the MVC: initialization and user input:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Initialization\"><\/span>Initialization<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The following steps happen during the initialization of the MVC:<\/p>\n<ul>\n<li>The model is created, and it initializes its data<\/li>\n<li>The view is created and observes the Model<\/li>\n<li>The controller is created and gets references to the model and the view; it observes the model<\/li>\n<li>The application starts event processing<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"User_Input\"><\/span>User Input<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In case of a user event, the following steps happen:<\/p>\n<ul>\n<li>The controller accepts the user input, handles them, and triggers the model<\/li>\n<li>The model changes its internal data<\/li>\n<li>The model notifies all views and controllers about the change of the internal data<\/li>\n<li>The views and controller update themself\n<ul>\n<li>If the PIN is entered incorrectly in an ATM for the third time, this can mean: <span class=\"HwtZe\" lang=\"en\"><span class=\"jCAhz ChMk0b\"><span class=\"ryNqvb\">The display shows that your account is locked. The ATM confiscates your debit card<\/span><\/span><\/span><\/li>\n<\/ul>\n<\/li>\n<li>The controller continues to process events<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Example\"><\/span>Example<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The following program<code> mvc.cpp<\/code> applies the MVC.<\/p>\n<p><!-- HTML generated using hilite.me --><\/p>\n<div style=\"background: #f0f3f3; overflow: auto; width: auto; gray;border-width: .1em .1em .1em .8em;\">\n<pre style=\"margin: 0px; line-height: 125%;\"><span style=\"color: #0099ff; font-style: italic;\">\/\/ mvc.cpp<\/span>\r\n\r\n<span style=\"color: #009999;\">#include &lt;iostream&gt;<\/span>\r\n<span style=\"color: #009999;\">#include &lt;string&gt;<\/span>\r\n<span style=\"color: #009999;\">#include &lt;unordered_map&gt;<\/span>\r\n\r\n\r\n<span style=\"color: #006699; font-weight: bold;\">class<\/span> <span style=\"color: #00aa88; font-weight: bold;\">DefectModel<\/span> {\r\n <span style=\"color: #9999ff;\">public:                                                                      <em><span style=\"color: #0099ff;\">\/\/ (5)<\/span><\/em><\/span>\r\n     <span style=\"color: #006699; font-weight: bold;\">mutable<\/span> std<span style=\"color: #555555;\">::<\/span>unordered_map<span style=\"color: #555555;\">&lt;<\/span>std<span style=\"color: #555555;\">::<\/span>string, std<span style=\"color: #555555;\">::<\/span>string<span style=\"color: #555555;\">&gt;<\/span> defects_ <span style=\"color: #555555;\">=<\/span> { {<span style=\"color: #cc3300;\">\"XYZ\"<\/span> , <span style=\"color: #cc3300;\">\"File doesn't get deleted.\"<\/span>},\r\n                                                                       {<span style=\"color: #cc3300;\">\"XAB\"<\/span> , <span style=\"color: #cc3300;\">\"Registry doesn't get created.\"<\/span>},\r\n                                                                      {<span style=\"color: #cc3300;\">\"ABC\"<\/span> , <span style=\"color: #cc3300;\">\"Wrong title get displayed.\"<\/span>} };\r\n\r\n    std<span style=\"color: #555555;\">::<\/span>string getDefectComponent(<span style=\"color: #006699; font-weight: bold;\">const<\/span> std<span style=\"color: #555555;\">::<\/span>string<span style=\"color: #555555;\">&amp;<\/span> component) <span style=\"color: #006699; font-weight: bold;\">const<\/span> {\r\n        <span style=\"color: #006699; font-weight: bold;\">return<\/span> defects_[component];\r\n    }\r\n\r\n    <span style=\"color: #007788; font-weight: bold;\">int<\/span> getSummary() <span style=\"color: #006699; font-weight: bold;\">const<\/span> {\r\n        <span style=\"color: #006699; font-weight: bold;\">return<\/span> defects_.size();\r\n    }\r\n\r\n    std<span style=\"color: #555555;\">::<\/span>unordered_map<span style=\"color: #555555;\">&lt;<\/span>std<span style=\"color: #555555;\">::<\/span>string, std<span style=\"color: #555555;\">::<\/span>string<span style=\"color: #555555;\">&gt;<\/span> getAllDefects() <span style=\"color: #006699; font-weight: bold;\">const<\/span> {\r\n        <span style=\"color: #006699; font-weight: bold;\">return<\/span> defects_;\r\n    }\r\n\r\n};\r\n\r\n<span style=\"color: #006699; font-weight: bold;\">class<\/span> <span style=\"color: #00aa88; font-weight: bold;\">DefectView<\/span> {\r\n <span style=\"color: #9999ff;\">public:<\/span>\r\n    <span style=\"color: #007788; font-weight: bold;\">void<\/span> showSummary(<span style=\"color: #007788; font-weight: bold;\">int<\/span> num) <span style=\"color: #006699; font-weight: bold;\">const<\/span> {\r\n        std<span style=\"color: #555555;\">::<\/span>cout <span style=\"color: #555555;\">&lt;&lt;<\/span> <span style=\"color: #cc3300;\">\"Their are \"<\/span> <span style=\"color: #555555;\">+<\/span> std<span style=\"color: #555555;\">::<\/span>to_string(num) <span style=\"color: #555555;\">+<\/span> <span style=\"color: #cc3300;\">\" defects in total!<\/span><span style=\"color: #cc3300; font-weight: bold;\">\\n<\/span><span style=\"color: #cc3300;\">\"<\/span>;\r\n    }\r\n    \r\n    <span style=\"color: #007788; font-weight: bold;\">void<\/span> showDefectComponent(<span style=\"color: #006699; font-weight: bold;\">const<\/span> std<span style=\"color: #555555;\">::<\/span>string<span style=\"color: #555555;\">&amp;<\/span> defect) <span style=\"color: #006699; font-weight: bold;\">const<\/span> {\r\n        std<span style=\"color: #555555;\">::<\/span>cout <span style=\"color: #555555;\">&lt;&lt;<\/span> <span style=\"color: #cc3300;\">\"Defect of component: \"<\/span> <span style=\"color: #555555;\">+<\/span> defect <span style=\"color: #555555;\">+<\/span> <span style=\"color: #cc3300;\">'\\n'<\/span>;\r\n    }\r\n\r\n    <span style=\"color: #007788; font-weight: bold;\">void<\/span> showDefectList(<span style=\"color: #006699; font-weight: bold;\">const<\/span> std<span style=\"color: #555555;\">::<\/span>unordered_map<span style=\"color: #555555;\">&lt;<\/span>std<span style=\"color: #555555;\">::<\/span>string, std<span style=\"color: #555555;\">::<\/span>string<span style=\"color: #555555;\">&gt;&amp;<\/span> defects) <span style=\"color: #006699; font-weight: bold;\">const<\/span> {\r\n        <span style=\"color: #006699; font-weight: bold;\">for<\/span> (<span style=\"color: #006699; font-weight: bold;\">const<\/span> <span style=\"color: #006699; font-weight: bold;\">auto<\/span><span style=\"color: #555555;\">&amp;<\/span> p<span style=\"color: #555555;\">:<\/span> defects) {\r\n            std<span style=\"color: #555555;\">::<\/span>cout <span style=\"color: #555555;\">&lt;&lt;<\/span> <span style=\"color: #cc3300;\">\"(\"<\/span> <span style=\"color: #555555;\">+<\/span> p.first <span style=\"color: #555555;\">+<\/span> <span style=\"color: #cc3300;\">\", \"<\/span> <span style=\"color: #555555;\">+<\/span> p.second <span style=\"color: #555555;\">+<\/span> <span style=\"color: #cc3300;\">\")<\/span><span style=\"color: #cc3300; font-weight: bold;\">\\n<\/span><span style=\"color: #cc3300;\">\"<\/span>;\r\n        }\r\n    }\r\n};\r\n\r\n<span style=\"color: #006699; font-weight: bold;\">class<\/span> <span style=\"color: #00aa88; font-weight: bold;\">DefectController<\/span> {\r\n    <span style=\"color: #006699; font-weight: bold;\">const<\/span> DefectModel<span style=\"color: #555555;\">&amp;<\/span> defectModel;\r\n    <span style=\"color: #006699; font-weight: bold;\">const<\/span> DefectView<span style=\"color: #555555;\">&amp;<\/span> defectView;\r\n <span style=\"color: #9999ff;\">public:<\/span>\r\n    DefectController(<span style=\"color: #006699; font-weight: bold;\">const<\/span> DefectModel<span style=\"color: #555555;\">&amp;<\/span> defModel, <span style=\"color: #006699; font-weight: bold;\">const<\/span> DefectView<span style=\"color: #555555;\">&amp;<\/span> defView)<span style=\"color: #555555;\">:<\/span>\r\n                     defectModel{defModel}, defectView{defView} { }\r\n\r\n    <span style=\"color: #007788; font-weight: bold;\">void<\/span> showDefectComponent(<span style=\"color: #006699; font-weight: bold;\">const<\/span> std<span style=\"color: #555555;\">::<\/span>string<span style=\"color: #555555;\">&amp;<\/span> component) <span style=\"color: #006699; font-weight: bold;\">const<\/span> {\r\n        defectView.showDefectComponent(defectModel.getDefectComponent(component));    <span style=\"color: #0099ff;\">\/\/ (6)<\/span>\r\n    }\r\n\r\n    <span style=\"color: #007788; font-weight: bold;\">void<\/span> showDefectSummary() <span style=\"color: #006699; font-weight: bold;\">const<\/span> {\r\n        defectView.showSummary(defectModel.getSummary());                           <span style=\"color: #0099ff;\">  \/\/ (7)<\/span>\r\n    }\r\n\r\n    <span style=\"color: #007788; font-weight: bold;\">void<\/span> showDefectList() <span style=\"color: #006699; font-weight: bold;\">const<\/span> {\r\n        defectView.showDefectList(defectModel.getAllDefects());                       <span style=\"color: #0099ff;\">\/\/ (8)<\/span>\r\n    }\r\n\r\n};\r\n\r\n<span style=\"color: #007788; font-weight: bold;\">int<\/span> <span style=\"color: #cc00ff;\">main<\/span>() {\r\n\r\n    std<span style=\"color: #555555;\">::<\/span>cout <span style=\"color: #555555;\">&lt;&lt;<\/span> <span style=\"color: #cc3300;\">'\\n'<\/span>;\r\n\r\n    DefectModel defectModel;\r\n    DefectView defectView;\r\n\r\n    DefectController defectController(defectModel, defectView);  <em><span style=\"color: #0099ff;\">\/\/ (1)<\/span><\/em>\r\n    defectController.showDefectComponent(<span style=\"color: #cc3300;\">\"ABC\"<\/span>);                <em><span style=\"color: #0099ff;\"> \/\/ (2)<\/span><\/em>\r\n    std<span style=\"color: #555555;\">::<\/span>cout <span style=\"color: #555555;\">&lt;&lt;<\/span> <span style=\"color: #cc3300;\">'\\n'<\/span>;\r\n    defectController.showDefectSummary();                       <em><span style=\"color: #0099ff;\"> \/\/ (3)<\/span><\/em>\r\n    std<span style=\"color: #555555;\">::<\/span>cout <span style=\"color: #555555;\">&lt;&lt;<\/span> <span style=\"color: #cc3300;\">'\\n'<\/span>;\r\n    defectController.showDefectList();                           <em><span style=\"color: #0099ff;\">\/\/ (4)<\/span><\/em>\r\n\r\n    std<span style=\"color: #555555;\">::<\/span>cout <span style=\"color: #555555;\">&lt;&lt;<\/span> <span style=\"color: #cc3300;\">'\\n'<\/span>;\r\n\r\n}\r\n<\/pre>\n<\/div>\n<p>&nbsp;<\/p>\n<p>The controller gets its model and view in its constructor (line 1) and displays its defect list <code>defects<\/code>_ (line 5) in three ways (lines 2 &#8211; 4). The controller triggers each call in the function and uses its view to display the data given by the model (lines 6 &#8211; 8).<\/p>\n<p>The following screenshot shows the output of the program:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" size-full wp-image-6544\" src=\"https:\/\/www.modernescpp.com\/wp-content\/uploads\/2023\/04\/mvcExample.png\" alt=\"mvcExample\" width=\"450\" height=\"251\" style=\"display: block; margin-left: auto; margin-right: auto;\" srcset=\"https:\/\/www.modernescpp.com\/wp-content\/uploads\/2023\/04\/mvcExample.png 581w, https:\/\/www.modernescpp.com\/wp-content\/uploads\/2023\/04\/mvcExample-300x167.png 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Variation\"><\/span>Variation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><a href=\"https:\/\/en.wikipedia.org\/wiki\/Presentation%E2%80%93abstraction%E2%80%93control\">Presentation-Abstraction-Control<\/a> is an additional pattern from <a href=\"https:\/\/en.wikipedia.org\/wiki\/Pattern-Oriented_Software_Architecture\">&#8220;<span id=\"productTitle\" class=\"a-size-extra-large\">Pattern-Oriented Software Architecture, Volume 1<\/span><\/a>&#8220;, similar to the MVC.&nbsp; It used a hierarchical structure of agents, each agent consisting of the presentation, abstraction(model), and data control. The agents communicate with each other through the control.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Pros_and_Cons\"><\/span>Pros and Cons<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h4>Pros<\/h4>\n<ul>\n<li>Separation of concern: The Model is strictly separated from the Controller and the Views. Therefore, many views or controllers can be supported concurrently and changed at run time.<\/li>\n<li>The views as synchronized because they are updated at the same time.<\/li>\n<\/ul>\n<h4>Cons<\/h4>\n<ul>\n<li>The MVC may be too complex and overkill for a small human-machine interface.<\/li>\n<li>A modification in the model may trigger a cascade of operations on its dependent views and controllers.<\/li>\n<li>The view and the controller are strongly coupled. A modification of one of them may break the other.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Whats_Next\"><\/span>What&#8217;s Next?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Event-driven applications, such as GUIs or servers, often apply the architecture pattern Reactor. A Reactor can accept multiple requests simultaneously and distribute them to different handlers.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Model-View-Controller (MVC) is one of the classic architectural patterns from the book &#8220;Pattern-Oriented Software Architecture, Volume 1&#8220;. It addresses interactive applications with a&nbsp; flexible human-machine interface.<\/p>\n","protected":false},"author":21,"featured_media":6541,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[379],"tags":[],"class_list":["post-6545","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-patterns"],"_links":{"self":[{"href":"https:\/\/www.modernescpp.com\/index.php\/wp-json\/wp\/v2\/posts\/6545","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.modernescpp.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.modernescpp.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.modernescpp.com\/index.php\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.modernescpp.com\/index.php\/wp-json\/wp\/v2\/comments?post=6545"}],"version-history":[{"count":0,"href":"https:\/\/www.modernescpp.com\/index.php\/wp-json\/wp\/v2\/posts\/6545\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.modernescpp.com\/index.php\/wp-json\/wp\/v2\/media\/6541"}],"wp:attachment":[{"href":"https:\/\/www.modernescpp.com\/index.php\/wp-json\/wp\/v2\/media?parent=6545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.modernescpp.com\/index.php\/wp-json\/wp\/v2\/categories?post=6545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.modernescpp.com\/index.php\/wp-json\/wp\/v2\/tags?post=6545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}