Tutoriel 4: modifications #

Renommage des vues #

VueA #

1. Avec F2, renommer la classe suivante:

   • VueA => VueFileAttente

2. Dans le fichier vue_a.fxml, modifier le nom du contrôleur

   • depart.frontal.vues.VueA => pong.frontal.vues.VueFileAttente

VueB #

1. Avec F2, renommer la classe suivante:

   • VueB => VuePartie

2. Dans le fichier vue_b.fxml, modifier le nom du contrôleur

   • depart.frontal.vues.VueB => pong.frontal.vues.VuePartie

VueRacine #

1. Dans le fichier racine.fxml, modifier le nom du contrôleur

   • depart.frontal.vues.VueB => pong.frontal.vues.VueRacine

Renommage des fichiers .fxml #

1. Avec F2, renommer les fichiers suivants

   • vue_a.fxml => file_attente.fxml

   • vue_b.fxml => partie.fxml

2. Dans FrontalPong, ajuster les déclarations des vues:

   registrar.registerView(VueFileAttente.class, "/vues/file_attente.fxml");
   registrar.registerView(VuePartie.class, "/vues/partie.fxml");
   

Vérifier que pong04 s’exécute #

1. Dans un GitBash à la racine du dépôt Git

   $ sh gradlew pong04
   

   

Renommage des événements #

1. Avec F2, renommer la classe

   • EvtA => EvtAfficherVueFileAttente

2. Avec F2, renommer la classe

   • EvtB => EvtAfficherVuePartie

Renommage du modèle #

1. Avec F2, renommer la classe

   • ModeleA => ModeleFileAttente

2. Avec F2, renommer la classe

   • ValeurA => PartieEnFile

Renommage du groupe TachesA #

1. Avec F2, renommer la classe

   • TachesA => CreerVues

2. Modifier le nom du groupe de tâche

   • "TachesA" => "CreerVues"

Tâche creerVueFileAttente #

1. Avec F2, renommer la méthode

   • tacheA1 => creerVueFileAttente

2. Avec F2, renommer les variables

   • objA => viewLoader
   • objB => vueFileAttente

3. Utiliser Ctrl+. pour remplacer chaque var par les bons types

   • ViewLoader<VueFileAttente>
   • VueFileAttente

Tâche creerVueRacine #

1. Avec F2, renommer la méthode

   • tacheA2 => creerVueRacine

2. Avec F2, renommer les variables

   • objC => viewLoader
   • objD => vueRacine

3. Utiliser Ctrl+. pour remplacer chaque var par les bons types

   • ViewLoader<VueRacine>
   • VueRacine

Tâche creerVuePartie #

1. Avec F2, renommer la méthode

   • tacheA3 => creerVuePartie

2. Avec F2, renommer les variables

   • objE => viewLoader
   • objF => vuePartie

3. Utiliser Ctrl+. pour remplacer chaque var par les bons types

   • ViewLoader<VuePartie>
   • VuePartie

Formater le code de CreerVue proprement #

Par exemples:

private static void creerVueFileAttente(FrontendTasks subTasks) {

    subTasks.task(create(VueFileAttente.class))

         .waitsFor(viewLoader(VueFileAttente.class))

         .executesAndReturnsValue(inputs -> {
             
             ViewLoader<VueFileAttente> viewLoader = inputs.get(viewLoader(VueFileAttente.class));

             VueFileAttente vueFileAttente = viewLoader.createView();

             return vueFileAttente;
         });
}

Renommage du groupe TachesB #

1. Avec F2, renommer la classe

   • TachesB => PremierAffichage

2. Modifier le nom du groupe de tâche

   • "TachesB" => "PremierAffichage"

3. Modifier le waitsFor("TachesA")

   • "TachesA" => "CreerVues"

Tâche tacheB1 => installerVueFileAttente #

1. Avec F2, renommer la méthode

   • tacheB1 => installerVueRacine

2. Modifier le nom de la tâche

   • "tacheB1" => "installerVueRacine"

3. Avec F2, renommer les variables

   • objA => vueRacine
   • objB => window

4. Utiliser Ctrl+. pour remplacer chaque var par les bons types

   • VueRacine
   • Window

Tâche tacheB2 => afficherFenetre #

1. Avec F2, renommer la méthode

   • tacheB2 => afficherFenetre

2. Modifier le nom de la tâche

   • "tacheB2" => "afficherFenetre"

3. Avec F2, renommer les variables

   • objC => window

4. Utiliser Ctrl+. pour remplacer chaque var par les bons types

   • Window

Tâche tacheB3 => naviguerVersPremiereVue #

1. Avec F2, renommer la méthode

   • tacheB3 => naviguerVersPremiereVue

2. Modifier le nom de la tâche

   • "tacheB3" => "naviguerVersPremiereVue"

Formater le code de PremierAffichage proprement #

Par exemple:

private static void installerVueRacine(FrontendTasks subTasks) {

    subTasks.task("installerVueRacine")
    
            .waitsFor(window())
          
            .waitsFor(created(VueRacine.class))

            .executes(inputs -> {
              
              VueRacine vueRacine  = inputs.get(created(VueRacine.class));
              Window window        = inputs.get(window());

              window.installRootView(vueRacine);
          });
}

Renommage du groupe TachesC #

1. Avec F2, renommer la classe

   • TachesC => Navigation

2. Modifier le nom du groupe de tâche

   • "TachesC" => "Navigation"

3. Modifier le waitsFor("TachesB")

   • "TachesB" => "PremierAffichage"

Tâche tacheC1 => installerVueFileAttente #

1. Avec F2, renommer la méthode

   • tacheC1 => afficherVueFileAttente

2. Modifier le nom de la tâche

   • "tacheC1" => "installerVueRacine"

3. Avec F2, renommer les variables

   • objA => evtAfficherVueFileAttente
   • objB => vueRacine
   • objC => vueFileAttente

4. Utiliser Ctrl+. pour remplacer chaque var par les bons types

   • EvtAfficherVueFileAttente
   • VueRacine
   • VueFileAttente

Tâche tacheC2 => afficherVuePartie #

1. Avec F2, renommer la méthode

   • tacheC2 => afficherVuePartie

2. Modifier le nom de la tâche

   • "tacheC2" => "afficherVuePartie"

3. Avec F2, renommer les variables

   • objD => evtAfficherVuePartie
   • objE => vueRacine
   • objF => vuePartie

4. Utiliser Ctrl+. pour remplacer chaque var par les bons types

   • EvtAfficherVuePartie
   • VueRacine
   • VuePartie

Formater le code de Navigation proprement #

Par exemple:

private static void afficherVueFileAttente(FrontendTasks tasks) {

    tasks.task("afficherVueFileAttente")

          .waitsFor(event(EvtAfficherVueFileAttente.class))

          .waitsFor(created(VueRacine.class))

          .waitsFor(created(VueFileAttente.class))

          .executes(inputs -> {
              
              EvtAfficherVueFileAttente evtAfficherVueFileAttente = inputs.get(event(EvtAfficherVueFileAttente.class));
              VueRacine                 vueRacine                 = inputs.get(created(VueRacine.class));
              VueFileAttente            vueFileAttente            = inputs.get(created(VueFileAttente.class));
              
              evtAfficherVueFileAttente.methodeA(vueRacine, vueFileAttente);
              
          });
}

Renommage du groupe TachesD #

1. Avec F2, renommer la classe

   • TachesD => GererFileAttente

2. Modifier le nom du groupe de tâche

   • "TachesD" => "GererFileAttente"

3. Modifier le waitsFor("tacheC1")

   • "tacheC1" => "afficherVueFileAttente"

Tâche tacheD1 => observerFileAttente #

1. Avec F2, renommer la méthode

   • tacheD1 => observerFileAttente

2. Modifier le nom de la tâche

   • "tacheD1" => "observerFileAttente"

3. Avec F2, renommer les variables

   • objA => vueFileAttente
   • objB => fileAttente

4. Utiliser Ctrl+. pour remplacer chaque var par les bons types

   • VueFileAttente
   • Modified<ModeleFileAttente>

Formater le code de GererFileAttente proprement #

Par exemple:

private static void observerFileAttente(FrontendTasks tasks) {
    
    tasks.task("observerFileAttente")
    
         .waitsFor(modified(ModeleFileAttente.class))
         
         .waitsFor(created(VueFileAttente.class))

         .executes(inputs -> {
             
             VueFileAttente              vueFileAttente = inputs.get(created(VueFileAttente.class));
             Modified<ModeleFileAttente> fileAttente    = inputs.get(modified(ModeleFileAttente.class));
             
             fileAttente.currentValue().methodeC(vueFileAttente);

         });
}

Vérifier que pong04 s’exécute #

1. Dans un GitBash à la racine du dépôt Git

   $ sh gradlew pong04
   

2. Fermer l’application

3. Ouvrir le graphe de tâches pong04/_storage/graphs/fontend.png, on devrait avoir:

   

4. Ré-ouvrir l’application et vérifier qu’on peut modifier les données

   $ sh gradlew pong04
   
   # ouvrir le fichier pong04/_storage/models/ModeleFileAttente.json
   

Modifier les fichiers .properties #

• fr.properties

  ajouter=Ajouter
  jouer=Jouer
  quitter=Quitter partie
  

• en.properties

  ajouter=Add
  jouer=Play
  quitter=Exit Game
  

Adapter le fichier file_attente.fxml #

1. Ajouter un bouton en dessous du Label

   <!-- ... -->
   
   <Label text="%tmp" />
   
   <Pane styleClass="espacement,petit"/>      <!-- ajouter -->
   
   <Button                                    
       fx:id="boutonJouer"
       text="%jouer" />                       <!-- ajouter -->
   

