Discussion :

[anisj1m]

Bonjour,

je veux faire un h:panelGrid qui contient 2 colonne.
mon problème est que je veux mettre dans le premier colonne un h:panel qui sera mis a l'extrémité droite du premier colonne, et le second colonne vas contenir un h:panel qui sera a l'extrémité gauche.

est ce que cela est possible?

et merci

[romaintaz]

Tu dois jouer avec l'attribut columnClasses :

Code :

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

columnClasses="css1,css2"

Ainsi, la première colonne utilisera la classe CSS css1, la deuxième colonne la classe css2.

[anisj1m]

merci beaucoup romaintaz; tu es le

pour ce la est ce que je dois mettre les panels dans le panel grid dans des colonnes comme suite :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<h:panelGrid columns="2" columnClasses="css1,css2">
 
<h:column >
<rich:panel>
</rich:panel>
</h:column>
 
</h:column>
<rich:panel>
</rich:panel>
</h:column>
</h:panelGrid>

si oui, ce h:column n'a pas d'attribut pour que je met le style.

[romaintaz]

Non.

Le panelGrid fonctionne ainsi :
Tu spécifies le nombre de colonnes, NB.
Ensuite, tu ajoutes dans le panelGrid tous les composants que tu veux.
A l'affichage, tous les "NB" composants, il y a un saut de ligne.

Par exemple, si tu mets :

Code :

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

1
2
3
4
5
6
7
8
9
<h:panelGrid columns="3">
    a
    b
    c
    d
    e
    f
    g
</h:panelGrid>

L'affichage sera :

Code :

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

1
2
3
a b c
d e f
g _ _

C'est pratique, mais très basique (par exemple, il n'est pas possible d'utiliser les attributs HTML colspan ou rowspan, bien que l'on puisse toujours "bidouiller" pour les simuler)

Les <h:column/> sont utiles dans le cas où tu utilises un <h:dataTable/>

[anisj1m]

merci romaintaz;
je pense que tu ne m'a pas compris, oui je suis d'accord avec toi pour le fonctionnement d'un :panelgrid,
mais mon problème est comment générer l'affichage des composant dans les colonnes de h:panelgrid:

1) colonne 1 : afficher un composant a l'extrémité droite

2 ) colonne 2 : afficher un composant a l'extrémité gauche

[romaintaz]

Bah si j'ai bien compris. Enfin je crois
Tu veux que les composants de la première colonne soient sur la droite, tandis que les composants de la seconde colonne soient à gauche.

Un peu comme ça :

Code :

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

1
2
3
4
+--------+--------+
|       X|X       |
|       X|X       |
+--------+--------+

Donc pour faire ceci, il te faut, comme dit dans mon premier message, utiliser 2 classes CSS différentes désignant comment sont alignés les élements. Ensuite, il faut appliquer les deux classes CSS dans l'attribut columnClasses.

Mon second message n'était destiné qu'à ré-expliquer le fonctionnement d'un panelGrid, et dire qu'il n'y avait pas besoin d'utiliser le composant <h:column>, qui est destiné à la datatable.

Est-ce plus clair ?

[anisj1m]

merci romaintaz;
j'ai compris maintenant l'utilisation de h:column,
bon maintenant en suppose
juste un petit question, est ce que l'utilisation du style est correcte comme j'ai fait :

Code :

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

1
2
3
4
5
6
<h:panelGrid columns="2" columnClasses="css1,css2">
<h:panelGrid columns="2" columnClasses="css1,css2">
<rich:panel style="css1"></rich:panel>
<rich:panel style="css2"></rich:panel>
 
</h:panelGrid>

et merci ;

[romaintaz]

merci romaintaz;
j'ai compris maintenant l'utilisation de h:column,
bon maintenant en suppose
juste un petit question, est ce que l'utilisation du style est correcte comme j'ai fait :

Code :

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

1
2
3
4
5
6
<h:panelGrid columns="2" columnClasses="css1,css2">
<h:panelGrid columns="2" columnClasses="css1,css2">
<rich:panel style="css1"></rich:panel>
<rich:panel style="css2"></rich:panel>
 
</h:panelGrid>

et merci ;

Alors :
1. J'imagine que le fait qu'il y ait 2 fois un <h:panelGrid> est une erreur de copié collé
2. Il est inutile de mettre style="cssX" aux <rich:panel>
3. Ne pas confondre l'attribut style et styleClass. Le premier sert à spécifier des propriétés CSS (genre style="color: red; background: white") tandis que le second permet de spécifier une ou plusieurs classes CSS à affecter au composant (genre style="classeCss,autreClasseCss").

