[facelets] non prise en charge des css dans une template

Version imprimable

31/03/2008, 11h51
solawe

[facelets] non prise en charge des css dans une template

Bonjour,

j'utilise les facelets pour appliquer une template a toutes mes pages,l'inclusion est réussie mais le probleme c'est que les styles css de la template ne sont pas appliqués,pourtant j'ai mis les fichier .css sur la meme path que la page template.

j'espere que vous avez une idée.

merci d'avance.

Dans mon template Facelets, j'inclue mes CSS avec ça :
Code:

1 2 <link rel="stylesheet" href="#{facesContext.externalContext.request.contextPath}/.../gloubiboulga.css" />

31/03/2008, 12h18
solawe
merci pour la réponse;

j'ai essayé ta solution mais ça marche toujours pas,je crois que l'erreur viens d'une autre part,car j'obtiens l'execption suivante lors de l'execution de ma page au sein de tomcat:
Code:

1 2 SEVERE: An exception occurred com.sun.facelets.FaceletException: Error Parsing /jspx/AccountProfil/template/default.css: Error Traced[line: 1] Content is not allowed in prolog.
pourtant j'ai bien validé mon fichier .css et les styles s'appliquent parfaitement quand je les appliquent à une page html et je l'ouvre en explorateur sans passer par le serveur.

as tu une idée?
31/03/2008, 12h55
djo.mos

Bonjour,
Montres nous ton template s'il te plaît.

Bonjour,

la tempalte que jutilise et le fichier css sont les suivants:

template:

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- start header -->
<div id="header">
	<form id="search" method="get" action="">
		<fieldset>
		<legend>Search</legend>
		<input id="searchfield" type="text" name="s" value="" />
		<input id="searchsubmit" type="submit" value="Search" />
		</fieldset>
	</form>
 
</div>
<!-- end header -->
<!-- start page -->
<div id="page">
	<!-- start content -->
	<div id="content">
		<div class="post">
			<h2 class="title">
			<ui:insert name="title">
				Default Title
			</ui:insert>
			</h2>
 
 
			<div class="entry">
				<ui:insert name="body">
					Default Body
				</ui:insert>
			</div>
		</div>
 
	</div>
	<!-- end content -->
 
</body>
</html>

le fichier default.css:

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
body {
	margin: 0;
	padding: 0;
	background: #FFFFFF url(images/img01.gif) repeat-x;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #333333;
}
 
form {
	margin: 0;
	padding: 0;
}
 
fieldset {
	margin: 0;
	padding: 0;
	border: none;
}
 
input, textarea {
	font: bold 1.2em "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #333333;
}
 
h1, h2, h3 {
	margin: 0;
	font-weight: normal;
	color: #333333;
}
 
h1 {
	letter-spacing: -1px;
	font-size: 2.6em;
}
 
h2 {
	font-size: 1.8em;
}
 
h3 {
	font-size: 1em;
	font-weight: bold;
}
 
p, ul, ol {
	margin-bottom: 1.6em;
	line-height: 180%;
}
 
p {
}
 
blockquote {
	font-style: italic;
}
 
ul {
}
 
ol {
}
 
a {
	border-bottom: 1px dotted #EFEFEF;
	text-decoration: none;
	color: #356AA0;
}
 
a:hover {
	text-decoration: none;
	color: #CC0000;
}
 
small {
}
 
hr {
	display: none;
}
 
img {
	border: none;
}
 
img.left {
	float: left;
	margin: 0 15px 0 0;
}
 
img.right {
	float: left;
	margin: 0 0 0 15px;
}
 
/* Header */
 
#header {
	width: 980px;
	height: 231px;
	margin: 0 auto;
}
 
#header h1 {
	float: left;
	margin-top: 20px;
	padding: 100px 190px 0 0;
	background: url(images/img02.jpg) no-repeat right top;
	text-transform: lowercase;
	letter-spacing: -3px;
	font-size: 4.4em;
}
 
#header h1 span {
	color: #CC0000;
}
 
#header h2 {
	float: left;
	margin: 0 0 0 -190px;
	padding: 160px 0 0 0;
	text-transform: lowercase;
	font-size: 1em;
	font-weight: bold;
	color: #333333;
}
 
#header h2 a {
	color: #333333;
}
 
/* Search */
 
#search {
	float: right;
	width: 300px;
	padding: 150px 0 0 0;
}
 
#search legend {
	display: none;
}
 
#searchfield {
	width: 200px;
}
 
#searchsubmit {
	width: 80px;
}
 
/* Page */
 
#page {
	width: 980px;
	margin: 0 auto;
	padding: 20px 0;
}
 
/* Content */
 
#content {
	float: right;
	width: 650px;
}
 
