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 #

Télécharger fr.png et en.png et placer les fichiers dans pong/src/main/resources/images
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 #

Créer pong/src/main/resources/fragments/une_langue.xml

<?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>

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

    }

Déclarer le fragment

public class FrontalPong implements FrontendFx {

        // ...

        @Override
        public void registerViews(ViewRegistrarFx registrar) {

            // ...

            registrar.registerFragment(FragmentUneLangue.class, "/fragments/une_langue.xml");
        }

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 #

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 #

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

Tutoriel: ComboBox avec des fragments #