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
    Combo Box
    • Tutoriel: ComboBox avec des fragments
      • Objectif
      • Télécharger les images
      • Créer le fragment
      • Modifier VueRacine pour utiliser le fragment dans le ComboBox
      • Charger le fragment
      • Ajouter du CSS
      • Vérifier que ça fonctionne

    Tutoriel: ComboBox avec des fragments #

    Objectif #

    Transformer ça

    en ça

    où le ComboBox contient maintenant des fragments plutôt que du texte

    Télécharger les images #

    1. Télécharger fr.png et en.png et placer les fichiers dans pong/src/main/resources/images

    2. Sources:

      • fr: https://commons.wikimedia.org/wiki/File:Flag_of_Quebec_%28modified_for_visibility%29.svg
      • en: https://commons.wikimedia.org/wiki/File:Flag_of_Canada_(Pantone).svg

    Créer le fragment #

    1. Créer pong/src/main/resources/fragments/une_langue.fxml

      <?xml version="1.0" encoding="UTF-8"?>
      
      <?import javafx.scene.layout.*?>
      <?import javafx.scene.control.*?>
      <?import javafx.scene.image.* ?>
      <?import ca.ntro.app.fx.controls.*?>
      
      <HBox xmlns:fx="http://javafx.com/fxml"
          fx:controller="pong.frontal.fragments.FragmentUneLangue" 
          styleClass="conteneur,fragment-une-langue">
      
          <ResizableImage
              fx:id="imageLangue"
              HBox.hgrow="ALWAYS"
              styleClass="image-langue">
          </ResizableImage>
      
          <Pane fx:id="espace" styleClass="petit-espace-horizontal"/>
      
      	<Label fx:id="labelLangue" styleClass="label-langue" />
      
      </HBox>
      
    2. Creér la classe pong.frontal.fragments.FragmentUneLangue

      public class FragmentUneLangue extends ViewFx {
      
          @FXML
          private Label labelLangue;
      
          @FXML
          private ResizableImage imageLangue;
      
          @FXML
          private Pane espace;
      
          @Override
          public void initialize() {
              Ntro.assertNotNull(labelLangue);
              Ntro.assertNotNull(imageLangue);
          }
      
          public void afficherLangue(String langue) {
              labelLangue.setText(langue);
      
              String cheminImage = "/images/" + langue + ".png";
      
              URL image = FragmentUneLangue.class.getResource(cheminImage);
      
              if(image != null) {
      
                  espace.setVisible(true);
                  imageLangue.setVisible(true);
                  imageLangue.setImage(new Image(cheminImage));
      
              }else {
      
                  espace.setVisible(false);
                  imageLangue.setVisible(false);
              }
          }
      
      }
      
    3. Déclarer le fragment

      public class FrontalPong implements FrontendFx {
      
          // ...
      
          @Override
          public void registerViews(ViewRegistrarFx registrar) {
      
              // ...
      
              registrar.registerFragment(FragmentUneLangue.class, "/fragments/une_langue.fxml");
          }
      
      

    Modifier VueRacine pour utiliser le fragment dans le ComboBox #

    public class VueRacine extends ViewFx {
    
        // ...
    
        // ajouter
        private ViewLoader<FragmentUneLangue> viewLoaderUneLangue;
    
        public void setViewLoaderUneLangue(ViewLoader<FragmentUneLangue> viewLoaderUneLangue) {
            this.viewLoaderUneLangue = viewLoaderUneLangue;
        }
    
        // ajouter
        private class ListCellUneLangue extends ListCell<String> {
    
            @Override
            protected void updateItem(String item, boolean empty) {
                super.updateItem(item, empty);
                
                if(item == null || empty) {
                    
                    setGraphic(null);
                    
                }else {
                    
                    FragmentUneLangue fragmentUneLangue = viewLoaderUneLangue.createView();
                    fragmentUneLangue.afficherLangue(item);
                    setGraphic(fragmentUneLangue.rootNode());
                }
            }
        }
    
        // ...
    
        // modifier
        public void initialiserComboLangues() {
            // ajouter au début de la méthode
            comboLangues.setButtonCell(new ListCellUneLangue());
            comboLangues.setCellFactory(new Callback<ListView<String>, ListCell<String>>() {
                @Override
                public ListCell<String> call(ListView<String> param) {
                    return new ListCellUneLangue();
                }
            });
    
            // ...
        }
    

    Charger le fragment #

    1. Modifier la tâche CreerVues.creerVueRacine
    public class CreerVues {
        
        //...
    
        private static void creerVueRacine(FrontendTasks tasks) {
    
            tasks.task(create(VueRacine.class))
    
                 .waitsFor(viewLoader(VueRacine.class))
    
                 // ajouter
                 .waitsFor(viewLoader(FragmentUneLangue.class))
                 
                 .executesAndReturnsValue(inputs -> {
    
                     ViewLoader<VueRacine>          viewLoader          = inputs.get(viewLoader(VueRacine.class));
    
                     // ajouter
                     ViewLoader<FragmentUneLangue>  viewLoaderUneLangue = inputs.get(viewLoader(FragmentUneLangue.class));
                     
    
                     VueRacine vueRacine = viewLoader.createView();
    
                     // ajouter
                     vueRacine.setViewLoaderUneLangue(viewLoaderUneLangue);
                     
                     // s'assurer d'avoir
                     vueRacine.initialiserComboLangues();
                     
                     return vueRacine;
                 });
        }
    

    Ajouter du CSS #

    1. Dans prod.css et dev.css

      .image-langue {
          -fx-min-width:3em;
          -fx-max-width:3em;
      
          -fx-min-height:2em;
          -fx-max-height:2em;
      }
      
      .fragment-une-langue {
          -fx-background-color:transparent;
      }
      

    Vérifier que ça fonctionne #

    $ sh gradlew pong
    
    Creative Commons License Creative Commons Attribution Creative Commons ShareAlike
    • Tutoriel: ComboBox avec des fragments
      • Objectif
      • Télécharger les images
      • Créer le fragment
      • Modifier VueRacine pour utiliser le fragment dans le ComboBox
      • Charger le fragment
      • Ajouter du CSS
      • Vérifier que ça fonctionne