RichFaces - personnalisation des skins

Version imprimable

13/12/2007, 15h02
f.granzo

RichFaces - personnalisation des skins

Hello tout le monde!

J'ai bien cherché sur la doc de RichFaces, mais je n'arrive pas à comprendre comment je peux personnaliser les skins.

Par ex, je veux modifier la taille de la police de l'entête d'un panel. Comment faire?

Merci d'avance de votre aide
14/12/2007, 09h14
romaintaz

Bonjour,

Concernant le rich:panel (mais la logique est la même pour les autres composants), tu as 2 choses à (éventuellement) mettre à jour pour le skinner :

1. Le fichier de skin. Il s'agit d'un fichier de propriétés (maskin.properties) contenant les propriétés de base de ton propre skin (définissant des couleurs par ex.). Pour le panel, onze propriétés sont utilisées (voir chapitre 6.56.8) : generalBackgroundColor, panelBorderColor, headerBackgroundColor, etc.

2. Les classes CSS (voir chapitre 6.56.9) : Chaque partie d'un composant RichFaces dispose de plusieurs classes CSS. Certaines classes sont "forcées" par RichFaces, pour définir les propriétés de base, puis les classes personnalisables, que tu redéfinis pour composer ta propre skin. Dans le cas du panel, les classes CSS sont rich-panel, rich-panel-header et rich-panel-body.

As-tu besoin de plus d'informations ?
17/12/2007, 23h13
f.granzo
Merci pour ta réponse!

Alors pour la solution 1. je ne sais pas où se trouve le fichier?? Est-ce qu'il faut le créer, si oui où?

Pour la solution 2. j'ai essayé comme dans la documentation, càd que j'ai par exemple ajouté cette définition dans ma feuille CSS:
Code:

1 2 3 4 .rich-panel-header{ background-color:#F99; }
Mais rien ne change dans mon composant... Est-ce qu'il faut définir qqc dans le composant pour qu'il prenne en compte ce style?

Merci d'avance de votre précieuse aide...
18/12/2007, 08h43
romaintaz

Bonjour,

#1. Oui, il faut créer le fichier ma.skin.properties. Il s'agit juste d'un fichier properties. Chez moi, il se trouve dans le répertoire src/main/resources (oui, j'utilise Maven 2), et se retrouve, au final, dans le répertoire WEB-INF/classes du WAR créé.

#2. Ca me parait bon. Maintenant, est-ce que tu inclus bien ton fichier CSS dans tes pages JSF (ou JSP) ?
En ce qui me concerne, je les inclue dans mon template de base (il faut utiliser Facelets pour avoir les templates) :

Code:

<link rel="stylesheet" href="#{facesContext.externalContext.request.contextPath}/css/monCss.css" />
18/12/2007, 15h52
f.granzo
Merci de ta réponse. Décidément rien ne va avec cette personnalisation de skins…

#1 : J’ai mis dans web.xml la déclaration suivante :
Code:

1 2 3 4 5 <context-param> <param-name>org.richfaces.SKIN</param-name> <param-value>test.skin.properties</param-value> </context-param>
Et j’ai ensuite créé le fichier test.skin.properties dans le répertoire src… Mais j’obtiens l’erreur suivante :

Citation:

javax.servlet.ServletException: Skin with name test.skin.properties not found

J’ai également essayé de mettre ce fichier dans le répertoire META-INF/skins/ comme conseillé dans la documentation mais rien n’y fait, toujours la même erreur.

#2 : oui j’en suis sûr ! Comme toi j’utilise facelets et j’importe ma css dans la page principale. Je ne comprends vraiment pas pourquoi cela ne fonctionne pas….

As-tu une idée de ce que je pourrais faire de faux ?
18/12/2007, 16h03
romaintaz

Hello,

Mon fichier Skin se trouve dans le WEB-INF/classes. Si tu utilises Maven, place le dans src/main/resources. Sinon, place le à la racine de tes fichiers Java...
18/12/2007, 18h51
f.granzo

Je l'ai bientôt mis partout ce fichier, y compris à la racine de mes fichiers java, mais j'obtiens toujours la même erreur... je sais vraiment plus quoi faire....
19/12/2007, 11h45
Dr@ke
Je m'incruste dans la discussion :p

J'ai un tableau et j'aimerai colorier certaines colonnes d'une couleur differentes.
Voila ce que je fais. Rien ne se produit et je n'arrive pas a trouver d'ou provient l'erreur :

Code:

<rich:column styleClass="sdt_col" >

avec dans le CSS :
Code:

1 2 3 4 5 .sdt_col { background-color:#FF0000; }
Le style.css est place a la racine du WebContent, et dans le template.xhtml j'ai :
Code:

1 2 3 4 5 6 <head> <link rel="stylesheet" href="/style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> ...
Je suppose que le fait de definir une variable dans le css de cette maniere n'est pas correcte..

To change styles of particular <rich:column> components, define your own style classes in the corresponding <rich:column> attributes.

Merci pour l'aide ;)
20/12/2007, 10h22
Dr@ke

L'erreur provenait du chemin du Css, pourquoi dois-je mettre

Code:

#{facesContext.externalContext.request.contextPath}

?

Et non pas le chemin absolu du fichier css ?

Merci :p