SE 382 Model View Controller. Professor Michael Terry January 28, 2008

Transcription

1 SE 382 Model View Controller Professor Michael Terry January 28, 2008

2 Today s Agenda A1 redux A2 notes MVC JTable demo SE 382 / 2

3 Announcements Friday office hours, 11:30-12:30 A2 available on web later today SE 382 / 3

4 A1 Redux How was it? What could have made it better? What was frustrating? What did you learn? How many hours did it take? SE 382 / 4

5 A2 Notes Will be building a rudimentary image manipulation application with filters (we supply the filters) A3 will build upon concepts in A2 SE 382 / 5

6 Questions? SE 382 / 6

7 Designing a Spreadsheet SE 382 / 7

8 Designing a Spreadsheet: Desiderata Text or numbers in each cell Ability to create graphs of the data Should dynamically update when changes made to data Should be able to format cell data (change font styles, etc.) How can we cleanly design software to support this? SE 382 / 8

9 Designing a Spreadsheet First, might bundle everything together Issues? SE 382 / 9

10 Designing a Spreadsheet Issues with bundling everything together What if we want to display data from a database? From a text file? From another source? What if we want to present data as a graph? Primary issue: Data and its presentation are tightly coupled Dependencies exist between underlying data and its presentation Makes it more difficult to swap data sources, or visual representations of the data sources for example, cannot easily switch between spreadsheet view and graph views SE 382 / 10

11 Model View Controller (MVC) SE 382 / 11

12 MVC History Developed in Smalltalk-80 in 1979 by Trygve Reenskaug Now a staple in graphical user interface toolkits Interface architecture decomposed into three parts: Model: Manages the data and its manipulations View: Manages the presentation of the data Controller: Handles user interaction SE 382 / 12

13 MVC: Example Spreadsheet s data source can vary independently of how it is viewed Database, text file, custom class This is the model How data is viewed can vary independently of data source Spreadsheet s grid, graphs This is the view Factoring out model from component provides flexibility in what data is rendered, and how SE 382 / 13

14 MVC: Example SE 382 / 14

15 MVC: Example SE 382 / 15

16 How MVC Works In Theory View obtains pointer to model (e.g., setmodel() ) View queries model to construct its presentation View registers an observer (i.e., listener in Java) with model to be informed of changes Controller interprets user interaction to manipulate model Model informs listeners of changes View updates to match new state of model SE 382 / 16

17 How MVC Works In Practice Controller and view usually tightly coupled Why? SE 382 / 17

18 MVC In Practice Controller and view tightly coupled because interaction must be interpreted in terms of presentation For example, picking: If mouse is clicked or dragged on view, must be able to interpret what that interaction corresponds to View has the information to map points in view to application objects SE 382 / 18

19 MVC: Dependencies View needs to know about model Controller needs to know about model and view Model doesn t need to know about either view or controller Communicates using the observer / publish-subscribe pattern (listeners in Java) Model loosely coupled to view/controller SE 382 / 19

20 MVC: Rationale Separate concerns enables: Multiple, simultaneous views of data Alternative forms of interaction with same underlying data Greater reuse of components (e.g., same component, different model back-ends) Easier testing of underlying data (model) manipulations SE 382 / 20

21 MVC: Multiple Views Given same data set, may wish to render it in multiple ways As table of numbers As pie chart As line graph As audio Separate model makes it easier for other components to make use of the data Reduces dependencies on GUI code that could change SE 382 / 21

22 MVC: Multiple Views SE 382 / 22

23 MVC: Alternative Interaction Data and how it is manipulated (the model) will remain fairly constant over time How we present and manipulate that data (view and controller) via interface will likely change more often SE 382 / 23

24 MVC: Alternative Interaction Consider mature applications like word processors, spreadsheets, file system browsers, image manipulation applications Same underlying operations for years But interaction styles change Presentations (e.g., graph styles) change In each case, can modify interaction and views without affecting data model much, if at all SE 382 / 24

25 MVC: Code Reuse Separate model enables application writers to more easily fit their unique application data to stock controls In spreadsheet example, just need to define a class that implements interface to retrieve data How that data stored is of no concern to spreadsheet component Spreadsheet component itself does not need to be modified Encourages reusability SE 382 / 25

26 MVC: Testing Separate model enables one to more easily develop and test data-specific manipulations independent of user interface Model provides an interface for all manipulations of data, independent of user interface Can use this API for testing purposes, independent of any interaction methods SE 382 / 26

27 MVC In Practice For complex controls, can see aspects of views and controllers delegated to other components Example JTable has ability to set custom renderer and editor of cells SE 382 / 27

28 Customizable: JTable JTable factors out much of its functionality The actual data (TableModel) (part of MVC pattern) Selection of items (ListSelectionModel) Rendering of cells (TableCellRenderer) Editing of cells (TableCellEditor) Developer has lots of flexibility in the data that can be represented, how it can be selected, its method of presentation, and its method of editing SE 382 / 28

29 JTable Demo SE 382 / 29