CMPT 270: Developing Object-Oriented Systems - PDF

CMPT 270 Developing Object Oriented Systems Model-View-Controller Architecture Jason T Bowey University of Saskatchewan Jason T Bowey CMPT 270 1/18  Learning Objectives Understand the structure of MVC architecture Differentiate MVC and Three-...

CMPT 270 Developing Object Oriented Systems Model-View-Controller Architecture Jason T Bowey University of Saskatchewan Jason T Bowey CMPT 270 1/18  Learning Objectives Understand the structure of MVC architecture Differentiate MVC and Three-Layer Architecture Implement MVC architecture using the Observer Pattern Jason T Bowey CMPT 270 2/18  Model-View-Controller Design Pattern Model : Holds and manipulates data Performs business logic to do tasks Notifies the View when its data changes View : Takes user input Presents and visualizes data Controller : Receives user input Converts user input into messages to the model Jason T Bowey CMPT 270 3/18  MVC - Interaction Cycle Model-View-Controller matches with the interaction cycle; the way humans interact with an interactive application Jason T Bowey CMPT 270 4/18  Benefits Provides recognizable structure to your application Offers separation of concerns that promotes code reusability Jason T Bowey CMPT 270 5/18  Adoption Model-View-Controller is a very popular software architecture It was originally introduced in SmallTalk in the ’70s, and it is language- and platform-agnostic. Commonly used for developing user interfaces that divide the related program logic into three interconnected elements Popular for designing games and visually interactive systems (e.g., drawing application) Jason T Bowey CMPT 270 6/18  Exercise 1: A Simple MVC System Create classes for Model, View, and Controller Create a simple ’incrementing’ calculator program Jason T Bowey CMPT 270 7/18 MVC with Observer Pattern Jason T Bowey CMPT 270 8/18  View - Observer Implements the Observer interface The update() method is called by the Model when its data has changed How does a model tell the view that its data has changed? Jason T Bowey CMPT 270 9/18  Model - Observable Make the model inherit from the Observable class in Java This allows the model to have an Observer added to it addObserver(Observer o) is a method inherited from Observable class model.addObserver(view) can be placed somewhere (usually right after model and view are created) to let the view be notified when the model wants Jason T Bowey CMPT 270 10/18  In the Model In the model, after making a change to the data: Call setChanged() to indicate the data has been changed Call notifyObservers() to notify all observers that the model has changed This causes their update() method to run   1 public void setValue ( int x ) { 2 value = x ; 3 setChanged (); 4 notifyObservers (); 5 }   Jason T Bowey CMPT 270 11/18  Updating the View Once the view has been notified that a change has been made, it can either: Request for the data from the model (pull) via accessor methods Or can be sent some data directly (push) If pull is used, the view needs access to the model (stores the model as an instance variable) Jason T Bowey CMPT 270 12/18  Push Updates To get push updates when the model changes, use a different version of notifyObservers(): notifyObservers(Object arg) This sends an object of your choice to all Observers If push is used, the view dot not necessarily need direct access to the model Jason T Bowey CMPT 270 13/18  Observers There can be more than one observer for a model They all get notified when the model changes and issues a notification Notice that the model knows little about the observers This promotes reuse and reduces coupling Jason T Bowey CMPT 270 14/18  Controller The controller is still doing a lot of work If the user is interacting, it is the controller that is responding If a button is clicked, the controller intercepts and tells the model to change This causes observers, such as the view, to be notified Then the view either receives data from the model, or asks for the data from the model Jason T Bowey CMPT 270 15/18  Example 2: MVC with Observer Refactor the simple MVC system to make use of the Observer pattern Jason T Bowey CMPT 270 16/18  Exercise 3: MVC with Multiple Views One of the benefits of MVC with the Observer pattern is the loose coupling between the Model and View The Observable class that Model inherits from maintains a collection of Observers We can create multiple different windows that all receive updates from the Model and display the model in different ways e.g., A video game and a minimap Create a second view and add it to the Model’s observers Jason T Bowey CMPT 270 17/18  Summary MVC architecture is commonly used to design interactive systems The Observer pattern can be used to facilitate the updates between the Model and View Jason T Bowey CMPT 270 18/18