Tutoriel: créer FragmentRendezVous et FragmentRendezVousComplet #

Créer les fichiers .fxml #

1. Dans le répertoires pong/src/main/resources/fragments, créer les fichiers

   • rendez_vous.fxml
   • rendez_vous_complet.fxml

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

   

3. Ouvrir rendez_vous.fxml ajouter le code suivant:

   <?xml version="1.0" encoding="UTF-8"?>
   
   <?import javafx.scene.layout.*?>
   <?import javafx.scene.control.*?>
   <?import javafx.scene.control.*?>
   
   <VBox xmlns:fx="http://javafx.com/fxml"
       fx:controller="pong.frontal.fragments.FragmentRendezVous" 
       styleClass="conteneur,vue-rendez-vous">
       <HBox>
           <Pane styleClass="grand-espace-horizontal"/>
           <HBox styleClass="conteneur,rendez-vous" fx:id="horizontalOuVertical">
               <Button 
                   fx:id="boutonDebuterPartie" 
                   text="%joindrePartie"
                   styleClass="gros-bouton">
               </Button>
               <Pane minHeight="20" minWidth="20"/>
               <Label
                   fx:id="labelNomPremierJoueur"
                   styleClass="gros-texte">
               </Label>
               <Pane minHeight="20" minWidth="20"/>
               <Button 
                   fx:id="boutonRetirerRendezVous" 
                   text="%retirerRendezVous"
                   styleClass="gros-bouton,bouton-rouge">
               </Button>
           </HBox>
           <Pane styleClass="grand-espace-horizontal"/>
       </HBox>
       <Pane styleClass="petit-espace-vertical"/>
   </VBox>
   

4. Ouvrir rendez_vous_complet.fxml et ajouter le code suivant:

   <?xml version="1.0" encoding="UTF-8"?>
   
   <?import javafx.scene.layout.*?>
   <?import javafx.scene.control.*?>
   
   <VBox xmlns:fx="http://javafx.com/fxml"
       fx:controller="pong.frontal.fragments.FragmentRendezVousComplet" 
       styleClass="conteneur,vue-rendez-vous">
       <HBox>
           <Pane styleClass="grand-espace-horizontal"/>
           <HBox styleClass="conteneur,rendez-vous">
               <Button 
                   fx:id="boutonDebuterPartie" 
                   text="%debuterPartie"
                   styleClass="gros-bouton">
               </Button>
               <Pane minHeight="20" minWidth="20"/>
               <HBox alignment="CENTER_LEFT">
                   <Label
                       fx:id="labelNomPremierJoueur"
                       styleClass="gros-texte">
                   </Label>
                   <Pane minWidth="20" minHeight="20"/>
                   <Label
                       text="Vs"
                       styleClass="gros-texte">
                   </Label>
                   <Pane minWidth="20" minHeight="20"/>
                   <Label
                       fx:id="labelNomDeuxiemeJoueur"
                       styleClass="gros-texte">
                   </Label>
               </HBox>
               <Pane minWidth="20" minHeight="20"/>
               <Button 
                   fx:id="boutonRetirerRendezVous" 
                   text="%retirerRendezVous"
                   styleClass="gros-bouton,bouton-rouge">
               </Button>
           </HBox>
           <Pane styleClass="grand-espace-horizontal"/>
       </HBox>
       <Pane styleClass="petit-espace-vertical"/>
   </VBox>
   

   • NOTES:
     • il n’y a pas de notion d’héritage pour le .fxml
     • on doit alors recopier des portions de rendez_vous

Ajouter le CSS #

1. Ajouter le CSS suivant à dev.css et prod.css

   .bouton-rouge {
       -fx-background-color: 
           linear-gradient(from 90% 100% to 0% 100%, #b72353 0%, #9f2836 100%),
           #a83145,
           #ea5c63,
           radial-gradient(center 50% 50%, radius 100%, #ea5c62, #d33a54);
   }
   
   .rendez-vous {
      -fx-padding: 8 15 15 15;
      -fx-background-color: derive(black, 75%);
      -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.75) , 4,0,0,1 );
      -fx-background-insets: 0,0 0 5 0, 0 0 6 0, 0 0 7 0;
      -fx-background-radius: 8;
   }
   
   .gros-texte{
      -fx-text-fill: derive(black, 25%);
      -fx-font-size:3em;
   }
   
   

Ajouter les traductions #

1. Dans fr.properties, ajouter

   joindrePartie=Joindre partie
   retirerRendezVous=✗
   

2. Dans en.properties, ajouter

   joindrePartie=Join Game
   retirerRendezVous=✗
   

Créer les classes #

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

2. Dans fragments, créer les classes:

   • FragmentRendezVous
   • FragmentRendezVousComplet

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

   

4. Ouvrir FragmentRendezVous et ajouter ce code

   public class FragmentRendezVous extends ViewFx {
   
       @FXML
       private Button boutonDebuterPartie;
   
       @FXML
       private Button boutonRetirerRendezVous;
   
       @FXML
       private Label labelNomPremierJoueur;
   
       protected Button getBoutonOuvrirPartie() {
           return boutonDebuterPartie;
       }
   
       @Override
       public void initialize() {
           Ntro.assertNotNull(boutonDebuterPartie);
           Ntro.assertNotNull(boutonRetirerRendezVous);
           Ntro.assertNotNull(labelNomPremierJoueur);
   
       }
   
   }
   

5. Ouvrir FragmentRendezVousComplet et ajouter ce code

   public class FragmentRendezVousComplet extends FragmentRendezVous {
   
       @FXML
       private Label labelNomDeuxiemeJoueur;
   
       @Override
       public void initialize() {
           super.initialize();
   
           Ntro.assertNotNull(labelNomDeuxiemeJoueur);
       }
   
   }
   

   • NOTES:
     • ici on peut utiliser l’héritage pour réutiliser FragmentRendezVous

Déclarer les fragments #

1. Dans FrontalPong, déclarer les fragments comme des vues

   public class FrontalPong implements FrontendFx {
   
       // ...
   
   
       @Override
       public void registerViews(ViewRegistrarFx registrar) {
   
           // ...
   
           registrar.registerFragment(FragmentRendezVous.class, "/fragments/rendez_vous.fxml");
           registrar.registerFragment(FragmentRendezVousComplet.class, "/fragments/rendez_vous_complet.fxml");
       }