MVC Pattern: Enhancing User Interface Flexibility in Interactive Applications

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. Outline • Background • Model-View-Controller • Context • Problem • Solution • Structure • CRC Cards • Dynamics • Variants • Known Uses • Conclusion Pattern-Oriented Design

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

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

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

6. An Example: Political Elections Pattern-Oriented Design

7. Context • Interactive applications with a flexible human-computer interface Pattern-Oriented Design

8. 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. Pattern-Oriented Design

9. 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 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. • Support different ‘look and feel’ standards or porting the user interface should not affect code in the core of the application. Pattern-Oriented Design

10. Solution • Model-View-Controller (MVC) • First introduced in the Smalltalk-80 • Divide into the three parts • Processing • Output • Input Pattern-Oriented Design

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

12. Structure • Class-Responsibility-Collaborator (CRC) Cards Pattern-Oriented Design

13. Structure Pattern-Oriented Design

14. DynamicsScenario I Pattern-Oriented Design

15. DynamicsScenario II Pattern-Oriented Design

16. Variants • Document-View • 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 Pattern-Oriented Design

17. Known Uses • Smalltalk • MFC • Integrated in the Visual C++ environment • CDocument • CView • ET ++ Pattern-Oriented Design

18. MVC Model Data Core functionality View Output Controller Input Document-View Document Data Core functionality View Input Output Conclusion Pattern-Oriented Design