PrimeFaces : Menu déroulant avec images

Version imprimable

29/04/2019, 16h13
denisduval75

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.
29/04/2019, 16h26
jeffray03

Salut,
peux-tu nous montrer ou ca coince ?

Eric

Voici mon code. Je n'ai pas d'images.

Code:

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>

29/04/2019, 17h06
Cincinnatus

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 ?
29/04/2019, 17h11
denisduval75

Même chose avec h:graphicImage
30/04/2019, 09h21
Cincinnatus

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 ?
30/04/2019, 09h48
denisduval75

1 pièce(s) jointe(s)
J'ai ajouté le style suivant mais sans succès :
Code:

1 2 3 <p:column style="width:10%"> <p:graphicImage value="images/Filtrer.png"/> </p:column>
Voici le code généré :

Pièce jointe 470913

1 pièce(s) jointe(s)

Tu cherches à avoir ce genre de rendu ?Pièce jointe 470932

Si oui, j'utilise des classes de style, voici le code associé

Code:

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:

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:

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>

30/04/2019, 13h58
denisduval75

1 pièce(s) jointe(s)

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 :

Pièce jointe 470964
30/04/2019, 14h17
OButterlin

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

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:

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>

30/04/2019, 19h25
OButterlin

2 choses :
- pourquoi les <p:column> ?
- quelle est la structure de ton objet perso ?

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

Voici l'objet perso :

Code:

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

01/05/2019, 12h10
OButterlin

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).
02/05/2019, 08h13
denisduval75

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