Discussion :

[hapalemur]

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 :

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

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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

[v.charlet]

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

[hapalemur]

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

J'ai d'abord essayé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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

Sélectionner tout - Visualiser dans une fenêtre à part

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.