How can I make my JSF project find my css file?

Question

I have a css file in this directory:

D:\JavaProjects\MyGuessNumber\web\resources\css\bootstrap.css

And in my index.xhtml file I have:

<h:outputStylesheet library="css" name="bootstrap.css" />

When I run this application as:

localhost:8080/MyGuessNumber

the css file loads just fine.

When I use:

http://localhost:8080/MyGuessNumber/faces/index.xhtml

the css is still there.

But when I do:

http://localhost:8080/MyGuessNumber/index.xhtml

the page loads, but no css? How I can I make this work?

Edit: I am using: /faces/*

@LuiggiMendoza I could not make it work. ( I am just learning. ) — Koray Tugay, Mar 03 '13 at 21:45
Add the `*.xhtml` mapping, clean and build your project and redeploy it. — Luiggi Mendoza, Mar 03 '13 at 21:46
There's a great example in [StackOverflow JSF wiki](http://stackoverflow.com/tags/jsf/info). Try that. By the way, I already added a comment in a previous question explaining this. — Luiggi Mendoza, Mar 03 '13 at 21:48
You should first understand how servlets work. This is well explained in [StackOverflow Servlets wiki](http://stackoverflow.com/tags/servlets/info). Once you understand how the Servlet and URL mapping works, then you will understand how to set up the URL mapping for `FacesServlet` (yes, this is in the end a Servlet). — Luiggi Mendoza, Mar 03 '13 at 21:57
This is very interesting: http://localhost:8080/MyGuessNumber/javax.faces.resource/bootstrap.css.xhtml?ln=css — Koray Tugay, Mar 03 '13 at 22:15

score 1 · Answer 1 · answered Mar 03 '13 at 23:07

Without /faces/, this URL:

http://localhost:8080/MyGuessNumber/index.xhtml

Will not be processed by:

<servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
</servlet>

Because you have specify in the web.xml file:

<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
</servlet-mapping>

JSF2 does not generate the HTML from:

<h:outputStylesheet name="css/bootstrap.css" />

Even if you write code in your page index.xhtml, it will not be executed I think.

score 0 · Answer 2 · answered Mar 03 '13 at 23:44

0

You can make it work by adding below in your index.html,

<link rel="stylesheet" type="text/css" href="/resources/css/bootstrap.css"/>

answered Mar 03 '13 at 23:44

Avinash Singh

2 Answers2