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é
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    février 2015
    Messages
    357
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : Service public

    Informations forums :
    Inscription : février 2015
    Messages : 357
    Points : 142
    Points
    142
    Par défaut 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é Avatar de jeffray03
    Homme Profil pro
    Développeur informatique
    Inscrit en
    juillet 2008
    Messages
    1 479
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Allemagne

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : juillet 2008
    Messages : 1 479
    Points : 2 083
    Points
    2 083
    Par défaut
    Salut,
    peux-tu nous montrer ou ca coince ?

    Eric

  3. #3
    Membre habitué
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    février 2015
    Messages
    357
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : Service public

    Informations forums :
    Inscription : février 2015
    Messages : 357
    Points : 142
    Points
    142
    Par défaut
    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 éprouvé Avatar de Cincinnatus
    Homme Profil pro
    Développeur d'applications de Gestion
    Inscrit en
    mars 2007
    Messages
    473
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Développeur d'applications de Gestion
    Secteur : Service public

    Informations forums :
    Inscription : mars 2007
    Messages : 473
    Points : 1 251
    Points
    1 251
    Par défaut
    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é
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    février 2015
    Messages
    357
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : Service public

    Informations forums :
    Inscription : février 2015
    Messages : 357
    Points : 142
    Points
    142
    Par défaut
    Même chose avec h:graphicImage

  6. #6
    Membre éprouvé Avatar de Cincinnatus
    Homme Profil pro
    Développeur d'applications de Gestion
    Inscrit en
    mars 2007
    Messages
    473
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Développeur d'applications de Gestion
    Secteur : Service public

    Informations forums :
    Inscription : mars 2007
    Messages : 473
    Points : 1 251
    Points
    1 251
    Par défaut
    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é
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    février 2015
    Messages
    357
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : Service public

    Informations forums :
    Inscription : février 2015
    Messages : 357
    Points : 142
    Points
    142
    Par défaut
    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é :

    Nom : Capture.PNG
Affichages : 56
Taille : 83,5 Ko

  8. #8
    Modérateur
    Avatar de OButterlin
    Homme Profil pro
    Inscrit en
    novembre 2006
    Messages
    7 082
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : novembre 2006
    Messages : 7 082
    Points : 9 169
    Points
    9 169
    Billets dans le blog
    1
    Par défaut
    Tu cherches à avoir ce genre de rendu ?Nom : Screenshot.png
Affichages : 51
Taille : 2,8 Ko

    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é
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    février 2015
    Messages
    357
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : Service public

    Informations forums :
    Inscription : février 2015
    Messages : 357
    Points : 142
    Points
    142
    Par défaut
    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 :

    Nom : Capture.PNG
Affichages : 48
Taille : 83,5 Ko

  10. #10
    Modérateur
    Avatar de OButterlin
    Homme Profil pro
    Inscrit en
    novembre 2006
    Messages
    7 082
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : novembre 2006
    Messages : 7 082
    Points : 9 169
    Points
    9 169
    Billets dans le blog
    1
    Par défaut
    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é
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    février 2015
    Messages
    357
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : Service public

    Informations forums :
    Inscription : février 2015
    Messages : 357
    Points : 142
    Points
    142
    Par défaut
    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
    Avatar de OButterlin
    Homme Profil pro
    Inscrit en
    novembre 2006
    Messages
    7 082
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : novembre 2006
    Messages : 7 082
    Points : 9 169
    Points
    9 169
    Billets dans le blog
    1
    Par défaut
    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é
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    février 2015
    Messages
    357
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : Service public

    Informations forums :
    Inscription : février 2015
    Messages : 357
    Points : 142
    Points
    142
    Par défaut
    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
    Avatar de OButterlin
    Homme Profil pro
    Inscrit en
    novembre 2006
    Messages
    7 082
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : novembre 2006
    Messages : 7 082
    Points : 9 169
    Points
    9 169
    Billets dans le blog
    1
    Par défaut
    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é
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    février 2015
    Messages
    357
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : Service public

    Informations forums :
    Inscription : février 2015
    Messages : 357
    Points : 142
    Points
    142
    Par défaut
    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).

Discussions similaires

  1. Menu déroulant avec images
    Par solorac dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 29/09/2016, 19h04
  2. [XL-2013] Menu déroulant avec images
    Par filsdepub dans le forum Excel
    Réponses: 6
    Dernier message: 24/11/2015, 15h45
  3. Menu déroulant avec images
    Par hysteri-k dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 02/08/2013, 09h42
  4. Menu déroulant avec images mappées
    Par azote51 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 0
    Dernier message: 08/03/2009, 11h02
  5. problème menu déroulant avec des images
    Par -Neo- dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 19/02/2008, 18h50

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo