Richfaces et style

Version imprimable

03/12/2008, 17h44
Chatastroff

Richfaces et style

Bonjour
Je développe en JSF/RichFaces depuis qq semaines, il est tant de s'intégrer à la communauté...
- répondre à une question: ok;
- poser une question: me voici :o)

J'ai donc développé un fichier monprojet.skin.properties que j'ai renseigné dans web.xml (<context-param>
<param-name>org.richfaces.SKIN</param-name>
<param-value>monprojet</param-value>
</context-param>)
pour définir mon style général, cela fonctionne très bien: par exemple tout mes rich:panel ont un entête avec le même gradient de couleur (jaune)

Maintenant j'aimerai pouvoir modifier la couleur des entêtes de certains panels, par exemple rouge, mais en gardant un gradient de couleur.

Je vois quatre pistes, pouvez vous m'orientez?
- utiliser le headerClass="maClassPanelRouge" pour chaque panel devant être définis. MaClassPanelRouge est définie dans un css, et dans ce cas je ne sais pas comment faire pour conserver mes gradients de couleurs
- idem, mais définir MaClassPanelRouge dans un xcss. Permet à priori de récupérer les gradients richfaces, mais je n'arrive pas à faire en sorte que mon xcss soit passé au navigateur sous forme de css (il reste en xcss, et le style n'es pas reconnu)
- créer un autre fichier monprojet2.skin.properties, mais je ne sais pas comment le renseigner dans le web.xml, ni comment l'utiliser ensuite
- créer un nouveau composant jsf panel2 qui récupérerait d'autre champ dans le properties que les champs standart???

Merci d'avance pour votre aide
03/12/2008, 18h02
Sniper37
Citation:

Envoyé par Chatastroff

Bonjour

Je vois quatre pistes, pouvez vous m'orientez?
- utiliser le headerClass="maClassPanelRouge" pour chaque panel devant être définis. MaClassPanelRouge est définie dans un css, et dans ce cas je ne sais pas comment faire pour conserver mes gradients de couleurs

Puisque tu veux le faire que pour certains panel, il me semble que c'est la solution la plus simple.
pour garder ton stle définis dans le skin, faut regarder les héritages dans css..
je ne sais si ça marche comme ça :
Code:

1 2 3 4 .rich-panel-header .maClassPanelRouge { }
au pire tu va redéfinir le style dans la nouvelle classe..
04/12/2008, 09h15
Chatastroff

Merci pour cette réponse, bonne idée... mais elle ne fonctionne pas comme je l'aurai aimé. Si je comprend bien, richfaces utilise les paramètres de monprojet.skin.properties pour générer une image qui sert de gradient de fond de header.
Donc quand je fais
.rich-panel-header.maClassPanelRouge {
color:yellow;
background-color:red;
}
il y a en fait un background-image qui se superpose à mon background-color... qui est donc inutile.
Donc pour l'instant j'utilise la solution bourrin:j'ai mis tout les panel dans la 2ème couleur, j'ai fait une copie d'écran pour récupérer l'image de background... et je l'ai mise dans mon css:
.rich-panel-header.maClassPanelRouge{
color:yellow;
background-image: url(/monprojet/images/texture1.png);
}

par contre si quelqu'un sait comment mettre en place les xcss, je suis preneur (ou pour la solution de 2 fichiers de skin simultanement)
04/12/2008, 09h24
OButterlin
Est ce qu'il ne serait pas plus simple de mettre dans la page qui t'intéresse une redéfinition de la classe de style.
Code:

1 2 3 4 5 6 7 <style> .rich-panel-header.maClassPanelRouge { color:#ffffff; background-color:navy; } </style>
Par défaut, il cherche dans le fichier xxx.css, mais si la page contient la classe, elle devrait être prioritaire.
04/12/2008, 10h59
Chatastroff

Dans le cas où s'est un style spécifique à une page, c'est sur que c'est le plus simple... mais pour l'homogénéité du site global, je n'utilise pas vraiment des style spécifique à une seule page. C'est plutôt: panneau normaux -> gris, panneaux de commande -> jaune, panneaux d'alerte -> rouge (par exemple)

Et ce genre de mise en forme serait envisageable ?

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
26
27
28
 
<html>
<head>
<style>
DIV{
    border-style:solid;
    border-color:blue;
}
SPAN DIV{
    border-style:solid;
    border-color:red;
}
</style>
</head>
 
<body>
<form>
    <span>
        <div>
            Mon champ <input type="text" name="Champ1"/><br>
        </div>
    </span>
    <div>
        Texte normal
    </div>
</form>
</body>
</html>

04/12/2008, 12h11
Chatastroff

Oui aussi, mais je préfère mettre pour tout les éléments concerné un style='ma classe'

Sinon la difficulté avec RichFaces est que tout les éléments de style ne sont pas accessibles en css, il faut normalement du xcss (si j'ai bien compris).

Donc... si qqun a déjà utilisé les xcss...