/~gibson/teaching/designpatterns/designpatterns-mvc.pdf

Transcription

1 Patron: Modèle-Vue-Contrôleur (MVC) /~gibson/teaching/designpatterns/designpatterns-mvc.pdf MVC.1

2 Patron: Modèle-Vue-Contrôleur Modèle-Vue-Contrôleur (MVC) est un pattern architectural qui sépare les données (le modèle), l'interface hommemachine (la vue) et la logique de contrôle (le contrôleur). Trygve Reenskaug - MVC XEROX PARC : MVC.2

3 Patron: observer (vue-modèle) L'application (que nous voulons développer) doit pouvoir gérer plusieurs vues simultanément. Dès que le modèle est modifié, on veut que les vues se redessinent de manière adéquate. MVC.3

4 Patron: observer (contrôleur-modèle) Il peut arriver que l'état du modèle ait un impact sur les contrôleurs. Par exemple, il se peut qu'en fonction du modèle, certaines options ne soient pas disponibles (menus, cases à cocher...). Les contrôleurs doivent donc être avertis de toutes les modications du modèle. Utilisez le patron observer pour modéliser ce lien entre modèles et contrôleurs. MVC.4

5 Patron: composite (vue-vue) On considère que chaque composant peut l'objet d'une vue et que la vue en question peut contenir des sous-vues représentant les sous-composants MVC.5

6 Patron: strategy (vue-contrôleur) On souhaite disposer de moyens d'interaction avec le système pour modifier le modèle. Pour ce faire, on se dote de contrôleurs associés aux vues. Les contrôleurs réagissent aux événements extérieurs (clics sur des boutons, frappes clavier...) et modient le modèle en réponse aux événements en question. La manière dont un contrôleur agit sur le modèle dépend de la vue à laquelle il est associé. MVC.6

7 Patron: Modèle-Vue-Contrôleur (en UML) Exemple typique: puzzle MVC.7

8 We are going to build a MVC for a temperature GUI. You can download the source files from: /~gibson/teaching/designpatterns/sourcemvc.zip MVC.8

9 The executable GUIs Check that the models function correctly MVC.9

10 public class TemperatureMCVC_GUI { public static void main(string args[]) TemperatureMCVC temperaturegui = new TemperatureMCVC(); TO DO: Test/execute this code and try to understand what it is doing MVC.10

11 Validation Tests Initial Value Minimum Enforced (input < min) Maximum Enforced (input > max) Default Value (input invalid) 5 Decimal Places (input > 5 decimal places) MVC.11

12 TO DO: Examine the specification of the MVC public class TemperatureMCVC extends TemperatureMVCSpecification{ public TemperatureMCVC(){ model = new TemperatureModelC(); view = new TemperatureViewC(model, 300, 300); TemperatureController controller = new TemperatureController(model, view); view.addwindowlistenertoframe(controller); MVC.12

13 TO DO: Examine the specification of the TemperatureView public class TemperatureViewC extends TemperatureViewSpecification{ /** * Display format temperature to 5 decimal places */ private static final DecimalFormat df = new DecimalFormat("#.#####"); // display to 5 decimal places /** * We choose to represent the temperature (in Celsius) to 5 decimal places. */ public TemperatureViewC(TemperatureModelSpecification model, int h, int v){ super("temperature (Celsius)", model, h, v); display.settext("" + df.format(model.getc())); // display initial value public void updatetext() { display.settext("" + df.format(model.getc())); MVC.13

14 public class TemperatureController extends WindowAdapter implements Observer, ActionListener{ TemperatureViewSpecification view; TemperatureModelSpecification model; public TemperatureController(TemperatureModelSpecification model, TemperatureViewSpecification view) { this.model = model; this.view = view; model.addobserver(this); // Connect the Controller as observer of the Model view.getdisplay().addactionlistener(this); // Connect the Controller as listener of the View display public void update(observable t, Object o) {view.updatetext(); public void actionperformed(actionevent e){ double value = view.getdisplayvalue(); if (view instanceof TemperatureViewC) model.setc(value); else if (view instanceof TemperatureViewF) model.setf(value); public void windowclosing(windowevent e){ e.getwindow().setvisible(false); System.exit(0); MVC.14

15 TO DO: Create a new MVC system where the Model is in Fahrenheit, the view is in Celsius (as before) and the controller is as before This code is provided: MVC.15

16 Now we can make an interface which combines different views on the same model: MVC.16

17 TO DO: Write the application code TemperatureMVC_FandC_GUI that executes the TemperatureMVC_FandC MVC This is provided TO DO: Check that it functions correctly MVC.17

18 We decide to update the GUI controller with buttons for changing the temperature TO DO: Create a Celsius MVC (TemperatureMCVC_GUI_Buttons.java) with buttons and test its behaviour MVC.18

19 SOME OPTIONAL WORK (FOR MORE EXPERIENCED PROGRAMMERS): 1) There is some information in the model that we havent used the maximum and minimum values add these to the views 2) Replace the textual view with a graphical image of a thermometer 3) Add a slider for controlling the temperature setting MVC.19