problème affichage rich:dataTable

**altair_606** · 02/01/2009, 23h24

Bonsoir à tous,

j'ai une question très simple mais je ne trouve pas la solution... Je souhaite afficher une dataTable (RichFaces) mais je n'arrive à obtenir que le header (dont j'aimerais ne pas mettre d'ailleurs). Impossible d'afficher les données que ça soit du texte rentré "dans le code" ou une valeur obtenue via un managed bean...

Voici mon fichier 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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich">

<ui:composition template="/template.xhtml">
<ui:define name="titre">Jeu</ui:define>

	<ui:define name="entete">
  	 <h:outputText value="Mot le plus long: 1 joueur" > </h:outputText> 
    </ui:define>
 
	<ui:define name="contenu">
  	<h:outputText value="Choisissez les consonnes ou voyelles:" ></h:outputText>
  	<br> </br> 
  	<h:outputText value="Bouton haut pour consonnes; bouton bas pour voyelles." ></h:outputText>
  	<rich:dataTable id="lettrestirees" rows="2" columns="7" columnsWidth="80,80,80,80,80,80,80" border="0">        
        <rich:column>
            <f:facet name="header">a</f:facet>
            <h:outputText value="d" style="font-size:300%;"></h:outputText>       
        </rich:column>
        <rich:column>
            <f:facet name="header">s</f:facet>
            <h:outputText value="#{Lettres.lettre2}" style="font-size:300%;"></h:outputText>         
        </rich:column>
        <rich:column>
            <f:facet name="header">d</f:facet>
            <h:outputText value="#{Lettres.lettre3}" style="font-size:300%;"></h:outputText>            
        </rich:column>
        <rich:column>
            <f:facet name="header">f</f:facet>
            <h:outputText value="#{Lettres.lettre4}" style="font-size:300%;"></h:outputText> 
         </rich:column>
         <rich:column>
            <f:facet name="header">g</f:facet>
            <h:outputText value="#{Lettres.lettre5}" style="font-size:300%;"></h:outputText> 
        </rich:column>
        <rich:column>
            <f:facet name="header">h</f:facet>
            <h:outputText value="#{Lettres.lettre6}" style="font-size:300%;"></h:outputText>             
        </rich:column>
        <rich:column>
            <f:facet name="header">j</f:facet>
            <h:outputText value="#{Lettres.lettre7}" style="font-size:300%;"></h:outputText>           
        </rich:column>       
    </rich:dataTable>    
  	
</ui:define>
</ui:composition>
</html>

Et mon managed-bean au cas où:

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
46
47
48
49
50
51
52
53
54
public class Lettres {
 
	private char lettre1='a';
	private char lettre2='d';
	private char lettre3='a';
	private char lettre4='s';
	private char lettre5='e';
	private char lettre6='a';
	private char lettre7='g';
 
	public char getLettre1() {
		return lettre1;
	}
	public void setLettre1(char lettre1) {
		this.lettre1 = lettre1;
	}
	public char getLettre2() {
		return lettre2;
	}
	public void setLettre2(char lettre2) {
		this.lettre2 = lettre2;
	}
	public char getLettre3() {
		return lettre3;
	}
	public void setLettre3(char lettre3) {
		this.lettre3 = lettre3;
	}
	public char getLettre4() {
		return lettre4;
	}
	public void setLettre4(char lettre4) {
		this.lettre4 = lettre4;
	}
	public char getLettre5() {
		return lettre5;
	}
	public void setLettre5(char lettre5) {
		this.lettre5 = lettre5;
	}
	public char getLettre6() {
		return lettre6;
	}
	public void setLettre6(char lettre6) {
		this.lettre6 = lettre6;
	}
	public char getLettre7() {
		return lettre7;
	}
	public void setLettre7(char lettre7) {
		this.lettre7 = lettre7;
	}
 
}

Merci beaucoup pour votre aide.

Cordialement,

Altaïr

**nathieb** · 03/01/2009, 00h37

Bonjour,

C'est une erreur quand on débute souvent. h:dataTable sert à afficher une collection dynamique ( avec une List ou un dataModel ) , pour ton cas regarde plutôt un panelGrid si je me souviens bien .

