1. MVC CompSci 230 S2 2015 Software Construction

2. MVC Architecture  A typical application includes software to  maintain application data,  document text in a word processor  state of a chess game -- positions of pieces  present output  outline view or print preview in a word processor  graphical view of chess game  process user input  key presses  mouse click on controls 132

3. Swing’s Model-based Architecture  “Swing architecture is rooted in the model-view-controller (MVC) design that dates back to SmallTalk.  “MVC architecture calls for a visual application to be broken up into three separate parts:  A model that represents the data for the application  The view that is the visual representation of that data  A controller that takes user input on the view and translates that to changes in the model.” [Amy Fowler, ibid.] 133

4. MVC: According to Wikipedia  A controller can send commands to the model to update the model's state (e.g., editing a document).  It can also send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document).  A model notifies its associated views and controllers when there has been a change in its state.  This notification allows the views to produce updated output, and the controllers to change the available set of commands.  In some cases an MVC implementation may instead be 'passive' and other components must poll the model for updates rather than being notified.  A view requests information from the model that it uses to generate an output representation to the user. 134

5. Model-View-Controller (MVC) Data model Data displayUser input Model ViewController UI: Data: manipulate refresh events 135

6. Spaghetti Code vs Modular Design  Spaghetti Code  Haphazard connections, probably grown over time  No visible cohesive groups  High coupling: high interaction between random parts  Understand it: all or nothing  Modular System  High cohesion within modules  Low coupling between modules  Modules can be understood separately  Interaction between modules is easily-understood and thoroughly specified Both examples have 10 modules and 13 connections! 136

7. E.g. C# TreeView Control TreeView control Nodes collection treeView1.Nodes Java: model listeners Model View Controller 137

8. Multiple Views Model View Controller View Controller 138

9. Typical real-world approach  Sometimes the Controller and View are combined, especially in small programs  Combining the Controller and View is appropriate if they are very interdependent  The Model should still be independent  Never mix Model code with GUI code! Data model Data displayData manipulation logic Model ViewController 139

10. E.g. C# TreeView Control TreeView control Nodes collection treeView1.Nodes Java: model listeners Model View Controller 1310

11. C# DataBase Controls DataSet class -tables -columns -rows DataGrid control -scroll, sort, edit, … Model View Controller DB 1311

12. MVC Example in Java  Example: JList  A javax.swing.ListModel is an object which maintains a list of objects: it knows how big the list is, which object is where in the list, etc, and can insert/remove objects  A javax.swing.JList is a graphical component giving a view of the list and able to receive user input to modify the list DefaultList Model Javax.swing. JList modifies notifies DefaultListModel > AbstractListModel > Javax.swing.ListModel isEmpty(): boolean getSize(): int addElement(Object) removeElement(Object) elementAt(): Object removeElementAt(int) insertElementAt(int) indexOf(Object): int etc JList Javax.swing.JComponent 1312