2. Modifier les fx:id et les %var

   <!-- ... -->
   
   <Button                                    
       text="%ajouter" />                     <!-- modifier -->
   
   <!-- ... -->
   
   <Label                                     
       fx:id="labelFileAttente" />            <!-- modifier -->
   

Adapter la VueFileAttente #

1. Avec F2, renommer les attributs suivants:

   • labelA => lableFileAttente
   • boutonA => boutonJouer

Adapter le fichier partie.fxml #

1. Retirer le Label et modifier le fx:id et le %var du bouton

   <!-- ... -->
   
   <Label
       styleClass="label"
       text="%texteA">
   </Label>                                      <!-- retirer -->
   
   <Pane styleClass="espacement,moyen"/>         <!-- retirer -->
   
   <Button 
       fx:id="boutonQuitter" 
       text="%quitter">
   </Button>                                     <!-- modifier -->
   

Adapter les déclarations dans le frontal #

1. Dans FrontalPong.java, modifier la déclaration de vue_a.fxml => file_attente.fxml

   registrar.registerView(VueFileAttente.class, "/vues/file_attente.fxml");
   

Adapter la VuePartie #

1. Avec F2, renommer l’attribut suivant:

   • boutonA => boutonQuitter

Vérifier que pong04 fonctionne toujours #

1. Dans un GitBash à la racine du dépôt Git

   $ sh gradlew pong04
   

Finalement, implanter ModeleFileAttente « pour vrai » #

1. Modifier ModeleFileAttente selon le document de conception:

   public class ModeleFileAttente implements Model, WatchJson, WriteObjectGraph {
   
       private int  prochainId = 0;
   
       private List<PartieEnFile> parties = new ArrayList<>();
   
       // ...
   

2. Modifier ModeleFileAttente.toString

   public String toString() {
   
       StringBuilder builder = new StringBuilder();
   
       builder.append("prochainId: " + prochainId);
       builder.append(System.lineSeparator());
   
       builder.append("parties: ");
       builder.append(System.lineSeparator());
   
       for(PartieEnFile valeur : parties) {
   
           builder.append("  ");
           builder.append(valeur.toString());
           builder.append(System.lineSeparator());
       }
   
       return builder.toString();
   }
   

3. Modifier PartieEnFile selon le document de conception:

   public class PartieEnFile implements ModelValue {
   
       private String idPartie;
   
       private String idJoueurA;
       private String nomJoueurA;
       private int    scoreJoueurA;
   
       private String idJoueurB;
       private String nomJoueurB;
       private int    scoreJoueurB;
   
       // ...
   

4. Modifier PartieEnFile.toString

   @Override
   public String toString() {
       StringBuilder builder = new StringBuilder();
   
       builder.append(nomJoueurA);
       builder.append(" Vs ");
       if(nomJoueurB == null){
           builder.append("???");
       }else{
           builder.append(nomJoueurB);
       }
   
       builder.append("  ");
       builder.append(scoreJoueurA);
       builder.append("-");
       builder.append(scoreJoueurB);
   
       return builder.toString();
   }
   

Vérifier que pong04 charge le modèle #

1. Dans un GitBash à la racine du dépôt Git

   $ sh gradlew pong04
   

   
   • L’erreur fatale est normale vu que le modèle ne correspond plus au données du .json

2. Ré-exécuter

   $ sh gradlew pong04
   

   
   • La librairie a créé un .json vide

3. Modifier pong04/_storage/models/ModeleFileAttente.json:

   {
     "_C": "ModeleFileAttente",
     "parties": [
       {
         "_C": "PartieEnFile",
         "idPartie": "1",
         "scoreJoueurB": 0,
         "nomJoueurA": "Alice",
         "scoreJoueurA": 0,
         "nomJoueurB": null,
         "idJoueurA": "alice",
         "idJoueurB": null
       },
       {
         "_C": "PartieEnFile",
         "idPartie": "2",
         "scoreJoueurB": 6,
         "nomJoueurA": "Charlie",
         "scoreJoueurA": 12,
         "nomJoueurB": "Bob",
         "idJoueurA": "charlie",
         "idJoueurB": "bob"
       },
       {
         "_C": "PartieEnFile",
         "idPartie": "3",
         "scoreJoueurB": 0,
         "nomJoueurA": "Amina",
         "scoreJoueurA": 0,
         "nomJoueurB": "Gregson",
         "idJoueurA": "amina",
         "idJoueurB": "gregson"
       }
     ],
     "prochainId": 4
   

4. Ré-exécuter

   $ sh gradlew pong04
   

   

Ajouter un fichier prod.css et le déclarer dans FrontalPong.java #

1. Télécharger le fichier prod.css et le copier dans pong04/src/main/resources/style

2. Dans FrontalPong.java, modifier la déclaration du CSS:

   //registrar.registerStylesheet("/style/dev.css");
   registrar.registerStylesheet("/style/prod.css");
   

Vérifier pong04 une dernière fois #

1. Dans un GitBash à la racine du dépôt Git

   $ sh gradlew pong04