Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JSF Java Discussion :

PrimeFaces : Menu déroulant avec images


Sujet :

JSF Java

  1. #1
    Membre habitué
    PrimeFaces : Menu déroulant avec images
    Bonjour,
    J'utilise le framework PrimeFaces dans une application web.
    Je souhaite mettre en place un menu déroulant avec une liste de String et faire précéder certains d'une image ou picto.
    J'essaye d'adapter mon cas avec le showcase de PrimeFaces mais sans succès.
    J'ai cherché également sur le web mais je ne trouve pas d'exemple avec images ou pictos.
    Merci pour votre aide.

  2. #2
    Membre chevronné
    Salut,
    peux-tu nous montrer ou ca coince ?

    Eric

  3. #3
    Membre habitué
    Voici mon code. Je n'ai pas d'images.

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <p:selectOneMenu var="menu" value="#{utilitaireManagerBean.filtreLibelleColonne}">
              <f:selectItem itemLabel="Sélectionnez..."/>
              <f:selectItems var="menuItem" value="#{utilitaireManagerBean.filtreListeColonne}" itemLabel="#{menuItem}" itemValue="#{menuItem}"/> 
              <p:column>
                     <p:graphicImage value="images/Filtrer.png"/>
              </p:column>
              <p:column>
                     <h:outputText value="#{menu}"/>
              </p:column>
    </p:selectOneMenu>

  4. #4
    Membre expérimenté
    Je n'ai pas encore utilisé le composant p:graphicImage, mais j'ai l'impression qu'il est destiné à des rendus dynamiques. Est-ce que le h:graphicImage ne fonctionnerait pas mieux ?

  5. #5
    Membre habitué
    Même chose avec h:graphicImage

  6. #6
    Membre expérimenté
    Est-ce que dans le source de la page générée il n'y a rien qui corresponde à l'image souhaitée ? Dans le showcase Primefaces, les styles ne sont-ils pas nécessaires pour un bon affichage ? Le "width:10%" pour la colonne contenant l'image, par exemple.

    Peux-tu montrer le source html généré pour ce composant ?

  7. #7
    Membre habitué
    J'ai ajouté le style suivant mais sans succès :

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    <p:column style="width:10%">
        <p:graphicImage value="images/Filtrer.png"/>
    </p:column>


    Voici le code généré :


  8. #8
    Modérateur

    Tu cherches à avoir ce genre de rendu ?

    Si oui, j'utilise des classes de style, voici le code associé
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
            .icon-none{
                padding-left:20px;
            }
            .icon-1{
                padding-left:20px;
                background-image: url("/showcase/resources/images/pref1.gif");
                background-repeat: no-repeat;
            }
            .icon-2{
                padding-left:20px;
                background-image: url("/showcase/resources/images/pref2.gif");
                background-repeat: no-repeat;
            }

    Le composant
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
                <p:selectOneMenu>
                    <f:selectItem itemValue="1" itemLabel="#{msg.item1}" itemEscaped="false"/>
                    <f:selectItem itemValue="2" itemLabel="#{msg.item2}" itemEscaped="false"/>
                    <f:selectItem itemValue="3" itemLabel="#{msg.item3}" itemEscaped="false"/>
                </p:selectOneMenu>

    Les définitions de messages
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    item1=<span class="icon-none">Libellé item 1</span>
    item2=<span class="icon-1">Libellé item 2</span> 
    item3=<span class="icon-2">Libellé item 3</span>
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  9. #9
    Membre habitué
    C'est bien ce que je souhaite et ça marche très bien.
    Juste un soucis au chargement de la page ou si je sélectionne une ligne : c'est la valeur renvoyée du bean qui est affichée :


  10. #10
    Modérateur

    Tu veux dire la valeur renvoyée par itemLabel="#{menuItem}" ?
    Si menuItem représente un objet à toi (pas String), tu peux ajouter une méthode qui te formatera la valeur comme il faut, ensuite, tu références cette méthode par #{menuItem.maFonction()}
    Sinon, le mieux, c'est de te faire un objet perso...
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  11. #11
    Membre habitué
    J'ai finalement opté pour un objet perso.
    Ça marche bien mais je dois avoir la poisse, car maintenant je n'arrive pas à récupérer la valeur choisie coté serveur !!!
    Si quelqu'un a une idée...
    Merci.

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
     
                                            <p:selectOneMenu value="#{utilitaireManagerBean.colonne}" var="menu">
                                                <f:selectItem itemLabel="Select One" itemValue="" />
                                                <f:selectItems value="#{utilitaireManagerBean.liste}" var="menuItem" itemLabel="#{menuItem.libelle}" itemValue="#{menuItem}"/>
                                                <p:column>
                                                    <p:graphicImage value="#{menu.picto}"/>
                                                </p:column>
                                                <p:column>
                                                    <h:outputText value="#{menu.libelle}"/>
                                                </p:column>
                                                <p:ajax event="change" 
                                                        listener="#{utilitaireManagerBean.filtrerColonne()}"  <---------- KO : méthode non exécutée !!!
                                                        oncomplete="PF('widgetFiltreColonne').show()"         <---------- Ok
                                                        update="form:idFiltreColonne"/>                       <---------- Ok
                                            </p:selectOneMenu>

  12. #12
    Modérateur

    2 choses :
    - pourquoi les <p:column> ?
    - quelle est la structure de ton objet perso ?
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  13. #13
    Membre habitué
    J'utilise des p:column comme dans le showcase de primefaces, sinon rien ne s'affiche.

    Voici l'objet perso :

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    package model;
     
    import java.io.Serializable;
     
    public class ModeleColonneFiltre implements Serializable {
     
        private String libelle;
        private String picto;
     
        public ModeleColonneFiltre() {
        }
     
        public ModeleColonneFiltre(String libelle, String picto) {
            this.libelle = libelle;
            this.picto = picto;
        }
     
        /**
         * @return the libelle
         */
        public String getLibelle() {
            return libelle;
        }
     
        /**
         * @param libelle the libelle to set
         */
        public void setLibelle(String libelle) {
            this.libelle = libelle;
        }
     
        /**
         * @return the picto
         */
        public String getPicto() {
            return picto;
        }
     
        /**
         * @param picto the picto to set
         */
        public void setPicto(String picto) {
            this.picto = picto;
        }
    }

  14. #14
    Modérateur

    Je suppose que picto représente l'URL de ton image, libelle est la valeur que tu veux récupérer, c'est bien ça ?

    Pour "picto", la liste de tes images est fixe où il est possible d'en rajouter dynamiquement ?
    Si la liste est fixe, je te conseille de passer par des classes de style comme dans mon exemple, du coup, la seule chose à rajouter est une méthode pour construire le <span> du libellé du <p:selectOneMenu>, de supprimer l'attribut "picto" qui n'aura plus de sens et de rajouter éventuellement le nom de la classe de style à utiliser (encore que la valeur permet de se déterminer).
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  15. #15
    Membre habitué
    Oui picto représente l'URL de l'image et libelle la valeur à récupérer.

    Picto est géré dynamiquement (une ligne du menu possède une image ou non selon le contexte).

###raw>template_hook.ano_emploi###