Model-View-Controller Design Pattern

The UML model of the MVC pattern

The typical sequence diagram of MVC

participant "u:User" as User
participant "c:Controller" as Controller
participant "m:Model" as Model
participant "v1:View1" as View1
participant "v2:View2" as View2
note over View1, View2: Registration of views
View1 -> Model : addView(this)
View2 -> Model : addView(this)
note over User
  the user triggers an event
  (mouse, keyboard...)
end note
User -> Controller : handleEvent(event)
note over Controller : interpret the event
Controller -> Model : operation1()
note over Model : change something
loop notify each registered view
  activate Model
  Model -> View1 : notify(this)
  activate View1
  View1 -> Model : getInfo()
  note over View1 : display model
  deactivate View1
  Model -> View2 : notify(this)
  activate View2
  View2 -> Model : getInfo()
  note over View2 : display model
  deactivate View2
  deactivate Model
end

Generated with this tool, thanks !

Here's is an example of the MVC pattern in Java.

MVC Example : the PieChart

The "Model" is a percentage (class PercentageModel) :

• it maintains a float value between 0 and 1
• it maintains a list of views, that will be notified when the value of the percentage changes.

We have three different views of this same model: one as a text field, one as a slider, and one as a piechart. The slider and piechart are controllers as well : they allow changing the model.

Here's the UML model of the application:

Assignment

Start from this simplified version (NetBeans project) where the slider is only a view, not a controller.

• Add a "console view" of the percentage, displaying the current percentage value in the console each time it changes
• Make the piechart be a controller as well as a view.