ntro.ca

        • Contrats de classe
        • Liens utiles
        • Calendrier
        • Calendrier groupe 2
        • Calendrier groupes 1, 3
        • Structure du cours
        • Évaluations
        • Matériel à se procurer
        • Les profs
          • Marc-Olivier Tremblay
          • Mathieu Bergeron
        • Module 1.1: installation + trier des cartes
        • Module 1.2: rappels POO
        • Module 1.3: tableau d'objets
        • Examen 1
        • Module 2.1: données JSON
        • Module 2.2: données en Java
        • Module 2.3: récursivité
        • Examen 2
        • Module 3.1: structure générique
        • Module 3.2: efficacité (1)
        • Module 3.3: efficacité (2)
        • Examen 3
        • Module 4.1: liste naïve
        • Module 4.2: liste par tableau
        • Module 4.3: liste chaînée
        • Examen 4
        • Module 5.1: mappage naïf
        • Module 5.2: mappage par hachage
        • Module 5.3: mappage par arbre
        • Examen 5
        • Équipes
          • Horaire groupe 1
          • Horaire groupe 2
          • Horaire groupe 3
          • Groupe 1
          • Groupe 2
          • Groupe 3
        • Projets vedettes 2022
        • Projets vedettes 2023
        • Projets vedettes 2024
        • Projets vedettes 2025
        • Survol
        • Structure
        • Calendrier
        • Calendrier des séances
        • Évaluations
        • Exemples de jeu
        • Exemples de pages
        • Réponses à vos questions
        • Module 1: créer le projet
        • Module 2: concevoir l'application
        • Module 3: vues NtroFx
        • Module 4: modèle et navigation
        • Module 5: ajouter le dorsal, modifier le modèle
        • Module 7: améliorer l'affichage
        • Module 8: jeu en 2d
        • Module 9: client/serveur
        • Module 10: plusieurs instances du même modèle
        • TP1
        • Examen 1
        • TP2
        • Examen 2
        • Projet de fin de session
        • Calendrier
        • Structure du cours
        • Évaluations
        • Contrat de classe
        • Le prof
        • 01: Windows et Word
          • Astuces et raccourcis
        • 02: Word
        • 03: Word
          • Exercice Word: insertion d'éléments spéciaux
          • Exercice Word: tableaux
        • 04: Word
          • Exercice Word: références
          • TP01: Word (15%)
        • 05: PowerPoint
          • TP02: PowerPoint (10%)
        • 06: Examen Word (20%)
        • 07: Excel
        • 08: Excel
        • 09: Excel
          • TP03: Excel (15%)
        • 10: Excel
        • 11: Examen Excel (20%)
        • 12: Access
        • 13: Access
        • 14: Access
        • 15: Examen Access
      • Sondage H2023 (dept. info)
      • Vision H2023 (dept. info)
      • P1) exercices interactifs de lecture
      • P2) transition Excel vers Python
        • Atelier 2: un exemple
      • Jquery
      • Jquery Ui
      • Point de vue sur l'IA
    Fragments
    • Tutoriel: créer FragmentRendezVous et FragmentRendezVousComplet
      • Créer les fichiers .fxml
      • Ajouter le CSS
      • Ajouter les traductions
      • Créer les classes
      • Déclarer les fragments

    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");
          }
      
    Creative Commons License Creative Commons Attribution Creative Commons ShareAlike
    • Tutoriel: créer FragmentRendezVous et FragmentRendezVousComplet
      • Créer les fichiers .fxml
      • Ajouter le CSS
      • Ajouter les traductions
      • Créer les classes
      • Déclarer les fragments