[anisj1m]

c'est une erreur de copié coller;

alors enfin je dois faire comme suit:

Code :

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

1
2
3
4
5
6
<h:panelGrid columns="2" columnClasses="css1,css2">
 
<rich:panel styleClass="css1"></rich:panel>
<rich:panel styleClass="css2"></rich:panel>
 
</h:panelGrid>

et après définir le css1 et le css2 ?

[romaintaz]

Non, il est inutile de spécifier de classes CSS dans les rich:panel pour leur positionnement :

Code :

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

1
2
3
4
<h:panelGrid columns="2" columnClasses="css1,css2">
    <rich:panel>...</rich:panel>
    <rich:panel>...</rich:panel>
</h:panelGrid>

[sal.gass]

Bonjour pour tous,
J'ai le même cas que anisj1m, j'ai essayé de faire la solution proposé par romaintaz, mais dans l'affichage les deux panel sont l'un à coté de l'autre, et moi je veux que le premier panel à l'extrémité gauche et l'autre à l'extrémité droite

voici le code que j'ai fait :

//Solution proposé par romaintaz

Code :

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

1
2
3
4
<h:panelGrid columns="2" columnClasses="css1,css2">
    <rich:panel>...</rich:panel>
    <rich:panel>...</rich:panel>
</h:panelGrid>

//Mon code :

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
<style type="text/css">
.css1 {
	text-align: left;
	background: red;
}
 
.css2 {
	text-align: right;
	background: green;
}
</style>
 
<h:panelGrid columns="2" columnClasses="css1,css2">
<rich:panel>
<h:outputText value="Exemple Panel 1"></h:outputText>
 
</rich:panel>
 
<rich:panel>
 
<h:outputText value="Exemple Panel 2"></h:outputText>
 
</rich:panel>
</h:panelGrid>

Remarque :
les couleur s'applique bien le premier Panel est en rouge le deuxième est en vert mais l'alignement ne s'applique pas il sont l'un à coté de l'aitre comme j'ai dis.
j'utilise le panel grid d'un un model panel, est ce que c'est à cause du model panel l'alignement ne s'applique pas ?

Merci d'avance.

[sal.gass]

J'ai inspecté le résultat de la page avec le plugin firebug de FireFox et il me donne le résultat suivant :

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
<style type="text/css">
1/**/
2.css1 {
3 text-align: left;
4 background: red;
5}
6
7.css2 {
8 text-align: right;
9 background: green;
10}
11/**/
12
</style>
<table>
<tbody>
<tr>
<td class="css1">
<div id="j_id2464" class="dr-pnl rich-panel">
<div id="j_id2464_body" class="dr-pnl-b rich-panel-body">Exemple Panel 1 </div>
</div>
</td>
<td class="css2">
<div id="j_id2467" class="dr-pnl rich-panel">
<div id="j_id2467_body" class="dr-pnl-b rich-panel-body">Exemple Panel 2</div>
</div>
</td>
</tr>
</tbody>
</table>

Le panelgrid ce transforme en tableau, et les deux panel chacun dans un colonne de ce tableau.
Est ce que ça est normale ? ?

[romaintaz]

Le <h:panelGrid> crée effectivement un <TABLE> en HTML. Donc ceci est normal.

Pour ton souci, je pense que c'est dû au fait que le tableau va prendre la taille minimale en fonction de son contenu. Du coup, l'alignement est bien respecté mais ça n'en a pas l'air car il n'y a pas de "vide" sur les côtés des rich:panel. Autrement dit, chaque case prend exactement la taille du rich:panel qu'il contient. Est-ce que je suis clair ?

Une idée pour résoudre ce problème : fixer la taille du <h:panelGrid> :

Code :

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

1
2
3
4
<h:panelGrid columns="2" columnClasses="css1,css2" style="width: 100%;">
    <rich:panel>...</rich:panel>
    <rich:panel>...</rich:panel>
</h:panelGrid>

[sal.gass]

Effectivement, ça marche bien avec style="width: 100%;" maintenant et les deux panel sont bien disposés à gauche et à droite.
C'est ça ce que je veux faire exactement

Pour ton souci, je pense que c'est dû au fait que le tableau va prendre la taille minimale en fonction de son contenu. Du coup, l'alignement est bien respecté mais ça n'en a pas l'air car il n'y a pas de "vide" sur les côtés des rich:panel. Autrement dit, chaque case prend exactement la taille du rich:panel qu'il contient. Est-ce que je suis clair ?

Oui, c'est bien compris, Je vous remercie romaintaz pour cette explication.

le problème est résolut chez moi.