[Facelets] Bouton & CSS

Version imprimable

12/06/2007, 13h51
maloups

[Facelets] Bouton & CSS

Bonjour tout le monde !

J'utilise actuelement Facelets pour gérer les templates dans mon appli J2EE et on peut dire que ca fonctionne plutot bien... A l'exception d'un petit soucis : J'ai bo éplucher la toile, je n'arrive pas à appliquer un style qui serait présent dans mon CSS à mes tag <h:commandButton...>.
Mon fichier CSS fonctionne très bien avec mon template, mais des qu'il s'agit de modifier le style d'un des composants JSF présent dans mes pages JSP... AyAyAye !

Si quelqu'un avais une petite idée du pourquoi du comment je pourrai résoudre ce problème, je lui en serait très reconnaissant !!

Merci d'avance !
12/06/2007, 15h27
djo.mos
Bonjour.
T'aurais du fournir un exemple de comment tu appliques le style CSS sur ton bouron au lieu de nous laisser potager dans le noir :aie:
Autre chose : Facelets est utilisé avec JSF, et il y'a un forum JSF un peu plus haut où ta question serait mieux placée :aie: !
Encore une autre : Facelets est une technologie de présentation, et elle est différente du JSP :aie: !

Sinon, pour répondre à ta question, voici comment on doit procéder :
1. Inclure le CSS dans ton template
  Code:
  
  1 2 3 4 5 <head> <title>XXXXX</title> <link href="#{facesContext.externalContext.requestContextPath}/tonCheminAPartirDeLaRacine/tonFichierCSS.css" rel="stylesheet" type="text/css" /> </head>
2. Appliquer le style au commandButton
  
  Code:
  
  <h:commandButton action="XXX" value="YYY" styleClass="tonStyleCSS"/>
Voilou voila !
Bonne chance et :king: pour l'utilisation de Facelets : cette technologie est géniale !
12/06/2007, 16h45
maloups
Merci Modjo pour ta reponse

Je n'ai pas mis d'exemple de mon code car je partait de rien donc autant ne rien mettre plutot que de mettre du vent....
C'est vrai que facelet est fait pour le JSF, mais mon probleme n'avais pas l'air de venir de JSF mais plus d'un probleme de CSS... C'est pas evident de trouver le forum le plus adapté.... J'essaierai de faire plus adapté la prochaine fois.

En tout cas, y'a toujours un truc qui cloche...
1- Voila ce que j'ai mis dans mon CSS :
Code:

1 2 3 4 5 6 7 .bouton { border-width: 2pt ; font-size: 16pt ; color: red; background-color: #F5DEB3 ; }
2- Dans mon template :
Code:

1 2 3 4 5 6 <head> <title>Facelets: Template exemple</title> <link href="#{facesContext.externalContext.requestContextPath}/style.css" rel="stylesheet" type="text/css" /> </head>
3- Dans ma page JSF :
Code:

1 2 <input styleClass="bouton" jsfc="h:commandButton" type="submit" id="onlyButton" action="#{Upload.fmUpload}" value="Envoyer ce fichier"/>
A la base, ca n'as pas l'air vraiment compliqué, mais là, j'avoue que je sèche...
Mon bouton ne ressemble à rien, il y a juste la valeur du bouton ecrit en noir qui apparait a l'ecran, sans bordure, ni rien qui puisse ressembler a un bouton (même s'il fonctionne très bien....)

Toute idée est la bienvenue !!!!

Même si ca fait bien longtemp, comme maintenant tout cela fonctionne, je laisse une solution, ca pourra toujours servir à quelqu'un :mrgreen:

(Tout ca pour avoir des boutons pas beaux à la windows 98 :king: )

1- Voila ce que j'ai mis dans mon CSS :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 input.bouton { font-size: 11px; height: 17px; border-top: 1px solid #f8f9ff; border-left: 1px solid #ebecf5; border-bottom: 1px solid #7f7f86; border-right: 1px solid #a2a3ab; background-color: #c6c7d0; padding-left: 4px; padding-right: 2px; margin-bottom: 1px; overflow: visible; }
2- Dans mon template :
Code:

1 2 3 <t:stylesheet path="#{facesContext.externalContext.requestContextPath}/../static/css/styleOutils.css" />
(Dans mon projet, mes css se trouvent dans le répertoire WebContent/statit/css)

3- Dans ma page JSF :
Code:

1 2 3 4 5 <h:commandButton class="bouton" id="idMonBouton" value="MonBouton" actionListener="#{monBean.monAction}"> </h:commandButton>
:yaisse2:

22/04/2008, 09h39
romaintaz

Je dirais plutôt ça, non ?
<h:commandButton styleClass="bouton" .../>
22/04/2008, 11h37
maloups

lol

Les deux fonctionnent :mouarf:

Mais ta solution a l'avantage d'être plus standard JSF :king:
23/04/2008, 12h23
solawe
Bonjour,

j'ai exactement le meme probleme, je voulais savoir est ce que t'etais obligé de référencer ton fichier de style css par le tag de tomahawk
Code:

1 2 <t:stylesheet path="#{facesContext.externalContext.requestContextPath}/../static/css/styleOutils
??

car moi j'utilise le link rel:
Code:

1 2 <link rel="stylesheet" type="text/css" href="${facesContext.externalContext.requestContextPath}/template/default.css" />
et ça marche pas.

merci beaucoup d'avoir posté ta solution