Overview of This Lesson

Model View Controller is a common design pattern used in most applications that have a graphical user interface. You can use this pattern in pretty much any kind of application: a web application, a Java application, a smart phone application, etc. The premise is that you separate the code for the data model, the actual interface, and the logic that works behind the scenes. This allows you to create more modular and re-usable cold while following the SOLID principles.

The Model-View-Controller (MVC) Pattern

A standard Graphical User Interface (GUI) has the following functionality:

There are three categories of code that make up a GUI in most object-oriented programming languages:

  1. Presentation code: code that creates the UI components (e.g. text boxes, buttons, and radio buttons) and lays them out on the screen (layout managers).
  2. Event logic: code that executes when the user manipulates the interface components (e.g. searching for an employee in an employee list when the user clicks a "Search" button).
  3. Classes: OOP classes that model data the application needs, such as the Employee class that models employee records in a database.

Model-View-Controller, or MVC, is the most common design pattern used to create GUIs. MVC separates the presentation, event logic, and classes by defining these three design components:

diagram of the model view controller pattern

An example of MVC used in an object-oriented programming language:

MVC is often used in web applications:

In both scenarios, data is a big part of the application. Data can potentially be stored in databases or database servers, or even in file formats like JSON or XML. In the MVC design pattern, the Views are how the user triggers data operations such as saving new or edited data, or requesting a search for a specific value in the data store. The controller interacts directly with the data store to save/retrieve data. The model is the template or pattern the data takes. For example, a user can enter some new data into an HTML form and then press the Submit button. This triggers a request to the server, and that request is processed by the Controller. The Controller then performs the requested operation on the data store and sends any results back to the client via HTTP response. The result is displayed in a view.

The idea behind MVC is that it allows you to create modular and re-usable components. For example, you might create a UI that allows a user to enter data for players on their fantasy hockey team. You would likely have a Player class that models a single player. You can re-use that Player class in several applications. You could even use the Player UI in other applications that needed to provide a means to input/edit player information. You can also re-use the UI in different parts of the application: not just to input player data, but also to search for or edit player data. By separating the event logic (validate player input data, use data to construct a player object, save a player object to a database, get a collection of players, get a single player by jersey number, etc) you can use that same UI for several different functions in the application.


Imagine an application where you'd like to sell a specific product (whatever you like). Think about the part of the application that allows a customer to search for a product by description and view the matches from your catalog.

  1. Model: Create a UML diagram (or simply list the data members and methods) of a class that would model an inventory item in your catalog.
  2. View: What user interfaces would this part of your program require? Create rough sketches of those UIs.
  3. Controller: What kinds of functionality is your program going to need? Describe each function. Which functions will need to acces the view(s)? Which functions will need to access the Model?