1. Model-View-Controller Ku-Yaw Chang canseco@mail.dyu.edu.tw Assistant Professor, Department of Computer Science and Information Engineering Da-Yeh University

2. 22004/11/16Pattern-Oriented Design Outline BackgroundModel-View-Controller Context Context Problem Problem Solution Solution Structure Structure CRC Cards Dynamics Dynamics Variants Variants Known Uses Conclusion

3. 32004/11/16Pattern-Oriented Design Background Today’s systems A high degree of user interaction, with help of graphical user interfaces. A high degree of user interaction, with help of graphical user interfaces. The challenges Keep the functional core independent of the user interface Keep the functional core independent of the user interface The core is based on the functional requirements Usually remains stable Usually remains stable User interfaces are often subject to change and adaptation

4. 42004/11/16Pattern-Oriented Design Background Two architectural patterns for interactive systems (from POSA1) Model-View-Controller pattern (MVC) Model-View-Controller pattern (MVC) Presentation-Abstraction-Control pattern (PAC) Presentation-Abstraction-Control pattern (PAC)

5. 52004/11/16Pattern-Oriented Design Model-View-Controller Divide an interactive application into three components Model Model Core functionality Data Views Views Display information Controllers Controllers Handle the user interface A change-propagation mechanism Consistency between the user interface and the model Consistency between the user interface and the model

6. 62004/11/16Pattern-Oriented Design An Example: Political Elections

7. 72004/11/16Pattern-Oriented Design Context Interactive applications with a flexible human-computer interface

8. 82004/11/16Pattern-Oriented Design Problem User interfaces are especially prone to change requests. Different user place conflicting requirements on the user interface. Building a system with the required flexibility is expensive and error-prone if the user interface is tightly interwoven with the functional core.

9. 92004/11/16Pattern-Oriented Design Problem The following forces influence the solution The same information is presented differently in different windows, for example, in a bar or pie chart. The same information is presented differently in different windows, for example, in a bar or pie chart. The display and behavior of the application must reflect data manipulations immediately. The display and behavior of the application must reflect data manipulations immediately. Changes to the user interface should be easy, and even possible at run-time. Changes to the user interface should be easy, and even possible at run-time. Support different ‘look and feel’ standards or porting the user interface should not affect code in the core of the application. Support different ‘look and feel’ standards or porting the user interface should not affect code in the core of the application.

10. 102004/11/16Pattern-Oriented Design Solution Model-View-Controller (MVC) First introduced in the Smalltalk-80 First introduced in the Smalltalk-80 Divide into the three parts Divide into the three partsProcessingOutputInput

11. 112004/11/16Pattern-Oriented Design Solution Model-View-Controller (MVC) Model Model Encapsulate core data and functionality Independent of specific output representations or input behavior Independent of specific output representations or input behavior View View Display information to the user Obtain data from the model Multiple views of the model Controller Controller Receive input Events that encode mouse movement, activation of mouse buttons, or keyboard input Events that encode mouse movement, activation of mouse buttons, or keyboard input

12. 122004/11/16Pattern-Oriented Design Structure Class-Responsibility-Collaborator (CRC) Cards

13. 132004/11/16Pattern-Oriented Design Structure

14. 142004/11/16Pattern-Oriented Design Dynamics Scenario I

15. 152004/11/16Pattern-Oriented Design Dynamics Scenario II

16. 162004/11/16Pattern-Oriented Design Variants Document-View Relax the separation of view and controller Relax the separation of view and controller In several GUI platforms, window display and event handling are closely interwoven. Combine the responsibilities of the view and the controller from MVC in a single component Sacrificing exchangeability of controllers Sacrificing exchangeability of controllers

17. 172004/11/16Pattern-Oriented Design Known Uses SmalltalkMFC Integrated in the Visual C++ environment Integrated in the Visual C++ environmentCDocumentCView ET ++

18. 182004/11/16Pattern-Oriented Design Conclusion MVC Model ModelData Core functionality View ViewOutput Controller ControllerInputDocument-View Document Data Core functionality View Input Output