TP 1 à 3

docs/TP1.md

@@ -5,9 +5,10 @@ Dans cette première partie, nous allons nous familiariser avec le code de l’a
 
 
 ### 🔬 À la recherche des classes perdues...
-
+---
 D’abord, importez le projet sous IntelliJ, Eclipse, ou un autre environnement de développement de votre choix. 
 Les dépendances du projet sont gérées automatiquement grâce à Maven. Par curiosité, vous pouvez les identifier dans le fichier `pom.xml` :
+
 - openjfx
 - junit (pour les tests)
 - testfx (pour les tests graphiques)
@@ -15,8 +16,8 @@ Les dépendances du projet sont gérées automatiquement grâce à Maven. Par cu
 Compilez le projet, lancez l'application, et testez !
 
 >**🖥 TODO**
-> - Créez un diagramme des classes, il vous sera utile par la suite. Pour cela, vous pouvez utiliser un stylo et un papier... 📝
-> 
+>
+> - Créez un diagramme des classes, il vous sera utile par la suite. <br>Pour cela, vous pouvez utiliser un stylo et un papier... 📝
 > - Efforcez-vous de comprendre le rôle de chaque classe 🧐
 
 <br>Les formes géométriques qui sont dessinées sont représentées par des objets, qui sont stockés dans le `DrawingPane`. Mais où sont les classes représentant les différentes formes géométriques ??
@@ -26,10 +27,11 @@ Compilez le projet, lancez l'application, et testez !
 <br> 
 
 ### 🌴 Le triangle des bermudes
-
+---
 On veut maintenant pouvoir dessiner des triangles.
 
 >**🖥 TODO**
+>
 > - Décidez quelle classe vous utiliserez pour représenter cette nouvelle forme géométrique.
 > - En vous inspirant de la manière dont les rectangles et les ellipses sont créés et ajoutés au `DrawingPane`, ajoutez les classes nécessaires ainsi qu’un bouton dans l’interface pour pouvoir dessiner des triangles.
 > - Définissez un style CSS à appliquer aux triangles.
@@ -37,13 +39,14 @@ On veut maintenant pouvoir dessiner des triangles.
 <br> 
 
 ### 🩺 Des tests
-
+---
 Les tests unitaires sont un excellent moyen de vérifier la qualité du code produit. Il y a beaucoup d’avantages à utiliser les tests unitaires, comme vous le verrez dans un autre module. Au fur et à mesure du développement de l’application, vous devrez écrire les tests permettant de vérifier la validité de votre code, et d’identifier des erreurs possibles. 
 
 Commençons tout de suite !
 
 Dans le package `test`, il y a déjà une classe permettant de tester quelques méthodes de l’application.
 >**🖥 TODO**
+>
 > - En vous inspirant des tests existants, écrivez quelques tests unitaires permettant de vérifier le bon fonctionnement des classes que vous avez ajoutées pour dessiner des triangles. Pensez aux différents cas possibles. 
 >
 > - Vérifiez que les tests passent, ou corrigez votre code si nécessaire. 
@@ -52,10 +55,11 @@ Dans la suite du projet, nous continuerons à écrire des tests pour chaque nouv
 <br> 
 
 ### 🎮 Tu me montres ta collection ?
-
+---
 La classe `DrawingPane` contient un attribut de type `ArrayList` pour stocker les formes géométriques créées. Pour y accéder, un getter a été implémenté : il s’agit de la méthode `getShapes()`. Il est d’ailleurs utilisé dans la classe `MouseMoveHandler`, par exemple.
 
 >**🖥 TODO**
+>
 > - Quel problème relatif au principe d’encapsulation ce getter pose-t-il ?
 
 Pour vous en rendre compte, dans la classe `ShapeButtonHandler`, essayez de remplacer la ligne :
@@ -67,12 +71,13 @@ par celle-ci :
     drawingPane.getShapes().add(shape);
 
 >**🖥 TODO**
+>
 > - Que se passe-t-il, et pourquoi ? 👾
-> - Qu'est ce que cela révèle à propos de ce fameux getter ?
+> - Qu'est-ce que cela révèle à propos de ce fameux getter ?
 > - Un peu de réflexion : Que proposeriez-vous pour corriger ce problème ? 🤷🏽‍
 
 Réfléchissez et proposez une solution avant de [lire la suite... ](./TP1_plus.md)
 
-
+<br>
 
 [🔙 Retour](../README.md)

docs/TP1_plus.md

@@ -2,14 +2,15 @@
 ## TP1 – Découverte du projet
 
 ### 🎮 Tu me montres ta collection ?
-
+---
 _Alors, vous avez trouvé ?_
 
 En fait, une bonne pratique consiste à s’inspirer du patron _Iterator_. Nous n’allons pas implémenter un itérateur (quoi que cela soit possible), mais simplement utiliser l’itérateur existant dans l’API java (sous la classe du même nom : `java.lang.Iterator`).
 
 
 >**🖥 TODO** 
