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

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.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 #

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 #