+ Répondre à la discussion
Affichage des résultats 1 à 3 sur 3
  1. #1
    Nouveau Membre du Club
    Inscrit en
    juin 2007
    Messages
    63
    Détails du profil
    Informations forums :
    Inscription : juin 2007
    Messages : 63
    Points : 34
    Points
    34

    Par défaut Choix dans un selectItems et modification affichage

    Bonjour,
    Je débute avec le framework JSF/RichFaces (avant j'utilisais plutôt des frameworks javascript), et je suis confronté à l'affichage d'une photo dans un <h:graphicImage> suite à la sélection d'une valeur dans un <f:selectItems>.

    La page xhtml :
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
     
    <h:panelGrid columns="2" columnClasses="colLabel, colInput">
    <h:outputText value="Type de photo :(*)" />
        <rich:select onchange="submit()" value="#{beanController.photoDto.typePhoto}"
                          defaultLabel="#{beanController.photoDto.typePhotoList[0].label}">
               <f:valueChangeListener type ="#{com.photo.beanController}"/>
               <f:selectItems value="#{beanController.photoDto.typePhotoList}" />
        </rich:select>
    </h:panelGrid>
     ..............
    .................
    <!-- 2ème partie de la page --> 
     
     <h:panelGrid columns="2" >
           <rich:panel style="text-align: center">
                   <f:facet name="header">Visu type photo</f:facet>
                   <h:graphicImage value="#{beanController.urlPhoto}" />
           </rich:panel>
           <rich:panel style="text-align: center">
                   <f:facet name="header">Descripteur photo</f:facet>
                   <h:inputTextarea id ="descrip" rows="3" value="{beanController.photoDto.description}"/>
            </rich:panel>
    </h:panelGrid>
    La classe Photo :
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    public class ModelePhotoDto implements Serializable {
     
        private String typePhoto;
        private List<SelectItem> typePhotoList;
     
        private String description;
     
        public ModelePhotoDto(){
            typePhotoList = new ArrayList<SelectItem>();
            typePhotoList.add( new SelectItem(1, "Paysage"));
            typePhotoList.add(new SelectItem(2, "Portrait"));
            typePhotoList.add(new SelectItem(3, "Techno"));
        }
        // getters et setters
    .......
    Et le bean :
    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
    public class BeanController implements ValueChangeListener {
     
        private PhotoDto photoDto;
        private String urlPhoto;
     
     
        @PostConstruct
        public void init() {
            photoDto = new PhotoDto();
            urlPhoto = "../photos/paysage.jpg";
        }
     
       public void processValueChange(ValueChangeEvent vcEvent){
     
            texte = (String)vcEvent.getNewValue();
            if (texte.equalsIgnoreCase("Paysage") {
    		urlPhoto = "../photos/paysage.jpg";
    	} elseif (texte.equalsIgnoreCase("Portrait") {
    		urlPhoto = "../photos/portrait.jpg";
    	} elseif (texte.equalsIgnoreCase("Techno") {
    		urlPhoto = "../photos/techno.jpg";
    	}
       }
        // getters et setters
    ......
    Je ne vois pas le lien que je dois faire dans la 2éme partie de la page pour récupérer l'image du type de photo choisi au niveau du selectItems : l'événement remonte l'info au niveau du bean : processValueChange, mais comment informer le tag <h:graphicImage> pour indiquer que l'urlPhoto a été modifiée.
    Merci de m'apporter quelques éclaircissements.

  2. #2
    Membre éclairé
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    novembre 2011
    Messages
    178
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Somme (Picardie)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels

    Informations forums :
    Inscription : novembre 2011
    Messages : 178
    Points : 322
    Points
    322

    Par défaut

    regardes ce sujet
    http://www.developpez.net/forums/d11...4-rich-select/

    ce qui est certain c'est que ajax va actualiser le composant qui a subit la modification

    bon courage ...

  3. #3
    Nouveau Membre du Club
    Inscrit en
    juin 2007
    Messages
    63
    Détails du profil
    Informations forums :
    Inscription : juin 2007
    Messages : 63
    Points : 34
    Points
    34

    Par défaut

    Merci pour le lien, celà m'a été utile pour clarifier la chose.

    J'ai d'abord essayé :
    Code :
    1
    2
    3
    4
    5
    6
    <h:outputText value="Type de photo :(*)" />
    <rich:select value="#{beanController.photoDto.typePhoto}"
            valueChangeListener ="#{beanController.valueChanged}" defaultLabel="#{beanController.photoDto.typePhotoList[0].label}">
                   <f:selectItems value="#{beanController.photoDto.typePhotoList}" />
                   <a4j:ajax event="valueChange" render="images" execute="@this" />
    </rich:select>
    Mais je me retrouve avec l'erreur :
    javax.faces.view.facelets.TagException: /pages/descripteurs.xhtml @35,97 <a4j:ajax> valueChangeevent is not supported for the UISelect
    Donc j'ai viré le <rich:select> et j'ai la solution fonctionnelle avec <h:selectOneMenu>:

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
     
    <h:outputText value="Type de photo :(*)" />
    <h:selectOneMenu  value="# {beanController.photoDto.typePhoto}" valueChangeListener="#{.beanController.valueChanged}">
          <f:selectItems value="#{beanController.photoDto.typePhotoList}" />
          <a4j:ajax event="valueChange" render="images" execute="@this" />                        
    </h:selectOneMenu>
     
     
    ....................
    <h:panelGrid id="images" columns="2" >
          <rich:panel style="text-align: center">
                <f:facet name="header"> Visu type photo</f:facet>
                 <h:graphicImage value="#{beanController.urlPhoto}" />
          </rich:panel>
    ......
    </h:panelGrid>
    Et pour le controleur :
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
       public void valueChanged(ValueChangeEvent vcEvent){
     
            SelectItem slm = photoDto.getTypePhotoList().get(Integer.parseInt((String)vcEvent.getNewValue()));
            if (slm.getLabel().equalsIgnoreCase("Paysage")){
    		urlPhoto = "../photos/paysage.jpg";
            } elseif (slm.getLabel().equalsIgnoreCase("Portrait") {
     		urlPhoto = "../photos/portrait.jpg";
            } elseif (slm.getLabel().equalsIgnoreCase("Techno") {
    		urlPhoto = "../photos/techno.jpg";
            }
       }
    Si quelqu'un pouvait m'indiquer des liens concernant la description des tags JSF et RichFaces sur le modèle API/Javadoc!
    Je me suis trouvé http://www.horstmann.com/corejsf/jsf-tags.html#Table4_9 mais c'est un peu succint.
    Merci.

+ Répondre à la discussion
Cette discussion est résolue.

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •