Discussion :

[Edta]

Bonjour,

J'ai des données qui s'affichent dans un h:dataTable de largeur et longueur fixe. Par défaut la largeur de mes lignes s'adapte au nombre d'éléments à afficher. Je souhaite modifier cette présentation. Je voudrais que mes lignes (th et td) aient tout le temps la même taille quelque soit le nombre de lignes. Si mon nombre de lignes est trop petit pour remplir le tableau au complet alors je voudrais voir mes lignes en un bloc et le restant du tableau vide.
Je ne sais pas, quelle est la façon de s'y prendre. Dois je chercher au niveau de la css? ou bien ajouter un élément html ? Jouer avec les attributs du dataTable? ect

Merci de votre aide

[Sniper37]

Bonjour,
Dois je chercher au niveau de la css? ou bien ajouter un élément html ? Jouer avec les attributs du dataTable? ect

Exactement:

dans la colonne tu peux ajouter

Code :

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

style="width: 20px;"

[Edta]

Etant donné que je veux que mes lignes forment un groupe. Je dois jouer sur la hauteur donc l'attribut height. J'ai essayé mais je ne suis pas arrivée à se que je voulais. Maintenant, j'ai mes lignes qui s'affichent à partir du bas du tableau et l'en-tête du tableau prend l'espace restant et place ses cellules au milieu. De plus les cellules des lignes et les cellules de l'en-tête n'ont pas la même largeur. Pour les lignes ca s'affiche correctement alors que pour l'en tête les cellules sont juste de la taille du texte et séparées par un grand espace.

Voici la déclaration de mon tableau

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
 
<h:dataTable captionClass="titleData" styleClass="tableData" value="#{Acceptors_1.acceptors}" var="item" 
                            id="dataTable" rows="15" binding="#{Acceptors_1.dataTable}" cellpadding="3" cellspacing="0"> 
                            <f:facet name="caption">
                                <h:outputText value="#{bundle.acceptors_title}"/>
                            </f:facet>
                            <h:column>
                                <f:facet name="header">
                                    <h:outputText styleClass="tableDataHeader_left" value="#{bundle.name}"/>
                                 </f:facet>
                                <h:commandLink styleClass="#{item.status}" action="#{Acceptors_1.linkAcceptor_action}" immediate="true">
                                    <h:outputText value="#{item.name}"/>
                                </h:commandLink>
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:outputText styleClass="tableDataHeader_middle" value="#{bundle.acceptors_terminalsKind}"/>
                                </f:facet>
                                <parser:toText list="#{item.managedTerminalKinds}" property="name" separator=", "/>
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:outputText styleClass="tableDataHeader_middle" value="#{bundle.acceptors_tmsAccount}"/>
                                </f:facet>
                                    <h:outputText value="#{item.TMSAccount}"/>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">
                                    <h:outputText styleClass="tableDataHeader_right" value="coucou"/>
                                </f:facet>
                                    <h:commandLink id="imgLinkEdit" action="#{Acceptors_1.imgLinkEdit_action}" immediate="true">
                                        <h:graphicImage alt="#{bundle.edit}" title="Edit" value="../../resources/images/edit.gif"/>
                                    </h:commandLink>
                                </h:column> 
                        </h:dataTable>

Voici ma css:

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
 
/* style of data table */
.titleData{
    color: black;
}
 
.tableData{
    position: absolute;
    width: 100%;
    height: 495px;
    background: gray;
    border: 0px;
}
 
.tableData img{
    border: 0px;
}
 
.tableData td{
    border: 0px;
    height: 20px;
    border-left: 1px solid white;
}
 
.tableDataHeader_left{
    background: url(images/bandeau-gris-gauche.png);
    color: black;
    height: 44px;
}
 
.tableDataHeader_middle{
    background: url(images/bandeau-gris-centre.png);
    color: black;
    height: 44px;
    border-left: 1px solid gray;
}
 