un tableau statique.

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
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
        <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
        
        <f:view>
         <html>
          <body>
           <h:form>
             <h:panelGrid columns="3"         border="1" rules="all" title="This is panelGrid demo">
                 <f:facet name="header">
                    <h:outputText value="Fill Numbers Below"/>
                 </f:facet>
                    <h:inputText/>
                    <h:inputText/>
                    <h:inputText/>
                    <h:inputText/>
                    <h:inputText/>
                    <h:inputText/>
                    <h:inputText/>
                    <h:inputText/>
             </h:panelGrid> 
            </h:form>
           </body>
         </html>
        </f:view>

exemple de roseindia http://www.roseindia.net/jsf/panelGrid.shtml

Bref regarde la FAQ JSF

olivier

**altair_606** · 03/01/2009, 02h29

Un grand merci à toi Nathieb. Sans toi, j'aurais probablement continué à tourner en rond longtemps...

Voici donc le code fonctionnant:

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
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich">

<ui:composition template="/template.xhtml">
<ui:define name="titre">Jeu</ui:define>

	<ui:define name="javascript">
	<rich:hotKey key="left" handler="flechegauche()"/>
   	<rich:hotKey key="right" handler="flechedroite()"/>	
	<script type="text/javascript">
	var cellule=0;
	function flechedroite()
	{ 
	    lettrestirees.rows[0].cells[cellule].style.backgroundColor="#FFFFFF";
		if (cellule!=6) {cellule=cellule+1;}
		lettrestirees.rows[0].cells[cellule].style.backgroundColor="#C0C0C0";
	}

	function flechegauche()
	{   
	    lettrestirees.rows[0].cells[cellule].style.backgroundColor="#FFFFFF";
		if (cellule!=0) {cellule=cellule-1;}
		lettrestirees.rows[0].cells[cellule].style.backgroundColor="#C0C0C0";

	}		
	</script>
	</ui:define>
	
	
	<ui:define name="entete">
  	 <h:outputText value="Mot le plus long: 1 joueur" > </h:outputText> 
    </ui:define>
 
	<ui:define name="contenu">
	
  	<h:outputText value="Choisissez les consonnes ou voyelles:" ></h:outputText>
  	<br> </br> 
  	<h:outputText value="Bouton haut pour consonnes; bouton bas pour voyelles." ></h:outputText>
  	<h:panelGrid  id="lettrestirees" rows="1" columns="7" columnsWidth="80,80,80,80,80,80,80" border="1">               
            <h:outputText value="#{LaLettres.lettre1}" style="font-size:300%;"></h:outputText>               
            <h:outputText value="#{LaLettres.lettre2}" style="font-size:300%;"></h:outputText>                
            <h:outputText value="#{LaLettres.lettre3}" style="font-size:300%;"></h:outputText>                  
            <h:outputText value="#{LaLettres.lettre4}" style="font-size:300%;"></h:outputText>        
            <h:outputText value="#{LaLettres.lettre5}" style="font-size:300%;"></h:outputText>        
            <h:outputText value="#{LaLettres.lettre6}" style="font-size:300%;"></h:outputText>                    
            <h:outputText value="#{LaLettres.lettre7}" style="font-size:300%;"></h:outputText>                      
    </h:panelGrid>    
</ui:define>
</ui:composition>
</html>

J'essaie maintenant via javascript de changer le background des cellules du tableau en appuyant sur les touches "left" et "ight" du clavier. J'utilise pour celà rich:hotkey pour détecter l'évènement et lancer la fonction javascript correspondante. Mais j'obtiens une erreur javascript sur le id que j'utilise "lettrestirees" (cf en noir sur le code). Pourtant c'estbien le id déclaré dans le panelGrid et que l'on trouve dans le code HTML généré..

Quelqu'un aurait-il une idée sur l'origine du poblème?

Cordialement,

Altaïr

**altair_606** · 03/01/2009, 02h40

Bon je progress car je trouve les réponses à mes questions (après quelques heures quand même

)

Je ne sais pas pourquoi mais dans ce cas on ne peut pas utiliser directement le id du tableau comme ça:

Code :

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

lettrestirees.rows[0].cells[cellule].style.backgroundColor="#FFFFFF";

Il faut rajouter une ligne de plus:

Code :

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

1
2
var lacase = document.getElementById("lettrestirees");
	   lacase.rows[0].cells[cellule].style.backgroundColor="#FFFFFF";

problème affichage rich:dataTable

JSF Java

Discussions similaires

Partager

Partager