0

I developed a dynamic web project, with maven, jsf and richfaces. I omit the history, straight to my problem. After not so long break with development, I stated my project in Eclipse->Tomcat. And on my starting page there are images and simple login form. Images and design is OK, due address http://localhost:8080/myapp/ (links to images and css is like - myapp/img/header.png)

after logging I redirected to landing page (which is richfaces dynamic page) http://localhost:8080/myapp/faces/statistics.xhtml and all links to images and css converts to myapp/faces/img/header.png and after that no images and css.

I confused, what's going on? a couple days ago it worked perfect.

in web.xml i have this

<servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
  </servlet-mapping>
    <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.faces</url-pattern>
  </servlet-mapping>

I even don't know where to start to solve my problem. How return images to design?

Update

I have found that this unpleasant behavior resides in my layout.xhtml only. Because only this file which I didn't create. It's our design for all project, in brief it looks like this:

…
<h:head>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<img src="img/header.png">
… design …
<div class="menuAndContent">
    <div class="menuLeft">
        <ui:insert name="menuLeft" />
    </div>
    <div class="content">
        <ui:insert name="content" />
    </div>
</div>
… design …
<img src="img/selector2.gif">
…

So I create only files for div=content and div=menu. This files works good, all images on them are present.

It's only this layout file is "joking" with me. All links : css/main.css img/header.png img/selector2.gif they work at first step! at address http://localhost:8080/myapp/ and browser.dev.tool shows me that he take this resources from path myapp/css/main.css myapp/img/header.png and when i go deeper http://localhost:8080/myapp/faces/statistics.xhtml, after logging in, I redirects to the same page with different content. And in browser.dev.tool I see the page with this links css/main.css img/header.png img/selector2.gif - it all correct and it is good, BUT the path for take this resources from this ones myapp/css/main.css myapp/img/header.png converted to this ones myapp/faces/css/main.css myapp/faces/img/header.png. that's the problem.

miroque
  • 320
  • 1
  • 5
  • 21
  • whatever you have mentioned `(myapp/img/header.png)` is i suppose absolute path you should have mentioned relative path `("../img.header.png")` – psi Jun 12 '13 at 05:47
  • in all my .xhtml files I'm using relative path `img/header.png` and my first page with login fields uses general template - layout.xhtml which is a general layout for all my pages. this paths shows me browser developer tool, that at first he loads resources from `myapp/img/header.png` and at second step he tries to load from `myapp/faces/img/header.png` – miroque Jun 12 '13 at 06:27
  • 1
    The problem is that you are using both *.faces and /faces/* as url pattern. I suggest you to only use one. – Alexandre Lavoie Jun 12 '13 at 06:49

2 Answers2

1

You should not be using URI-relative URLs in your webapp. 

<link href="css/main.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<img src="img/header.png">

They become relative to the request URI as you see in browser's address bar. If the page is by itself in the /faces folder, then the browser will also download all those URI-relative resources from under that folder.

You should be using context-relative URLs in your webapp.

<link href="#{request.contextPath}/css/main.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="#{request.contextPath}/favicon.ico" type="image/x-icon" />
<img src="#{request.contextPath}/img/header.png">

However, better is to make use of JSF resource management.

<h:outputStylesheet name="css/main.css" />
<link rel="shortcut icon" href="#{resource['favicon.ico']}" type="image/x-icon" />
<h:graphicImage name="img/header.png" />

with those resources in /resources folder.

WebContent
 |-- WEB-INF
 |-- META-INF
 |-- resources
 |    |-- css 
 |    |    `-- main.css
 |    |-- img
 |    |    `-- header.png
 |    `-- favicon.ico 
 :

See also:

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
0

Great thanks to Alexandre Lavoie (I didn't realized the meaning of comment at first sight) my problem resides in web.xml file indeed

The answer is in the question!

<servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
</servlet-mapping>
    <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.faces</url-pattern>
</servlet-mapping>

it's double mapping! It should be only one mapping! So I leave only this

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

and my problem has gone away!

Community
  • 1
  • 1
miroque
  • 320
  • 1
  • 5
  • 21