A A A
|

Model-View-Controller (MVC)

  1. Background
    1. MVC is a software design pattern: reusable solution to a commonly occurring problem
    2. Typically applied when implementing user interfaces
    3. First described by Trygve Reenskaug in 1974 who was working on Smalltalk at Xerox PARC
    4. Several variations like Model View ViewModel (MVVM) which is often used in WPF and UWP
  2. Three components
    MVC diagram Image from Wikipedia
    1. Model
      1. What your application is (not how it is displayed)
      2. Consists of application data and "business logic"
      3. Receives commands from the controller to update its state
      4. May notify its associated views and controllers when there has been a change in its state
    2. View
      1. Visual representation of the model (what the user sees)
      2. Updates itself when the model indicates its state has changed
    3. Controller
      1. Accepts input (mouse, keyboard, etc.) and converts it into commands for the model
      2. May also send commands to the view to update itself
  3. MVC example: hTunes
    1. Controller (MainWindow.xaml.cs): User selects an MP3 to be added to the music library
    2. Model (MusicLib.cs): Controller tells the MusicLib class to add the MP3
    3. View (MainWindow.xaml): The controller tells the data grid to display the metadata for the MP3 which is obtained from the MusicLib
    4. Cloud architecture
      Cloud architecture diagram
  4. Benefits
    1. Achieves separation of concerns where each part addresses a specific concern
    2. Interface modifications are largely isolated to the controller and view
    3. Multiple views and controls can be added in straightforward manner
    4. Model may be thoroughly tested without regards to UI
  5. Passive and active models for implementing MVC
    1. Passive model
      Passive model diagram Image from Model-View-Controller article
      1. Ideal when one controller manipulates the model exclusively
      2. Controller modifies the model and tells the View it needs to update itself
      3. View asks model for changes so it can update itself
      4. Typical model used in web applications where browser receives input and transmits to the web server. Ajax or browser refresh used to get state changes from the server
    2. Active model
      Active model diagram Image from Model-View-Controller article
      1. Used when model can change state without the controller's involvement (e.g., outside source changing the data and views must reflect changes)
      2. Model notifies all registered views of changes instead of controller doing it
      3. Best implemented with Observer pattern
        Observer diagram Image from Model-View-Controller article
        1. Each view implements the Observer interface and registers with the Model
        2. When the model changes, it iterates through all registered observers and notifies them of the change
        3. Controllers may also be notified of changes if so desired
      4. See implementation in C# which uses IObservable and IObserver interfaces