Model-View-Controller

Transcription

1 Model-View-Controller ENGI 5895: Software Design Andrew Vardy Faculty of Engineering & Applied Science Memorial University of Newfoundland March 3, 2017

2 Introduction In designing an application with a Graphical User Interface (GUI) you should work to maintain a separation between the Model and the View/Controller

3 Introduction In designing an application with a Graphical User Interface (GUI) you should work to maintain a separation between the Model and the View/Controller Model: Represents the underlying data and domain logic

4 Introduction In designing an application with a Graphical User Interface (GUI) you should work to maintain a separation between the Model and the View/Controller Model: Represents the underlying data and domain logic View/Controller: Presents a visual depiction of your model along with controls to interact with it

5 Introduction In designing an application with a Graphical User Interface (GUI) you should work to maintain a separation between the Model and the View/Controller Model: Represents the underlying data and domain logic View/Controller: Presents a visual depiction of your model along with controls to interact with it It is usually desirable, but not always possible to sparate the View and Controller

6 Introduction In designing an application with a Graphical User Interface (GUI) you should work to maintain a separation between the Model and the View/Controller Model: Represents the underlying data and domain logic View/Controller: Presents a visual depiction of your model along with controls to interact with it It is usually desirable, but not always possible to sparate the View and Controller Example of poor separation: Paint1; Good separation: Paint2, GameOfLife

7 Introduction In designing an application with a Graphical User Interface (GUI) you should work to maintain a separation between the Model and the View/Controller Model: Represents the underlying data and domain logic View/Controller: Presents a visual depiction of your model along with controls to interact with it It is usually desirable, but not always possible to sparate the View and Controller Example of poor separation: Paint1; Good separation: Paint2, GameOfLife Motivation:

8 Introduction In designing an application with a Graphical User Interface (GUI) you should work to maintain a separation between the Model and the View/Controller Model: Represents the underlying data and domain logic View/Controller: Presents a visual depiction of your model along with controls to interact with it It is usually desirable, but not always possible to sparate the View and Controller Example of poor separation: Paint1; Good separation: Paint2, GameOfLife Motivation: Adherance to the Single-Responsibility Principle

9 Introduction In designing an application with a Graphical User Interface (GUI) you should work to maintain a separation between the Model and the View/Controller Model: Represents the underlying data and domain logic View/Controller: Presents a visual depiction of your model along with controls to interact with it It is usually desirable, but not always possible to sparate the View and Controller Example of poor separation: Paint1; Good separation: Paint2, GameOfLife Motivation: Adherance to the Single-Responsibility Principle Re-use of components (e.g. GridModel, GridPanel)

10 Introduction In designing an application with a Graphical User Interface (GUI) you should work to maintain a separation between the Model and the View/Controller Model: Represents the underlying data and domain logic View/Controller: Presents a visual depiction of your model along with controls to interact with it It is usually desirable, but not always possible to sparate the View and Controller Example of poor separation: Paint1; Good separation: Paint2, GameOfLife Motivation: Adherance to the Single-Responsibility Principle Re-use of components (e.g. GridModel, GridPanel) Protect the Model from changes in GUI technology to support portability

11 Information Flow

12 Usually the view depends on the model

13 Usually the view depends on the model More specifically, the view has-a model

14 Usually the view depends on the model More specifically, the view has-a model To provide further separation, we would prefer the view to depend on an interface (i.e. DIP)

15 Usually the view depends on the model More specifically, the view has-a model To provide further separation, we would prefer the view to depend on an interface (i.e. DIP)

16 Usually the view depends on the model More specifically, the view has-a model To provide further separation, we would prefer the view to depend on an interface (i.e. DIP)

17 Usually the view depends on the model More specifically, the view has-a model To provide further separation, we would prefer the view to depend on an interface (i.e. DIP) What if we have multiple views? Also, what if the model can decide on its own to make changes? Use Observer:

18 Usually the view depends on the model More specifically, the view has-a model To provide further separation, we would prefer the view to depend on an interface (i.e. DIP) What if we have multiple views? Also, what if the model can decide on its own to make changes? Use Observer: ModelImplementation extends Observable and implements Model

19 Usually the view depends on the model More specifically, the view has-a model To provide further separation, we would prefer the view to depend on an interface (i.e. DIP) What if we have multiple views? Also, what if the model can decide on its own to make changes? Use Observer: ModelImplementation extends Observable and implements Model View classes will implement Observer

20 Fine-Grained Models in Swing The designers of Swing implemented Model/View separation even for individual JComponents

21 Fine-Grained Models in Swing The designers of Swing implemented Model/View separation even for individual JComponents e.g. Both JSlider and JScrollBar have an underlying BoundedRangeModel

22 Fine-Grained Models in Swing The designers of Swing implemented Model/View separation even for individual JComponents e.g. Both JSlider and JScrollBar have an underlying BoundedRangeModel BoundedRangeModel stores the current value and the range from minimum to maximum (among other things)

23 Fine-Grained Models in Swing The designers of Swing implemented Model/View separation even for individual JComponents e.g. Both JSlider and JScrollBar have an underlying BoundedRangeModel BoundedRangeModel stores the current value and the range from minimum to maximum (among other things) Example: SliderAndScrollBar.java