ntro.ca

        • Contrats de classe
        • Liens utiles
        • Calendrier
        • Calendrier groupe 3
        • Calendrier groupes 1, 2
        • Structure du cours
        • Évaluations
        • Matériel à se procurer
        • Les profs
          • Marc-Olivier Tremblay
          • Mathieu Bergeron
        • Module 1.1: installation + trier des cartes
        • Module 1.2: rappels POO
          • URL dépôt Git à remettre
        • Module 1.3: tableau d'objets
        • Examen 1
        • Validation des ateliers
        • Module 2.1: données JSON
        • Module 2.2: données en Java
        • Module 2.3: récursivité
        • Examen 2
        • Validation des ateliers
        • Module 3.1: structure générique
        • Module 3.2: efficacité (1)
        • Module 3.3: efficacité (2)
        • Examen 3
        • Validation des ateliers
        • Module 4.1: liste naïve
        • Module 4.2: liste par tableau
        • Module 4.3: liste chaînée
        • Examen 4
        • Validation des ateliers
        • Module 5.1: mappage naïf
        • Module 5.2: mappage par hachage
        • Module 5.3: mappage par arbre
        • Examen 5
        • Validation des ateliers
        • Travail de rattrapage
        • Projets vedettes
          • Contrat gr1
          • Contrat gr2
          • Contrat gr3
        • Survol
        • Structure
        • Calendrier semaines
          • Calendrier gr1
          • Calendrier gr2
          • Calendrier gr3
        • Utilisation IA
        • Évaluations
        • Exemples de pages
        • Exemples de jeu
        • Jeux choisis
        • Réponses à vos questions
        • Module 1: créer le projet
        • Module 2: concevoir l'application
        • Module 3: vues NtroFx
        • Module 4: modèle et navigation
        • Module 5: ajouter le dorsal, modifier le modèle
        • Guide de style 4F5
        • TP1
        • Examen 1
        • Examen 2
        • Calendrier
        • Évaluations
        • Structure du cours
        • Contrat de classe
        • Le prof
        • 01: Windows et Word
          • Astuces et raccourcis
        • 02: Word
          • Exercice Word: insertion d'éléments spéciaux
          • Exercice Word: tableaux
        • 03: Word
          • Exercice Word: références
          • TP01: Word (15%)
        • 04: Word
        • 05: PowerPoint
          • TP02: PowerPoint (10%)
        • 06: Examen Word (20%)
        • 07: Excel
        • 08: Excel
        • 09: Excel
          • TP03: Excel (15%)
        • 10: Excel
        • 11: Examen Excel (20%)
        • 12: Access
        • 13: Access
        • 14: Access
        • 15: Examen Access
      • Sondage H2023 (dept. info)
      • Vision H2023 (dept. info)
      • P1) exercices interactifs de lecture
      • P2) transition Excel vers Python
        • Atelier 2: un exemple
      • Index
      • Point de vue sur l'IA
    Tutoriel 5: analyse
    • Tutoriel 5: analyse
      • Comparer le comportement de dep04 et dep05
      • Comparer les graphes de tâches de dep04 et dep05
      • Comparer les fichiers dep04 et dep05
        • Nouveaux fichiers dans dep05
        • Fichiers différents
      • « Tracer » les étapes pour ajouter une valeur au modèle (et l’afficher)

    Tutoriel 5: analyse #

    Comparer le comportement de dep04 et dep05 #

    dep04

    dep05

    $ sh gradlew dep04

    $ sh gradlew dep05

    • Navigation entre deux vues
    • Afficher un modèle en mode texte

    même chose et en plus:

    • Ajouter une valeur au modèle

    Comparer les graphes de tâches de dep04 et dep05 #

    Frontal

    dep04/_storage/graphs/frontend.png

    dep05/_storage/graphs/frontend.png

    • C’est le même graphe pour le Frontal
    • C’est logique vu que dep05 n’ajoute presque rien au frontal

    Dorsal

    dep04

    dep05/_storage/graphs/backend.png

    Aucun dorsal

    • Ajouter une valeur quand on reçoit un MsgA

      • le MsgA contient sûrement les données à ajouter dans la valeur (?)

    Comparer les fichiers dep04 et dep05 #

    • Comparer les répertoires dep04/src et dep05/src avec VSCode:

    Nouveaux fichiers dans dep05 #

    MsgA

    Sûrement le message qui demande au Dorsal d’ajouter une valeur au modèle

    TachesG et DorsalDepart

    La déclaration du Dorsal. Le groupe TachesG contient la tacheG1 qui, probablement, reçoit le MsgA et qui modifie le modèle

    MaquetteDepart

    Classe pour générer des données au hasard (à ajouter au message MsgA?)

    Fichiers différents #

    ModeleA

    On a besoin d’une méthode pour ajouter une valeur à la liste

    ValeurA

    Sûrement pour enregistrer les attributs de la nouvelle valeur (via des setters ou peut-être via le constructeur)

    VueA

    Comportement du bouton qui envoie le message MsgA quand l’usager veut ajouter une valeur

    AppDepart

    Sûrement pour déclarer le Dorsal

    vue_a.fxml

    Ajout du bouton en bas du Label

    « Tracer » les étapes pour ajouter une valeur au modèle (et l’afficher) #

      Étape Pour identifier la prochaine étape
    1

    La VueA est affichée

    • Trouver le fx:id du bouton du bas (celui qui sera cliqué)

    • Inspecter le fichier vue_a.fxml

      <!-- ... -->
      
      <Button 
          fx:id="boutonA"
          text="%texteA">
      </Button>                 <!-- bouton du haut -->
      
      <Pane styleClass="espacement,petit"/>
      
      <Label 
      	fx:id="labelA"/>
      
      <Pane styleClass="espacement,petit"/>
      
      <Button 
          fx:id="boutonB"
          text="%texteB">
      </Button>                <!-- bouton du bas -->
      
    • Le fx:id du bouton cliqué est boutonB

    2 Le bouton du bas est cliqué
    • Dans la VueA, trouver le capteur d’action installé sur le bouton appelé boutonB

    • Inspecter le code de VueA

      public class VueA extends ViewFx {
      
          // ...
      
          @FXML
          private Button boutonB;
      
          @Override
          public void initialize() {
      
              // ...
      
              boutonB.setOnAction(evtFx -> {
      
                  Ntro.newMessage(MsgA.class)
                      .setParamA(MaquetteDepart.chaineAuHasard())
                      .setParamB(MaquetteDepart.entierAuHasard())
                      .send();
      
              });
          }
      
    • Avant d’envoyer le message, on va sauvegarder deux paramètres dans le message:

      • paramA avec la valeur de retour de MaquetteDepart.chaineAuHasard()
      • paramB avec la valeur de retour de MaquetteDepart.entierAuHasard()
    • Le message est ensuite envoyé vers le dorsal avec avec send()

    3 Le message est envoyé
    • Le message va être capté dans une tâche du Dorsal

    • En VSCode, placer le curseur sur MsgA et faire Maj+F12

      • autre option: clic-droit => Atteindre les références
    • La tâche qui capte le message est tacheG1

    4

    La tacheG1 s’exécute

    • Inspecter le code de TachesG.tacheG1

      private static void tacheG1(BackendTasks subTasks) {
      
          subTasks.task("tacheG1")
      
               .waitsFor(model(ModeleA.class))
      
               .waitsFor(message(MsgA.class))
      
               .executes(inputs -> {
      
                   var objA = inputs.get(message(MsgA.class));
                   var objB = inputs.get(model(ModeleA.class));
      
                   objA.methodeA(objB);    
      
               });
      }
      
    • La tâche récupère le message reçu et le modèle, puis

      • appelle la methodeA du message, avec le modèle comme argument
    • En VSCode, placer le curseur sur methodeA et faire F12

      • autre option: clic-droit => Atteindre la définition
    5

    MsgA.methodeA s’exécute

    • Inspecter le code de MsgA.methodeA

      public class MsgA extends Message<MsgA> {
      
          private String paramA;
          private int    paramB;
      
          // ...
      
          public void methodeA(ModeleA objA) {
              objA.methodeA(paramA, paramB);
          }
      
    • Le message mémorise les valeurs de paramA et paramB

    • Quand le message est reçu, la methodeA appelle le modèle, et passe les valeurs de paramA et paramB

    • En VSCode, placer le curseur sur le methodeA de obj.methodeA et faire F12

      • autre option: clic-droit => Atteindre la définition
    6

    ModeleA.methodA s’exécute

    • Inspecter le code de ModeleA.methodeA

      public class ModeleA implements Model, WatchJson, WriteObjectGraph {
      
          // ...
      
          private List<ValeurA> valeurs = new ArrayList<>();
      
          // ...
      
          public void methodeA(String paramA, int paramB) {
      
              valeurs.add(new ValeurA(paramA, paramB));
          }
      
    • La méthode construit une nouvelle valeur avec les paramètres reçu, puis ajoute cette valeur dans la liste

    7

    Le ModeleA est modifié

    • Si une tâche avec .waitsFor(modified(ModeleA) existe, elle sera exécutée

    • En VSCode, faire Ctrl+Maj+F pour chercher dans les fichiers

      • chercher pour modified(ModeleA
    • On voit que ça existe dans TachesD (attention d’ouvrir le TachesD du projet dep05):

    8

    La tacheD1 s’exécute

    • Inspecter le code de la tacheD1

      private static void tacheD1(FrontendTasks tasks) {
      
          tasks.task("tacheD1")
      
               .waitsFor(modified(ModeleA.class))
      
               .waitsFor(created(VueA.class))
      
               .executes(inputs -> {
      
                   var objA = inputs.get(created(VueA.class));
                   var objB = inputs.get(modified(ModeleA.class));
      
                   objB.currentValue().methodeC(objA);
      
               });
      }
      
    • On a déjà vu cette tâche au tutoriel 4, c’est la tâche qui affiche le modèle en mode texte dans la VueA

    Creative Commons License Creative Commons Attribution Creative Commons ShareAlike
    • Tutoriel 5: analyse
      • Comparer le comportement de dep04 et dep05
      • Comparer les graphes de tâches de dep04 et dep05
      • Comparer les fichiers dep04 et dep05
        • Nouveaux fichiers dans dep05
        • Fichiers différents
      • « Tracer » les étapes pour ajouter une valeur au modèle (et l’afficher)