Tutoriel 3.1: créer et installer la VueRacine #

Créer la classe VueRacine #

1. En VSCode, créer le paquet pong.frontal.vues

2. Dans le paquet vues, créer la classe VueRacine

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

   public class VueRacine extends ViewFx {
   

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

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

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

5. 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 racine.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.*?>
   
   <StackPane xmlns:fx="http://javafx.com/fxml" 
       fx:controller="pong.frontal.vues.VueRacine">
   
       <Label text="[TMP] VueRacine"/>
   
   </StackPane>
   

   • NOTES:
     • l’attribut fx:controller déclare notre classe VueRacine
     • JavaFx utilise le terme controller, mais en Ntro on dirait Vue

3. S’assurer d’avoir l’arborescence suivante:

Déclarer la Vue dans le Frontal #

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

   public class FrontalPong implements FrontendFx {
   
       // [...]
   
       @Override
       public void registerViews(ViewRegistrarFx registrar) {
   
           registrar.registerView(VueRacine.class, "/vues/racine.xml");
   
       }
   
       // [...]
   }
   

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

1. Dans le paquet taches, créer la classe CreerVues

2. S’assurer d’avoir l’arborescence suivante:

   

3. Dans le FrontalPong, ajouter un appel à CreerVues.creerTaches(task)

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

4. Utiliser Ctrl+.Eclipse: Ctrl+1 pour créer la méthode CreerVues.creerTaches(tasks)

5. Dans CreerVues, ajouter le import static pour les tâches:

1. Dans CreerVues, créer les tâches suivantes:

   public class CreerVues {
   
       public static void creerTaches(FrontendTasks tasks) {
   
           tasks.taskGroup("CreerVues")
   
                .waitsFor("ViewLoaders")
   
                .contains(subTasks -> {
   
                   creerVueRacine(subTasks);
   
                });
       }
   
       private static void creerVueRacine(FrontendTasks subTasks) {
   
           subTasks.task(create(VueRacine.class))
   
                   .waitsFor(viewLoader(VueRacine.class))
   
                   .executesAndReturnsValue(inputs -> {
   
                       ViewLoader<VueRacine> viewLoader = inputs.get(viewLoader(VueRacine.class));
   
                       VueRacine vueRacine = viewLoader.createView();
   
                       return vueRacine;
                });
       }
   
   }
   

2. Dans la classe PremierAffichage, ajouter la dépendance au groupe de tâche "CreerVues"

       public static void creerTaches(FrontendTasks tasks) {
   
           tasks.taskGroup("PremierAffichage")
   
                // ajouter
                .waitsFor("CreerVues")                    
   
                .contains(subTasks -> {
   
                    // ...
   
                });
       }
   

3. Dans la classe PremierAffichage, ajouter la tâche suivante

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

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 VueRacine 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