-> - Documentez-vous sur le patron *Iterator*. Vous pouvez aussi lire l’article https://blog.zenika.com/2010/10/31/au-coeur-du-jdk-l-interface-iterable/
+>
+> - Documentez-vous sur le patron *Iterator*. Vous pouvez aussi lire l’article [https://blog.zenika.com/2010/10/31/au-coeur-du-jdk-l-interface-iterable/](https://blog.zenika.com/2010/10/31/au-coeur-du-jdk-l-interface-iterable/)
 > - Faites en sorte que la classe `DrawingPane` implémente l’interface `java.lang.Iterable`
 > - Supprimez la méthode `getShapes()` et remplacez ses appels (dans l’application, et dans les tests) pour qu’ils utilisent plutôt la nouvelle méthode.
   

docs/TP2.md

@@ -0,0 +1,69 @@
+# Minipaint 
+## TP2 – De l'observer
+
+Le patron *Observer* est certainement le plus couramment utilisé. Il est d’ailleurs déjà utilisé à plusieurs reprises dans notre application, mais on découvrira cela tout à l’heure. D’abord, nous allons implémenter le patron *Observer* pour ajouter une nouvelle fonctionnalité à l’application. 
+
+On veut rajouter une barre de statut horizontale, en bas de la fenêtre. Cette barre indiquera le nombre de formes géométriques dessinées, et devra être mise à jour à chaque forme ajoutée ou supprimée. 
+
+>**🖥 TODO**
+>
+> - Commencez par créer une nouvelle classe `StatutBar`, qui héritera de `HBox`, et qui contiendra un attribut de type `Label` dans lequel on affichera le nombre de formes.
+> - Ajoutez une instance de cette classe dans l’interface, en la positionnant en bas de la fenêtre. Inspirez-vous du style CSS de la barre d’outils pour lui appliquer un style similaire (mais cette fois avec une bordure en haut).
+
+
+<center><img src="images/minipaint_02.png" alt="drawing" width="550"/></center>
+
+La barre de statut est bien créée, mais pour l’instant elle « ne sait rien » des formes qui sont dessinées. 🤷🏼‍♂️
+
+Reprenez l’exemple vu en cours illustrant le fonctionnement du patron *Observer* et cherchez à l’appliquer notre problème : 
+
+>**🖥 TODO**
+>
+> -	 Identifiez le ***sujet*** (« émetteur », ou « observable ») : quelle est la classe qui contient l’information clé, et qui pourra avertir les autres qu’il y a eu un changement ?
+> - Qui est l’***observateur*** (ou « abonné », ou « observer ») qui doit recevoir les notifications, être mis à jour ? 
+
+<br> 
+
+🏅 Excellent, vous avez identifié les deux classes impliquées dans ce patron ! Il ne reste plus qu’à coder : 
+
+
+>**🖥 TODO**
+>
+> -	 Créez une interface `Observer`, contenant la méthode :
+>
+		public void update() ;
+> 
+> - Modifiez les deux classes identifiées précédemment :
>  - Le ***sujet*** doit pouvoir gérer une liste d’observateurs (on doit pouvoir en ajouter, en retirer), et les notifier lorsqu’il effectue un changement. 
+>  - L’***observateur*** doit implémenter l’interface `Observer`
+> - Finalement, n’oubliez pas que l’observateur doit s’abonner auprès du sujet pour recevoir les notifications !
+> - Ah oui, dernière chose : pensez à créer un test pour vérifier le bon fonctionnement de votre barre de statut… 
+
+<br>
+
+### 🦸🏻‍♂️ Un patron déguisé
+---
+En réalité, le patron *Observer* est déjà utilisé à plusieurs reprises dans l’application ! Par exemple, intéressons-nous à la classe `ClearButtonHandler`. Cette classe implémente l’interface `EventHandler`, du package `javafx.event`. 
+
+>**🖥 TODO**
+>
+> -	 À quoi sert la classe `ClearButtonHandler` ?
+> - Quel est l’objectif de la méthode `handle` proposée par l’interface `EventHandler` ?
+> - À quel moment sera appelée la méthode `handle` ?
+> - Comment le lien est-il fait entre la classe `ClearButtonHandler` et le bouton de l’interface ?
+> - Quel parallèle pouvez-vous faire avec le patron *Observer* ? 
+
+<br> 
+
+Creusons encore un peu et cherchons à comprendre le fonctionnement de la classe `ShapeButtonHandler` et de ses sous-classes, comme `RectangleButtonHandler`. 
+
+>**🖥 TODO**
+>
+> -	 Quels sont les différents événements que la classe `RectangleButtonHandler` écoute, et quelles sont leur provenance ? Repérez les différents endroits où cette classe (ou sa super-classe) s’enregistre pour écouter ces événements.
+> - Reconstituez le diagramme de séquence décrivant ce qui se passe lors de la création d’un nouveau rectangle, depuis le clic sur le bouton « Rectangle ».
+
+<br> 
+En fait, la classe `RectangleButtonHandler` est très curieuse : elle observe beaucoup de choses !! 🦹🏼‍♀️
+
+<br>
+
+[🔙 Retour](../README.md)