Tutoriel 4: observer le modèle dans le frontal #

1. Dans frontal.taches ajouter la classe AfficherFileAttente

2. En VSCode, s’assurer d’avoir l’arborescence suivante

   

3. Ouvrir AfficherFileAttente et ajouter le import static suivant:

   • import static ca.ntro.app.tasks.frontend.FrontendTasks.*;

4. Dans AfficherFileAttente, ajouter un groupe de tâches

   import static ca.ntro.app.tasks.frontend.FrontendTasks.*;
   
       public class AfficherFileAttente {
   
           public static void creerTaches(FrontendTasks tasks) {
   
               tasks.taskGroup("AfficherFileAttente")
   
                    .waitsFor("afficherVueFileAttente")
   
                    .contains(subTasks -> {
   
   
                        // Prêt à observer le modèle
   
   
                    });
           }
   

   • NOTE:
     • le groupe de tâche au complet attend que la VueFileAttente soit créée, ce qui se fait dans le groupe de tâches Initialisation
     • dans le cas de VuePartie, la vue est plutôt créée dans le groupe de tâche Navigation

5. Ajouter la tâche afficherFileAttente

   import static ca.ntro.app.tasks.frontend.FrontendTasks.*;
   
       public class AfficherFileAttente {
   
           public static void creerTaches(FrontendTasks tasks) {
   
               tasks.taskGroup("AfficherFileAttente")
   
                    .waitsFor("afficherVueFileAttente")
   
                    .contains(subTasks -> {
   
                        // ajouter l'appel
                        afficherFileAttente(subTasks);
   
                    });
           }
   
           private static void afficherFileAttente(FrontendTasks subTasks) {
   
               subTasks.task("afficherFileAttente")
   
   
                       .waitsFor(created(VueFileAttente.class))
   
                       .waitsFor(modified(ModeleFileAttente.class))
   
                       .executes(inputs -> {
   
                            VueFileAttente              vueFileAttente = inputs.get(created(VueFileAttente.class));
                            Modified<ModeleFileAttente> fileAttente    = inputs.get(modified(ModeleFileAttente.class));
   
                            ModeleFileAttente ancienneFile = fileAttente.previousValue();
                            ModeleFileAttente fileCourante = fileAttente.currentValue();
   
                            // Prêt à afficher les rendez-vous!
                            //
                    });
           }
       }
   

   • NOTES:
     • la tâche récupère la vue
     • la tâche observe le modèle
     • cette tâche sera donc appelée à chaque fois que le modèle est modifié

6. Dans FrontalPong, appeler AfficherFileAttente.creerTaches

   
       public class FrontalPong implements FrontendFx {
   
           // ...
   
           @Override
           public void createTasks(FrontendTasks tasks) {
   
               // ...
   
               AfficherFileAttente.creerTaches(tasks);
   
           }
   

7. Exécuter pong et vérifier le mon graphe de tâches du frontal

    $ sh gradlew pong
   

   

Vérifier le fichier .json #

1. Le fichier .json du modèle est dans _storage/models/ModeleFileAttente.json

2. Vérifier le contenu de ModeleFileAttente.json

   {
         "_C": "ModeleFileAttente",
         "prochainIdRendezVous": 1,
         "rendezVousDansOrdre": []
       }
   

Ajouter des données au fichier .json #

1. Ouvrir le fichier ModeleFileAttente.json

2. Ajouter à la main des rendez-vous

   {
         "_C": "ModeleFileAttente",
         "prochainIdRendezVous": 3,
         "rendezVousDansOrdre": [
           {
             "_C": "RendezVous",
             "idRendezVous": "1",
             "premierJoueur": {
               "_C": "Joueur",
               "id": "ZQ6B",
               "nom": "Lagrois",
               "prenom": "Dominic"
             }
           },
           {
             "_C": "RendezVousComplet",
             "idRendezVous": "2",
             "premierJoueur": {
               "_C": "Joueur",
               "id": "UWmq",
               "nom": "Abdenouri",
               "prenom": "Mehdi"
             },
             "deuxiemeJoueur": {
               "_C": "Joueur",
               "id": "NrPs",
               "nom": "Gonzales",
               "prenom": "Chaaya"
             }
           }
         ]
       }
   

   • RAPPEL: par héritage, une RendezVousComplet a aussi les attributs d’un RendezVous

3. Ré-exécuter pong

    $ sh gradlew pong
   

4. Fermer la fenêtre afin de générer ModeleFileAttente.png

5. Observer que le modèle pour la file d’attente contient maitenant trois objets: