-
Notifications
You must be signed in to change notification settings - Fork 0
/
tp4.html
358 lines (344 loc) · 28.4 KB
/
tp4.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
<html>
<body>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<div id="container">
<div id="header">
<div id="header_toprow">
Conservatoire national des arts et métiers
</div>
<div id="header_title">
NFP121 : Programmation avancée<br />
TP n° 4 - pattern Observer / evénements / modèle MVC
</div>
</div>
<div id="content">
<div class="paragraphe">
Thèmes du TP :
<ul>
<li><a href="http://java.sun.com/j2se/1.4/docs/guide/awt/1.3/designspec/events.html" target="_blank">Evénements</a></li>
<li>Modèle <a href="http://csis.pace.edu/~bergin/mvc/mvcgui.html" target="_blank">MVC</a></li>
</ul>
<br />
Lecture préalable :
<ul>
<li>Pattern <a href="http://www.eli.sdsu.edu/courses/spring01/cs635/notes/observer/observer.html" target="_blank">Observateur</a></li>
<li>Modèle <a href="http://csis.pace.edu/~bergin/mvc/mvcgui.html" target="_blank">MVC</a></li>
<li>Modèle <a href="http://docs.oracle.com/javase/1.4.2/docs/guide/awt/1.3/designspec/events.html" target="_blank">événementiel</a></li>
</ul>
<br />
</div>
<hr />
<div class="question">
<img src="images/question1.png" />
<span>Pattern Observateur/Observé</span>
</div>
<div class="paragraphe">
Soit le Pattern Observateur en notation UML selon LA référence en pattern : <i>"Design Patterns Elements of Reusable Object-Oriented Software" , Erich Gamma, Richard Helm, Ralph Johnson and John Vlissides (GOF) , ed. Addison-Wesley, 1995. (existe en français)</i>
</div>
<p align="center">
<img class="win_screenshot" src="images/observer1.png" />
</p>
<div class="paragraphe">
En Java, le paquetage <b>java.util</b> implémente ce Pattern.<br />
<br />
Il propose la classe <a href="http://docs.oracle.com/javase/7/docs/api/index.html?java/util/Observable.html" target="_blank">Observable</a> pour "Subject" du diagramme ci dessus et l'interface <a href="http://docs.oracle.com/javase/7/docs/api/index.html?java/util/Observer.html" target="_blank">Observer</a> (même nom dans le diagramme ci dessus) (lire leur javadoc dans la documentation JAVA).<br />
<br />
<b>Les participants</b><br />
<ul>
<li>L'observé : la classe <b>Subject</b> ou <b>java.util.Observable</b></li>
<li>L'observateur : ici l'interface <b>Observer</b> ou <b>java.util.Observer</b></li>
<li>L'observé concret : la classe <b>ConcreteSubject</b> qui hérite de <b>Observable</b></li>
<li>L'observateur concret :la classe <b>ConcreteObserver</b> , qui implémente l'interface <b>Observer</b>, et qui utilise une référence du sujet <b>ConcreteSubject</b> qu'il observe et réagit à chaque mise à jour</li>
</ul>
<br />
<b>Premier exemple d'implantation de ce pattern en Java.</b><br />
<br />
<b>Classes retenues et proposée dans le paquetage "question1" :</b><br />
<ul>
<li>La classe <b>ConcreteSubject</b> hérite de <b>java.util.Observable</b> (l'observé) et gère une liste de chaines (String), chaque modification de cette liste - introduction d'une nouvelle chaîne - (cf. méthode insert) engendre une notification aux observateurs en passant la nouvelle chaîne en paramètre...</li>
<li>La classe <b>ConcreteObserver</b> (observateur) à chaque notification, affiche cette nouvelle chaîne et mémorise l'origine des notifications (attribut "senders") et les paramètres transmis (attribut "parameters").</li>
<li>La mémorisation du notifiant et du paramètre transmis utilise deux piles (java.util.Stack<t>), <b>senders</b> et <b>arguments</b>, accessibles de l'"extérieur" par les méthodes <b>"public Stack<Observable> senders(){...}"</b> et <b>"public Stack<Observable> parameters(){...}"</b></li>
</ul>
<br />
Pour cette première question, nous souhaitons développer une classe de tests afin de "vérifier" le fonctionnement de l'implantation de ce Pattern,<br />
<br />
Quelques exemples de "validation", d'assertions<br />
<ul>
<li>Vérifier que lors d'une notification, <b>TOUS</b> les observateurs ont bien été informés,</li>
<li>Vérifier que les arguments ont bien été <b>transmis</b></li>
<li>Vérifier que le <b>notifiant est le bon</b> ...etc ...</li>
</ul>
<br />
Extrait du code de vérification : classe <b>"PatternObservateur"</b><br />
</div>
<div class="codesource">
<code>
<font color="#7f0055"><b>public class </b></font><font color="#000000">PatternObservateur </font><font color="#7f0055"><b>extends </b></font><font color="#000000">junit.framework.TestCase </font><font color="#000000">{</font>
<br />
<font color="#ffffff"></font>
<br />
<font color="#ffffff"> </font><font color="#7f0055"><b>public </b></font><font color="#7f0055"><b>void </b></font><font color="#000000">testNotify</font><font color="#000000">() {</font>
<br />
<font color="#ffffff"> </font><font color="#000000">ConcreteSubject list;</font>
<br />
<font color="#ffffff"> </font><font color="#000000">ConcreteObserver observer;</font>
<br />
<font color="#ffffff"></font>
<br />
<font color="#ffffff"> </font><font color="#000000">list = </font><font color="#7f0055"><b>new </b></font><font color="#000000">ConcreteSubject</font><font color="#000000">()</font><font color="#000000">; </font><font color="#3f7f5f">// création d'un "observé" constitué d'une liste</font>
<br />
<font color="#ffffff"> </font><font color="#000000">observer = </font><font color="#7f0055"><b>new </b></font><font color="#000000">ConcreteObserver</font><font color="#000000">()</font><font color="#000000">; </font><font color="#3f7f5f">// création d'un observateur</font>
<br />
<font color="#ffffff"> </font><font color="#000000">list.addObserver</font><font color="#000000">(</font><font color="#000000">observer</font><font color="#000000">)</font><font color="#000000">; </font><font color="#3f7f5f">// ajouter cet observateur à la liste</font>
<br />
<font color="#ffffff"> </font><font color="#000000">list.insert</font><font color="#000000">(</font><font color="#2a00ff">"il fait beau, ce matin"</font><font color="#000000">)</font><font color="#000000">; </font><font color="#3f7f5f">// modification de cette liste, l'observateur doit</font>
<br />
<font color="#ffffff"> </font><font color="#3f7f5f">// (dervrait) être notifié</font>
<br />
<font color="#ffffff"></font>
<br />
<font color="#ffffff"> </font><font color="#3f7f5f">// "vérification" :</font>
<br />
<font color="#ffffff"> </font><font color="#000000">assertFalse</font><font color="#000000">(</font><font color="#000000">observer.senders</font><font color="#000000">()</font><font color="#000000">.empty</font><font color="#000000">())</font><font color="#000000">; </font><font color="#3f7f5f">// elle ne doit pas être vide,</font>
<br />
<font color="#ffffff"> </font><font color="#000000">assertEquals</font><font color="#000000">(</font><font color="#000000">list, observer.senders</font><font color="#000000">()</font><font color="#000000">.pop</font><font color="#000000">())</font><font color="#000000">; </font><font color="#3f7f5f">// est-ce le bon émetteur ?</font>
<br />
<font color="#ffffff"> </font><font color="#000000">assertEquals</font><font color="#000000">(</font><font color="#2a00ff">"il fait beau, ce matin"</font><font color="#000000">, observer.arguments</font><font color="#000000">()</font><font color="#000000">.pop</font><font color="#000000">())</font><font color="#000000">; </font><font color="#3f7f5f">// le paramètre reçu est-il correct ?</font>
<br />
<font color="#ffffff"> </font><font color="#000000">}</font>
<br />
<font color="#ffffff"> </font><font color="#3f7f5f">//...</font>
</code>
</div>
<br />
<div class="paragraphe">
Un exemple de test avec BlueJ: vérification qu'un observateur est bien notifié avec le paramètre bien reçu.<br />
<br />
<b>Complétez les 3 méthodes de test de la classe "PatternObservateur".</b>
</div>
<p align="center">
<img class="win_screenshot" src="images/bluej1.png" />
</p>
<hr />
<div class="question">
<img src="images/question2_1.png" />
<span>Introduction aux événements de l'AWT</span>
</div>
<div class="paragraphe">
<b>(paquetage java.awt.event, évènements engendrés par une instance de la classe javax.swing.JButton)</b><br />
<br />
<i>En java, les api AWT ou SWING utilise le pattern Observateur pour la gestion des évènements, seuls les noms des méthodes diffèrent. Les notifications sont ici engendrées par un changement d'état de l'interface graphique : un clic sur un bouton, un déplacement de souris, etc...</i><br />
<br />
Exemple :
<ul>
<li>La classe <b>Observable</b> "<i>est remplacée par</i>" la classe <b>javax.swing.JButton</b></li>
<li>La méthode <b>addObserver(Observer o)</b> "<i>correspond à</i>" <b>addActionListener(ActionListener l)</b></li>
<li>La méthode <b>notifyObservers(Object arg)</b> "<i>est remplacée par</i>" <b>actionPerformed(ActionEvent ae)</b></li>
<li>L'interface <b>Observer</b> "<i>est remplacée par</i>" l'interface <b>java.awt.event.ActionListener</b></li>
</ul>
<b>A chaque clic, un ou plusieurs observateurs sont réveillés :</b>
<ul>
<li>Le bouton A a 3 observateurs (jbo1, jbo2 et jbo3)</li>
<li>Le bouton B a 2 observateurs (jbo1 et jbo2)</li>
<li>Le bouton C a 1 observateur (jbo1)</li>
</ul>
<applet code="question2/AppletteQuestion2.class" codebase="./" width="300" height="600" archive="applettes.jar"></applet>
<br />
<b>Compléter les classes AppletteQuestion2 et JButtonObserver afin d'obtenir le même comportement et les mêmes traces</b>
<p align="center">
<img class="win_screenshot" src="images/bluej2.png" />
</p>
</div>
<hr />
<div class="question">
<img src="images/question2_2.png" />
<span>La classe JMouseObserver</span>
</div>
<applet code="question2/AppletteQuestion2.class" codebase="./" align="baseline" width="300" height="600" archive="applettes.jar"><param name="mouse" value="oui">version 1.5</applet>
<div class="paragraphe">
Cette fois :
<br />
<ul>
<li>La méthode <b>addObserver</b> est remplacée par <b>java.awt.event.addMouseListener</b>.</li>
<li>La méthode <b>notifyObservers()</b> est remplacée par <b>mouseXXXXX(MouseEvent ae)</b>.</li>
<li>L'interface <b>Observer</b> est remplacée par l'interface <b>java.awt.event.MouseListener</b>.</li>
</ul>
<b>Complétez la méthode mouseEntered</b><br />
<br />
Pour cette question ajoutez le paramètre <b>mouse/oui</b>, lors de l'éxécution de l'applette comme le suggère cette copie d'écran<br />
</div>
<p align="center">
<img class="win_screenshot" src="images/bluej3.png" />
</p>
<hr />
<div class="question">
<img src="images/question3_1.png" />
<span>Le modèle MVC</span>
</div>
<p align="center">
<img class="win_screenshot" src="images/mvc.png" /><br />
source : <a href="http://www.oracle.com/technetwork/java/mvc-detailed-136062.html" target="_blank">Java BluePrints Model-View-Controller</a><br />
</p>
<div class="paragraphe">
<br />
Selon le "pattern MVC" (Modèle-Vue-Contrôleur)
<ul>
<li>Le Modèle contient la logique et l'état de l'application, il prévient ses observateurs lors d'un changement d'état.</li>
<li>La Vue représente l'interface utilisateur.</li>
<li>Le Contrôleur assure la synchronisation entre la vue et le modèle.</li>
</ul>
<b>Développez une application de type calculette à pile, selon le paradigme MVC</b><br />
<br />
L'évaluation d'une expression arithmétique peut être réalisée par l'usage d'une pile d'entiers<br />
<br />
Par exemple l'expression 3 + 2 engendre la séquence :<br />
</div>
<div class="codesource">
<code>
<font color="#ffffff"> </font><font color="#000000">empiler</font><font color="#000000">(</font><font color="#990000">3</font><font color="#000000">)</font><font color="#000000">;</font>
<br />
<font color="#ffffff"> </font><font color="#000000">empiler</font><font color="#000000">(</font><font color="#990000">2</font><font color="#000000">)</font><font color="#000000">;</font>
<br />
<font color="#ffffff"> </font><font color="#000000">empiler</font><font color="#000000">(</font><font color="#000000">depiler</font><font color="#000000">() </font><font color="#000000">+ depiler</font><font color="#000000">())</font><font color="#000000">;</font>
</code>
</div>
<div class="paragraphe">
de même que l'expression 3 + 2 * 5 correspond à la séquence :
</div>
<div class="codesource">
<code>
<font color="#ffffff"> </font><font color="#000000">empiler</font><font color="#000000">(</font><font color="#990000">3</font><font color="#000000">)</font><font color="#000000">;</font>
<br />
<font color="#ffffff"> </font><font color="#000000">empiler</font><font color="#000000">(</font><font color="#990000">2</font><font color="#000000">)</font><font color="#000000">;</font>
<br />
<font color="#ffffff"> </font><font color="#000000">empiler</font><font color="#000000">(</font><font color="#990000">5</font><font color="#000000">)</font><font color="#000000">;</font>
<br />
<font color="#ffffff"> </font><font color="#000000">empiler</font><font color="#000000">(</font><font color="#000000">depiler</font><font color="#000000">()</font><font color="#000000"> * depiler</font><font color="#000000">())</font><font color="#000000">;</font>
<br />
<font color="#ffffff"> </font><font color="#000000">empiler</font><font color="#000000">(</font><font color="#000000">depiler</font><font color="#000000">()</font><font color="#000000"> + depiler</font><font color="#000000">())</font><font color="#000000">;</font>
</code>
</div>
<div class="paragraphe">
L'architecture logicielle induite par l'usage du paradigme MVC nous donne<br />
<br />
<ul>
<li>Le Modèle est une pile (classe <b>PileModele<T></b>).<br />
<i> Le Modèle lors d'un changement d'état prévient ses observateurs.</i>
</li>
<br />
<li>La Vue correspond à l'affichage de l'état de la pile (classe <b>Vue</b>).<br />
<i> La vue s'inscrit auprès du Modèle lors de l'appel du constructeur d'une Vue, à chaque notification, la vue s'enquiert de l'état du modèle et l'affiche.</i>
</li>
<br />
<li>Le Contrôleur gère les évènements issus des boutons +, -, *, /,[] (classe <b>Controleur</b>).<br />
<i> Le contrôleur gère localement les écouteur(Listener) des boutons de l'IHM, notons que la gestion des boutons utilise une architecture MVC.</i>
</li>
<br />
<li>L'applette crée, assemble le modèle, la vue et le contrôle (classe <b>AppletteCalculette</b>).</li>
</ul>
</div>
<p align="center">
<img class="win_screenshot" src="images/bluej4.png" />
</p>
<div class="paragraphe">
Une des implémentations des piles issue du tp3, est installée dans le package tp3, proposer l'implémentation des classes PileModele<t> et Contrôleur.<br />
<br />
Selon "MVC" la classe <b>PileModele<T></b> hérite de la classe Observable et implémente PileI<T>, à chaque changement d'état, modification de la pile les observateurs inscrits seront notifiés.<br />
<br />
La pile du tp3, sans modification, est utilisée, seules certaines méthodes seront redéfinies, enrichies, décorées...<br />
<br />
La classe <b>Controleur</b> implémente les actions, évènements engendrés par l'utilisateur, à chaque opération souhaitée le contrôleur altère les données du modèle de la pile, celle-ci à chaque occurrence d'un changement d'état prévient ses observateurs, la vue en est un.<br />
<br />
<br />
Une AppletteCalculette au comportement souhaité :<br />
<br />
</div>
<applet code="question3/AppletteVue.class" codebase="./" align="baseline" width="300" height="90" archive="applettes.jar"></applet>
<div class="paragraphe">
Notez qu'un mauvais format de nombre ou une division par zéro n'ont aucune incidence.<br />
<h2>Soumettez cette question à JNEWS avant de poursuivre.</h2>
</div>
<hr />
<div class="question">
<img src="images/question3_2.png" />
<span>Critiquez cette proposition d'architecture</span>
</div>
<div class="paragraphe">
Par exemple<br />
<ul>
<li>Le modèle pourrait être la calculette constituée pour ses calculs internes d'une pile,</li>
<li>Pourquoi les "listeners" des boutons sont-ils locaux au contrôleur ?</li>
<li>Ce choix de découpage MVC vous parait-il réaliste ?</li>
<li>...</li>
</ul>
<br />
Proposer votre architecture MVC , un schéma de type diagramme UML, les interfaces java et votre proposition en quelques lignes sur votre rapport suffiront.
</div>
<br />
<hr />
<div class="question">
<img src="images/question3_3.png" />
<span>Postliminaire ou modification de l'application respectant le principe "MVC"</span>
</div>
<div class="paragraphe">
Ajouter cette nouvelle Vue au modèle, vérifiez que seule la classe Applette est concernée par cet ajout, et que les modifications du source sont mineures.
</div>
<div class="codesource">
<code>
<font color="#7f0055"><b>public class </b></font><font color="#000000">Vue2 </font><font color="#7f0055"><b>extends </b></font><font color="#000000">JPanel </font><font color="#7f0055"><b>implements </b></font><font color="#000000">Observer </font><font color="#000000">{</font>
<br />
<font color="#ffffff"> </font>
<br />
<font color="#ffffff"> </font><font color="#7f0055"><b>private </b></font><font color="#000000">JSlider jauge;</font>
<br />
<font color="#ffffff"> </font><font color="#7f0055"><b>private </b></font><font color="#000000">PileModele<Integer> pile;</font>
<br />
<font color="#ffffff"></font>
<br />
<font color="#ffffff"> </font><font color="#7f0055"><b>public </b></font><font color="#000000">Vue2</font><font color="#000000">(</font><font color="#000000">PileModele<Integer> pile</font><font color="#000000">) {</font>
<br />
<font color="#ffffff"> </font><font color="#7f0055"><b>super</b></font><font color="#000000">()</font><font color="#000000">;</font>
<br />
<font color="#ffffff"> </font><font color="#7f0055"><b>this</b></font><font color="#000000">.pile = pile;</font>
<br />
<font color="#ffffff"> </font><font color="#7f0055"><b>this</b></font><font color="#000000">.jauge = </font><font color="#7f0055"><b>new </b></font><font color="#000000">JSlider</font><font color="#000000">(</font><font color="#000000">JSlider.HORIZONTAL, </font><font color="#990000">0</font><font color="#000000">, pile.capacite</font><font color="#000000">()</font><font color="#000000">, </font><font color="#990000">0</font><font color="#000000">)</font><font color="#000000">;</font>
<br />
<font color="#ffffff"> </font><font color="#7f0055"><b>this</b></font><font color="#000000">.jauge.setValue</font><font color="#000000">(</font><font color="#990000">0</font><font color="#000000">)</font><font color="#000000">;</font>
<br />
<font color="#ffffff"> </font><font color="#000000">setLayout</font><font color="#000000">(</font><font color="#7f0055"><b>new </b></font><font color="#000000">FlowLayout</font><font color="#000000">(</font><font color="#000000">FlowLayout.CENTER</font><font color="#000000">))</font><font color="#000000">;</font>
<br />
<font color="#ffffff"> </font><font color="#7f0055"><b>this</b></font><font color="#000000">.jauge.setEnabled</font><font color="#000000">(</font><font color="#7f0055"><b>false</b></font><font color="#000000">)</font><font color="#000000">;</font>
<br />
<font color="#ffffff"> </font><font color="#000000">add</font><font color="#000000">(</font><font color="#7f0055"><b>this</b></font><font color="#000000">.jauge</font><font color="#000000">)</font><font color="#000000">;</font>
<br />
<font color="#ffffff"> </font><font color="#000000">setBackground</font><font color="#000000">(</font><font color="#000000">Color.magenta</font><font color="#000000">)</font><font color="#000000">;</font>
<br />
<font color="#ffffff"> </font><font color="#000000">pile.addObserver</font><font color="#000000">(</font><font color="#7f0055"><b>this</b></font><font color="#000000">)</font><font color="#000000">;</font>
<br />
<font color="#ffffff"> </font><font color="#000000">}</font>
<br />
<font color="#ffffff"></font>
<br />
<font color="#ffffff"> </font><font color="#7f0055"><b>public </b></font><font color="#7f0055"><b>void </b></font><font color="#000000">update</font><font color="#000000">(</font><font color="#000000">Observable obs, Object arg</font><font color="#000000">) {</font>
<br />
<font color="#ffffff"> </font><font color="#000000">jauge.setValue</font><font color="#000000">(</font><font color="#000000">pile.taille</font><font color="#000000">())</font><font color="#000000">;</font>
<br />
<font color="#ffffff"> </font><font color="#000000">}</font>
<br />
<font color="#ffffff"></font>
<br />
<font color="#000000">}</font>
</code>
</div>
<div class="paragraphe">
<h2>Cette modification n'est pas à soumettre à JNEWS.<br />
Une copie d'écran sur votre rapport suffira.</h2>
</div>
</div>
</div>
<div id="footer">
<a class="lien" href="http://jfod.cnam.fr/" target="_blank">JFOD</a> | <a class="lien" href="http://deptmedia.cnam.fr/phpBB2/viewforum.php?f=40" target="_blank">FORUM</a> | <a class="lien" href="http://www.cnam.fr/" target="_blank">CNAM</a>
</div>
</div>
</body>
</html>