Tutoriel 4: créer la VuePartie #

Créer la classe VuePartie #

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

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

   public class VuePartie extends ViewFx {
   

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

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

   • NOTES:
     • la méthode initialize est requise par Ntro
     • on va s’en servir pour vérifier que les références aux contrôles de la vue sont bien initialisés

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

Télécharger tux.png #

1. Télécharger tux.png et placer le fichier dans le répertoire pong/src/main/resources/images/

Créer le fichier partie.fxml #

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

2. Ajouter le code suivant dans au 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.VuePartie" 
       styleClass="conteneur"
       id="vue-partie">
   
       <Pane styleClass="petit-espace-vertical"/>
   
       <HBox VBox.vgrow="ALWAYS" styleClass="conteneur">
   
           <Pane styleClass="petit-espace-horizontal"/>
   
           <ImageView>    
               <image>
                   <Image url="@/images/tux.png" />
               </image>
           </ImageView>
   
           <Pane styleClass="petit-espace-horizontal"/>
   
       </HBox>
   
       <Pane styleClass="petit-espace-vertical"/>
   
       <HBox styleClass="conteneur">
   
           <Pane HBox.hgrow="ALWAYS" styleClass="grand-espace-horizontal"/>
   
           <Button 
               fx:id="boutonQuitterPartie" 
               text="%quitterPartie"
               styleClass="gros-bouton"
               id="bouton-quitter-partie">
           </Button>
   
           <Pane  HBox.hgrow="ALWAYS" styleClass="grand-espace-horizontal"/>
   
       </HBox>
   
       <Pane styleClass="petit-espace-vertical"/>
   
   </VBox>
   

3. S’assurer que fx:controller déclare bien le nom complet de la classe VuePartie

   • pong.frontal.vues.VuePartie

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

Ajouter le CSS et les traductions #

1. Dans dev.css, ajouter la règle suivante:

   #vue-partie {
       -fx-border-color:darkgreen;
   }
   

2. Dans dev.css et prod.css, ajouter les règles suivantes

   #vue-partie {
       -fx-border-color:darkgreen;
   }
   
   .petit-espace-horizontal {
       -fx-min-width:1em;
       -fx-max-width:2em;
   }
   
   .grand-espace-horizontal {
       -fx-min-width:2em;
       -fx-max-width:10em;
   }
   
   .mini-espace-vertical {
       -fx-min-height:1em;
       -fx-max-height:2em;
   }
   
   .petit-espace-vertical {
       -fx-min-height:3em;
       -fx-max-height:10em;
   }
   
   .grand-espace-vertical {
       -fx-min-height:3em;
       -fx-max-height:20em;
   }
   
   

3. Dans fr.properties, ajouter le texte pour quitterPartie

   quitterPartie=Quitter partie
   

4. Dans en.properties, ajouter le texte pour quitterPartie

   quitterPartie=Quit Game
   

Déclarer la Vue dans le Frontal #

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

   public class FrontalPong implements FrontendFx {
   
       @Override
       public void registerViews(ViewRegistrarFx registrar) {
   
           // ...
   
           registrar.registerView(VuePartie.class, "/vues/partie.fxml");
   
       }
   }
   

Ajouter la tâche pour créer la Vue #

1. Dans CreerVues.java, ajouter la tâche suivante

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