TP 4 à 6

README.md

@@ -2,4 +2,9 @@
 
 Cette application en JavaFX, permettant de dessiner des formes géométriques, va servir de base à un ensemble de TP permettant de découvrir les patrons de conception et leur mise en œuvre. 
 
-[TP1 – Découverte de l'application](docs/TP1.md)
+- [TP1 – Découverte de l'application](docs/TP1.md)
+- [TP2 – De l'Observer](docs/TP2.md)
+- [TP3 – Le patron Adapter](docs/TP3.md)
+- [TP4 – On continue...](docs/TP4.md)
+- [TP5 – Groupement de formes](docs/TP5.md)
+- [TP6 – Le patron Command](docs/TP6.md)

docs/TP2.md

@@ -11,7 +11,7 @@ On veut rajouter une barre de statut horizontale, en bas de la fenêtre. Cette b
 > - 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>
+<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. 🤷🏼‍♂️
 

docs/TP3.md

@@ -3,13 +3,13 @@
 
 ### 🛼 IShape 
 --- 
-Pour différentes raisons, l’architecte souhaite que l’application utilise l’interface `IShape` (fournie ci-dessous) pour manipuler les formes. Il aurait pu nous prévenir avant… La classe `Shape` n’implémente pas cette interface !
+Pour différentes raisons, l’architecte souhaite que l’application utilise l’interface `IShape` (fournie ci-dessous) pour manipuler les formes. Il aurait pu nous prévenir avant… La classe `Shape` n’implémente pas cette interface ! 😩
 
-Le problème, c’est qu’on ne peut pas modifier la classe `Shape` et les classes qui en héritent, comme `Ellipse`, et `Rectangle`, car elles font partie de l’API JavaFx. On pourrait bien sûr étendre toutes les sous-classes qu’on utilise (`Ellipse`, `Rectangle`, etc.) et faire en sorte que ces sous-classes héritent de l’interface. 
+🤔 Le problème, c’est qu’on ne peut pas modifier la classe `Shape` et les classes qui en héritent, comme `Ellipse`, et `Rectangle`, car elles font partie de l’API JavaFx. On pourrait bien sûr étendre toutes les sous-classes qu’on utilise (`Ellipse`, `Rectangle`, etc.) et faire en sorte que ces sous-classes héritent de l’interface. 
 
 >**🖥 TODO**
 >
-> Expliquez pourquoi ce n’est pas une bonne solution. 
+> - Expliquez pourquoi ce n’est pas une bonne solution. 💩
 
 <br>
 L'interface `IShape` en question :
@@ -29,7 +29,7 @@ L'interface `IShape` en question :
 
 Une meilleure solution consiste à utiliser le patron *Adapter*. 
 
-Documentez-vous sur ce patron. Vous pouvez notamment regarder la [vidéo de Christopher Okhravi](https://youtu.be/2PKQtcJjYvc) 
+Documentez-vous sur ce patron. Vous pouvez notamment regarder la [vidéo de Christopher Okhravi](https://youtu.be/2PKQtcJjYvc) 📺
 
 Si vous avez bien suivi :
 

docs/TP4.md

@@ -0,0 +1,104 @@
+# Minipaint 
+## TP4 – On continue...
+
+### 📟 Retour visuel
+---
+
+Dans la partie précédente, on a implémenté une fonctionnalité permettant de sélectionner plusieurs formes à la fois.
+
+>**🖥 TODO**
+>
+> - Modifiez la classe `StatutBar` pour qu’elle affiche aussi le nombre de formes sélectionnées. 
+
+<br>
+ 
+🔕 Problème : le nombre de formes sélectionnées ne se met pas à jour automatiquement. C’est normal, puisque les observateurs du `DrawingPane` sont avertis lorsqu’une forme est ajoutée ou supprimée, mais pas quand une forme est sélectionnée. 
+
+>**🖥 TODO**
+>
+> - Proposez une solution pour que les observateurs du `DrawingPane` soient aussi avertis lorsque la sélection change. Attention, veillez à respecter le principe de la responsabilité des classes... 
+> - Implémentez la solution. 
+> - Écrivez les tests nécessaires.
+
+<br> 
+
+### 🗑 Suppression de forme
+---
+Grâce à la sélection multiple, on peut donc appliquer des actions sur toutes les formes sélectionnées. On a déjà implémenté le déplacement multiple. Continuons avec la suppression de forme(s). 
+
+>**🖥 TODO**
+>
+> - Ajoutez les classes nécessaires et un bouton dans l’interface. 
+> - Écrivez les tests correspondants.
+
+🪲 Oui mais… il reste un « bug » : lorsqu’on supprime une ou plusieurs forme(s), la liste des formes sélectionnées n’est pas vidée ! 
+
+>**🖥 TODO**
+>
+> - Corrigez cela… 🩹
+
+<br> 
+
+### 🗄 Un peu de rangement
+---
+
+>**🖥 TODO**
+>
+> - Créez une classe `ToolBar` qui va contenir tous les boutons de l’interface, et qui se chargera de les instancier. Modifiez la classe `PaintApplication` en conséquence. 
+> - Toutes les classes sont pour l’instant dans le même et unique package `drawing`. Créez les packages `drawing.shapes`, `drawing.ui`, `drawing.handlers`. Déplacez les classes dans les bons packages.
+
+
+Voilà qui a un peu plus d’allure ! 👔
+
+<br>
+
+### 🏭 Une fabrique « simple »
+---
+On voudrait remplacer le texte sur les boutons par des icônes. Chaque action aura son icône dédiée, et le texte deviendra une info-bulle sur le bouton. Cherchez comment ajouter une image sur un objet de type `Button` dans l’API JavaFx. 
+
+Vous pourrez récupérer des icônes libres de droit sur [https://material.io/tools/icons](https://material.io/tools/icons)
+
+>**🖥 TODO**
+>
+> - Dans la classe `ToolBar`, rajoutez les lignes de code nécessaires à l’ajout d’image pour chaque bouton. 
+
+<br>
+
+Vous remarquez que la création de chaque bouton fait intervenir les mêmes lignes de code redondantes. C’est là qu’intervient la *Fabrique « simple »*. Ce n’est pas vraiment un patron de conception, mais plutôt une bonne pratique. 
+
+L’idée consiste à regrouper l’instanciation des boutons dans une seule classe `ButtonFactory`, qui sera donc notre « usine » à boutons. Cette classe contiendra une méthode :
+
+	public Button createButton(String buttonName)
+	
+>**🖥 TODO**
+>
+> - Créez cette classe et implémentez la méthode `createButton`. La classe `ButtonFactory` pourra proposer des constantes (sous forme d’attributs statiques publics) définissant la liste des valeurs que peut prendre le paramètre `buttonName`. Ce paramètre permettra à la méthode `createButton` de déterminer quelle image doit être chargée, et quel texte doit être mis dans l’info-bulle.
+> - Dans la `ToolBar`, faites maintenant appel à cette fabrique pour obtenir les instances de boutons dont vous avez besoin.
+
+<br> 
+
+Maintenant, on voudrait qu’il soit toujours possible de créer des boutons sans icone, avec seulement du texte. 
+
+>**🖥 TODO**
+>
+> - Pour cela, rajoutez un paramètre `style` au constructeur de la `ButtonFactory`, qui pourra prendre 2 valeurs possibles (définies dans des constantes `ICONS_ONLY` et `TEXT_ONLY`). 
+> - Modifiez la méthode `createButton` pour qu’elle instancie les boutons et les configure de la manière voulue, en fonction du style défini lors de l’instanciation de la fabrique.
+> - Testez !
+
+<br>
+
+### 🏗 Mais alors, le patron « Factory Method », qu’est-ce que c’est-y donc ?
+---
+Pour plus de détails sur ce patron, suivez la [vidéo de Christopher Okhravi](https://youtu.be/EcFVTgRHJLM) 📺
+
+En fait, ce patron est déjà présent dans l’application, et vous l’avez utilisé sans vous en rendre compte… 🥷
+
+>**🖥 TODO**
+>
+> - Observez la classe `ShapeButtonHandler` et les classes qui en héritent. Un petit diagramme de classes pourra vous aider…  
+
+Alors, vous avez trouvé ?
+
+<br>
+
+[🔙 Retour](../README.md)

docs/TP5.md

@@ -0,0 +1,17 @@
+# Minipaint 
+## TP5 – Groupement de formes
+
+
+Même s’il est possible de déplacer plusieurs formes à la fois (grâce à la sélection multiple), il pourrait être intéressant de « grouper » plusieurs formes, pour que le groupe soit considéré comme une forme à part entière. Un groupe serait donc une forme composée de plusieurs formes, qu’il s’agisse de formes « de base » ou bien aussi de groupes.
+
+>**🖥 TODO**
+>
+> - Il existe un patron de structure permettant de représenter cela. Identifiez lequel semble le mieux correspondre au problème énoncé. 
+> - Ensuite, cherchez à faire correspondre les différents éléments du patron à des classes ou interfaces de notre application. 
+> - Identifiez quelles classes ou interfaces il vous reste à créer, et implémentez-là.
+> - Ajouter 2 boutons dans l’interface : un bouton permettant de grouper les formes sélectionnées ; et un bouton pour dégrouper la forme sélectionnée, s’il s’agit d’un groupe. 
+> - Testez. 
+
+<br>
+
+[🔙 Retour](../README.md)