.tableDataHeader_right{
    background: url(images/bandeau-gris-droite.png);
    color: black;
    height: 44px;
    border-left: 1px solid gray;

[Edta]

Je n'ai aps encore trouvé la solution mais déjà la première erreur est la déclaration des style de l'en-tête. Le style doit etre déclaré dans la balise column et pas dans mon outputText. Je les ai corriger de cette façon:

Code :

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

1
2
3
4
5
6
7
8
9
 
<h:column headerClass="tableDataHeader_left">
                                <f:facet name="header">
                                    <h:outputText value="#{bundle.name}"/>
                                 </f:facet>
                                <h:commandLink styleClass="#{item.status}" action="#{Acceptors_1.linkAcceptor_action}" immediate="true">
                                    <h:outputText value="#{item.name}"/>
                                </h:commandLink>  
                            </h:column>

J'ai fixé la taille des en-tête mais j'ai laissé libre celle des td. Il me reste a trouver comment fixer cette taille et quelle soit respectée quelque soit le nombre d'éléments.

[Esil2008]

Salut,

Si tu entoures ton header puis ton commandLink par deux panelgroup qui ont les mêmes dimensions, ca marchera je pense.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 <f:facet name="header">
  <ice:panelGroup styleClass="style">
    <h:outputText value="#{bundle.name}"/>
  </ice:panelGroup>
 </f:facet>
 
 <ice:panelGroup styleClass="style">
   <h:commandLink styleClass="#{item.status}" action="#  {Acceptors_1.linkAcceptor_action}" immediate="true">
      <h:outputText value="#{item.name}"/>
   </h:commandLink> 
  </ice:panelGroup>

[Edta]

Merci pour l'idée mais ca ne marche pas.
J'ai pensé à quelle que chose mais mes connaissances sur JSF son trop restrinetes pour savoir si c'est possible.

Dans mon h:dataTable j'ai fixé le nombre de lignes à 15. dans mon backingBean je peux appeler la fonction dataTable.getRows() pour savoir combien de ligne est affichée. Se que je ne sais pas c'est s'il existe u moyen de faire dans ma page JSP le code :

si mon nombre de lignes < nombre de ligne max alors
for i= nombre de lignes à 15 faire
<tr><td>vide</td><td>.......</td></tr> //ajout d'une ligne vide
fin for
fin si

Est ce que c'est possible de faire quelque chose comme ca?

[Esil2008]

Pourrais tu mettre une capture d'ecran pour voir l'affichage que tu as mnt et ce qui cloche, car personnellement je me rend compte que j'ai pas bien compris ce que tu voudrais faire

[Edta]

Voici une capture d'écran. Ce que je cherche a faire c'est que mes deux lignes soit l'une en dessous de l'autre sans autant d'espaces. Pour représenter:

Mon en-tête de tableau
ligne 1 "Auchan"......
ligne 2 "Blabla".......
.
.
. du vide fond gris avec mes traits blancs
.
fin du tableau
bouton

voici ma css actuelle:

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
 
/* style of data table */
.titleData{
    color: black;
}
 
.tableData{
    position: absolute;
    width: 964px;
    height: 495px;
    background: gray;
    border: 0px;
    left: 30px;
}
 
.tableData img{
    border: 0px;
}
 
.tableData td{
    border: 0px;
    border-left: 1px solid white;
    vertical-align: top;
}
 
.tableData th{
    width: auto;
    border: 0px;
    height: 44px;
    color: black;
    border-left: 1px solid gray;
}
 
.tableDataHeader_left{
    background: url(images/bandeau-gris-gauche.png) repeat;
}
 
.tableDataHeader_middle{
    background: url(images/bandeau-gris-centre.png) repeat;
}
 
.tableDataHeader_right{
    background: url(images/bandeau-gris-droite.png) repeat;
}

voici mon tableau sur ma page JSP:

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
 
<h:dataTable rows="15" captionClass="titleData" styleClass="tableData" value="#{Acceptors_1.acceptors}" var="item" 
                            id="dataTable" binding="#{Acceptors_1.dataTable}" cellspacing="0"> 
                            <f:facet name="caption">
                                <h:outputText value="#{bundle.acceptors_title}"/>
                            </f:facet>
                            <h:column headerClass="tableDataHeader_left">
                                <f:facet name="header">
                                    <h:outputText value="#{bundle.name}"/>
                                 </f:facet>
                                <h:commandLink styleClass="#{item.status}" action="#{Acceptors_1.linkAcceptor_action}" immediate="true">
                                    <h:outputText value="#{item.name}"/>
                                </h:commandLink>  
                            </h:column>
 
                            <h:column headerClass="tableDataHeader_middle">
                                <f:facet name="header">
                                    <h:outputText value="#{bundle.acceptors_terminalsKind}"/>
                                </f:facet>
                                <parser:toText list="#{item.managedTerminalKinds}" property="name" separator=", "/>
                            </h:column>
 
                            <h:column headerClass="tableDataHeader_middle">
                                <f:facet name="header">
                                    <h:outputText value="#{bundle.acceptors_tmsAccount}"/>
                                </f:facet>
                                <h:outputText value="#{item.TMSAccount}"/>
                            </h:column>
 
                            <h:column headerClass="tableDataHeader_right">
                                <f:facet name="header">
                                    <h:outputText value=" "/>
                                </f:facet>
                                    <center>
                                        <h:commandLink id="imgLinkEdit" action="#{Acceptors_1.imgLinkEdit_action}" immediate="true">
                                            <h:graphicImage alt="#{bundle.edit}" title="Edit" value="../../resources/images/edit.gif"/>
                                        </h:commandLink>
                                    </center>
                                </h:column> 
                        </h:dataTable>

[Esil2008]

Je vois mnt

A mon avis ton code est bon, perso je vois d'anomalie.

Et si tu entoures carrément ta dataTable avec un pabelgroup qui aura comme style le styleClass="tableDataTest" , enlève le styleclass de la datatable, ça change quelque chose ?


.tableDataTest{ width: 964px;
height: 495px;
background: gray;
}

[Edta]

J'ai déjà pensé à cette solution enfin j'avais mis en div au lieu d'un panel group. Le problème c'est que mes lignes blanches s'arrête à la fin du tableau et pas à la fin du cadre (que se soit un panelGroup ou un div)

[Esil2008]

si tu entoure le meme panelgroup avec un autre panelgroup avec un background gris et avec la meme hauteur ca marche pas aussi ?

Par ce que le faite de mettre un height a ta datatable l'oblige à positionner les lignes en fonction de cette hauteur, je pense que ca vient de la.

Il faudra trouver un moyen pour eviter ce height ...

[Edta]

oui je pense aussi que le problème vient de ce height. Mais le problème c'est comment créer les ligne blanche sur le paneau qui entour mon tableau car je ne sais pas de quelle tailles sont les colonnes.

[Esil2008]

un border : 1px white; dans le style du panelgroup general !

[Edta]

apparement, j'ai pas bien compris ton idée... tu pourrais me la redire d'une autre façon

[Esil2008]

voila ce que je voulais dire :

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
<ice:panelGroup style="height : 500px; border : 1px white; ">
	<ice:panelGroup styleClass="tableDataTest">
		<h:dataTable rows="15" captionClass="titleData"  value="#{Acceptors_1.acceptors}" var="item" 
			id="dataTable" binding="#{Acceptors_1.dataTable}" cellspacing="0"> 
			<f:facet name="caption">
				<h:outputText value="#{bundle.acceptors_title}"/>
			</f:facet>
			<h:column headerClass="tableDataHeader_left">
				<f:facet name="header">
					<h:outputText value="#{bundle.name}"/>
				 </f:facet>
				<h:commandLink styleClass="#{item.status}" action="#{Acceptors_1.linkAcceptor_action}" immediate="true">
					<h:outputText value="#{item.name}"/>
				</h:commandLink>  
			</h:column>
 
			<h:column headerClass="tableDataHeader_middle">
				<f:facet name="header">
					<h:outputText value="#{bundle.acceptors_terminalsKind}"/>
				</f:facet>
				<parser:toText list="#{item.managedTerminalKinds}" property="name" separator=", "/>
			</h:column>
 
			<h:column headerClass="tableDataHeader_middle">
				<f:facet name="header">
					<h:outputText value="#{bundle.acceptors_tmsAccount}"/>
				</f:facet>
				<h:outputText value="#{item.TMSAccount}"/>
			</h:column>
 
			<h:column headerClass="tableDataHeader_right">
				<f:facet name="header">
					<h:outputText value=" "/>
				</f:facet>
					<center>
						<h:commandLink id="imgLinkEdit" action="#{Acceptors_1.imgLinkEdit_action}" immediate="true">
							<h:graphicImage alt="#{bundle.edit}" title="Edit" value="../../resources/images/edit.gif"/>
						</h:commandLink>
					</center>
				</h:column> 
		</h:dataTable>
	</ice:panelGroup> 
</ice:panelGroup>

EDIT

Pardon, j'ai repondu vite. Je croyais que tu parlais d'une sorte de bordure blanche qui va entourer ton tableau, mais je viens de voir qu'elle sépare aussi les colonnes ...
Donc oublie ce que je viens d'ecrire

[Edta]

Personne ne sait s'il est possible ajouter un nombre x de lignes vide dans un dataTable?