Discussion :

[denisduval75]

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.

[jeffray03]

Salut,
peux-tu nous montrer ou ca coince ?

Eric

[denisduval75]

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>

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

[denisduval75]

Même chose avec h:graphicImage

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

[denisduval75]

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é :

[OButterlin]

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>

[denisduval75]

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 :

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

[denisduval75]

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>

[OButterlin]

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

[denisduval75]

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

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

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