.post {
	padding: 12px 50px;
	background: url(images/img04.jpg) no-repeat;
}
 
.post .title {
	letter-spacing: -1px;
	font-size: 2.4em;
	color: #356AA0;
}
 
.post .meta {
	margin: 0 0 20px 0;
	padding: 0 0 20px 0;
	border-bottom: 1px solid #EFEFEF;
	line-height: normal;
	color: #666666;
}
 
/* Sidebar */
 
#sidebar {
	float: left;
	width: 300px;
}
 
#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
 
#sidebar li {
	margin-bottom: 20px;
	padding: 20px 40px;
	background: url(images/img03.jpg) no-repeat;
}
 
#sidebar li ul {
	line-height: 2em;
}
 
#sidebar li li {
	margin: 0;
	padding: 0;
	background: none;
	border-bottom: 1px solid #EFEFEF;
}
 
#sidebar h2 {
	margin-bottom: 10px;
	text-transform: lowercase;
	letter-spacing: -1px;
	color: #CC0000;
}
 
#sidebar a {
	border: none;
}
 
/* Footer */
 
#footer {
	clear: both;
	padding: 30px 0;
	border-top: 10px solid #DDDDDD;
	background: #EFEFEF;
}
 
#footer p {
	margin: 0;
	padding: 10px 0 0 0;
	text-align: center;
	line-height: normal;
}

merci

02/04/2008, 12h02
mehdi_d

Bonjour tout le monde,
J ai rencontré le même problème de non prise en compte de mes fichiers css par les facelets. Et à ce que je vois il n'y a pas eu de réponse à ce topic. Peut etre que quelqu'un à déjà confronté le même problème.
Si quelqu'un à une proposition, je suis preneur.
02/04/2008, 13h38
solawe

oui megdi,d'ailleurs moi aussi je suis toujours bloquée ç ce niveau :cry:
02/04/2008, 14h07
mehdi_d

Je ne sais pas si vous avez déjà essayé, mais c'est le même problème avec des fichiers javascript ou mêmes des images !!
à chaque fois que je veux utiliser un fichier externe, il y a ce problème.
On dirait qu'il veut parser le fichier en question??!!

Des fois l'exception qui me remonte est :
com.sun.org.apache.xerces.internal.impl.io.MalformedByteSequenceException: Invalid byte 1 of 1-byte UTF-8 sequence.

Je suis nouveau en Facelets, et je ne comprends pas trop ce que ce message d'erreur veut dire!!
04/04/2008, 12h14
mehdi_d

Bonjour,
Solawe, Je crois avoir trouvé une solution (deux en fait), en tt cas, ça ùmarche très bien sur mon projet:
Pour déclarer tes fichiers css, il y a deux manières :
-soit que tu utilises <link rel="stylesheet" type="text/css" href="${facesContext.externalContext.requestContextPath}/style/style.css" /> , (dans ce cas je mets mon style.css à l'intérieur d'un répertoire "style" qui est au mm niveau que mes pages jspx, donc à toi de t adapter ;)).
-soit que tu utilises les librairies Tomahawk du projet myfaces de apache, et tu déclares ton css par : <t:stylesheet path="/style/style.css"/>, ce qui permet de ne pas trainer la longue chaine de caractère partt.

Pour les images, il n'y a que la première solution qui marche (en tt cas, c 'est la seule que j'ai trouvé).

J espère que cela te permettra de résoudre ton problème aussi.
Bonne chance.
04/04/2008, 12h47
solawe

Bonjour mehdi,

merci de m'avoir communiquer la solution,je vais la tester tout de suite et je te reponderai.;)
04/04/2008, 13h14
solawe

:( ça marche pas chez moi,j'ai essayé la 1ere solution mais ça marche pas.

dis moi,ton template est en quel format? moi j'utilise une template en .html.

est ce que tu reference les stylesheet dans toutes tes pages .jspw ou juste dans la page template.

merci pour ton retour rapide.
04/04/2008, 15h51
mehdi_d

Toutes mes pages (template inclus) sont en format jspx. Je ne suis pas sur que ça marche avec des pages html, essaie plutot avec du xhtml (c'est le format que tu as déclaré normalement dans ton web.xml comme DEFAULT_SUFFIXE, moi j ai déclaré le .jspx)
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.jspx</param-value>
</context-param>
Je ne crois pas que les Facelets puissent agir sur des pages html !! (peut etre que je dis une betise); essaies avec du html.
Tiens moi au courant ;)
04/04/2008, 16h24
solawe

yeeesss!!!:yaisse2:

oui tu as raison,ça marche pas avec du html,j'ai converti la template en .jspx et ça marche tres bien mnt,

merci infiniment pour l'aide,c'est tres gentil de ta part :)