Tutoriel 3.2: installer la VueFileAttente #

Créer la classe VueFileAttente #

1. Dans le paquet vues, créer la classe VueFileAttente

2. Ajuster la signature de la classe, qui doit hériter de ViewFx

   public class VueFileAttente extends ViewFx {
   

3. Avec Ctrl+.Eclipse: Ctrl+1, ajouter les import et la méthode obligatoire

   public class VueFileAttente extends ViewFx {
   
       @Override
       public void initialize() {
   
       }
   }
   

   • NOTES:
     • la méthode initialize est requise
     • on va s’en servir au module 4

4. S’assurer d’avoir l’arborescence suivante

Créer le fichier .xml #

1. Dans le répertoire pong/src/main/resources/vues, créer le fichier file_attente.xml

2. Pour commencer, ajouter le code suivant dans ce fichier:

   <?xml version="1.0" encoding="UTF-8"?>
   
   <?import javafx.scene.layout.*?>
   <?import javafx.scene.control.*?>
   <?import javafx.scene.image.*?>
   
   <VBox xmlns:fx="http://javafx.com/fxml"
       fx:controller="pong.frontal.vues.VueFileAttente">
   
       <ImageView>    
           <image>
               <Image url="@/images/logo.png" />
           </image>
       </ImageView>
   
       <Button text="Débuter partie">
       </Button>
   
   </VBox>
   

   • NOTES:
     • l’attribut fx:controller déclare notre classe VueFileAttente
     • on a une image et un bouton dans un VBox:
       • l’image devrait être au dessus et le bouton en bas

3. Télécharger logo.png et je copie le fichier dans pong/src/main/resources/images

4. S’assurer d’avoir l’arborescence suivante

Déclarer la Vue dans le Frontal #

1. Ouvrir FrontalPong.java et déclarer la VueFileAttente

   public class FrontalPong implements FrontendFx {
   
       // ...
   
       @Override
       public void registerViews(ViewRegistrarFx registrar) {
   
           // ...
   
           registrar.registerView(VueFileAttente.class, "/vues/file_attente.xml");
   
       }
   
       // ...
   }
   

Créer la méthode VueRacine.afficherSousVue #

1. Dans la VueRacine on a besoin d’une métode pour afficher une page (une sous-vue)

2. Ouvrir VueRacine.java et ajouter cette méthode

   public class VueRacine extends ViewFx {
   
       // ...
   
   	public void afficherSousVue(ViewFx sousVue) {
   
   		Pane racineSousVue = sousVue.rootNode();
   
   		rootNode().getChildren().clear();
   		rootNode().getChildren().add(racineSousVue);
   	}
   
   	// ...
   
   }
   

   • NOTE:
     • on fait clear() pour retirer une page serait déjà affichée
     • le résultat est qu’on affiche une page à la fois
     • (à adapter selon vos besoins pour votre jeu)

Créer les tâches pour charger la Vue #

1. Dans CreerVues, ajouter la tâche suivante

   public class CreerVues {
   
       public static void creerTaches(FrontendTasks tasks) {
   
           tasks.taskGroup("CreerVues")
   
                .waitsFor("ViewLoaders")
   
                .contains(subTasks -> {
   
                   creerVueRacine(subTasks);
   
                   // ajouter
                   creerVueFileAttente(subTasks);
   
                });
       }
   
       // ajouter
       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;
                });
       }
   

   • Utiliser Ctrl+.Eclipse: Ctrl+1 pour ajouter les import requis

2. Dans PremierAffichage, ajouter les tâches suivantes

   public class PremierAffichage {
   
       public static void creerTaches(FrontendTasks tasks) {
   
           tasks.taskGroup("PremierAffichage")
   
                .waitsFor("CreerVues")                    
   
                .contains(subTasks -> {
   
                   installerVueRacine(subTasks);
   
                   afficherFenetre(subTasks);
   
                   // ajouter
                   choisirPremiereVue(subTasks);
   
                });
       }
   
   
       // ajouter
       private static void choisirPremiereVue(FrontendTasks subTasks) {
   
           subTasks.task("choisirPremiereVue")
   
                 .waitsFor(created(VueRacine.class))
   
                 .waitsFor(created(VueFileAttente.class))
   
                 .executes(inputs -> {
   
                     VueRacine      vueRacine      = inputs.get(created(VueRacine.class));
                     VueFileAttente vueFileAttente = inputs.get(created(VueFileAttente.class));
   
                     vueRacine.afficherSousVue(vueFileAttente);
   
                 });
       }
   

Vérifier que la Vue s’affiche et vérifier le graphe des tâches #

1. Exécuter pong

   $ sh gradlew pong
   

2. Vérifier que la VueFileAttente s’affiche

   

3. Fermer la fenêtre Pong (pour générer le graphe des tâches)

4. Vérifier le graphe des tâches pong/_storage/graphs/frontend.png