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;
                       });
           }