[Facelets] Bouton & CSS

**maloups** · 12/06/2007, 13h51

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 !

**djo.mos** · 12/06/2007, 15h27

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

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

!
Encore une autre : Facelets est une technologie de présentation, et elle est différente du JSP

!

Sinon, pour répondre à ta question, voici comment on doit procéder :

Inclure le CSS dans ton template

Code :

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

1
2
3
4
5
<head>
<title>XXXXX</title>
<link   href="#{facesContext.externalContext.requestContextPath}/tonCheminAPartirDeLaRacine/tonFichierCSS.css"
    rel="stylesheet" type="text/css" />
</head>

Appliquer le style au commandButton
Code : Sélectionner tout - Visualiser dans une fenêtre à part
```
<h:commandButton action="XXX" value="YYY"  styleClass="tonStyleCSS"/>
```

Voilou voila !
Bonne chance et

pour l'utilisation de Facelets : cette technologie est géniale !

**maloups** · 12/06/2007, 16h45

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 :

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

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

2- Dans mon template :

Code :

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

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 :

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

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 !!!!

**maloups** · 22/04/2008, 09h13

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

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

)

1- Voila ce que j'ai mis dans mon 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
 
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 :

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

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 :

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

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

**romaintaz** · 22/04/2008, 09h39

Je dirais plutôt ça, non ?
<h:commandButton styleClass="bouton" .../>

**maloups** · 22/04/2008, 11h37

lol

Les deux fonctionnent

Mais ta solution a l'avantage d'être plus standard JSF

**solawe** · 23/04/2008, 12h23

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 :

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

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

??

car moi j'utilise le link rel:

Code :

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

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

[Facelets] Bouton & CSS

JSF Java

Vue hybride

Discussions similaires

Partager

Partager