Problème de chemin relatif avec TOMCAT pour mes CSS et images

**hitokiri06** · 09/11/2010, 19h43

Bonjour à tous,

Voila j'ai un souci que je n'arrive pas à résoudre malgré ce que j'ai pu trouver sur le net et dans ce forum.

Je vous pose le context, j'ai un projet Tomcat via eclispe, j'utilise des servlet et Hibernate (lui pour le cas on s'en fiche). Je débute en JEE donc pour l'instant tout est au plus basic, j'ai une jsp, un web.xml, une servlet, un fichier css et une image de fond.

Mon souci que j'avais déjà avec l'ajout de mon fichier CSS dans ma page JSP qui est appelé via une servlet et que mon image de fond ne s'affiche pas. vu tout ce que j'ai put lire, je pense qu'il s'agit tout simplement d'une histoire de chemin.

Pouvez-vous m'aider svp ?

Le web.xml

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="UTF-8"?>
<web-app>
 
	<servlet>
		<servlet-class>com.servlet.Init</servlet-class>
		<servlet-name>index</servlet-name>
	</servlet>
	<servlet>
		<servlet-class>com.servlet.Login</servlet-class>
		<servlet-name>identifier</servlet-name>
	</servlet>
 
	<servlet-mapping>
		<servlet-name>index</servlet-name>
		<url-pattern>/</url-pattern>
	</servlet-mapping>
 
	<servlet-mapping>
		<servlet-name>identifier</servlet-name>
		<url-pattern>/identifier.do</url-pattern>
	</servlet-mapping>
 
</web-app>

La servlet (Init)

Code :

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

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
package com.servlet;
 
import java.io.IOException;
import org.hibernate.HibernateException;
import org.hibernate.Transaction;
import org.hibernate.classic.Session;
import com.hibernate.HibernateUtil;
import com.hibernate.Buildorder;
import java.io.PrintWriter;
import java.util.*;
 
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
/**
 * Init the web application
 * @author Arnaud
 *
 */
public class Init extends HttpServlet {
 
	public void doGet (HttpServletRequest request, HttpServletResponse response)
	throws IOException, ServletException{
 
		try { 
			Session session = (Session) HibernateUtil.currentSession(); 
			// Required to commit modifications
			Transaction tx = session.beginTransaction();
 
			// Send the list of Build Order
			List list = session.find(" from Buildorder");
			request.setAttribute("BuildOrders", list);
 
			HibernateUtil.closeSession(); 
 
		} catch (HibernateException e) { 
			e.printStackTrace(); 
		}
 
		request.getRequestDispatcher("home.jsp").forward(request, response);	
	}
 
}

La JSP (Path: /projectName/home.jsp)

Code :

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

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
 
 
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ page import="com.hibernate.Buildorder,java.util.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 
	<style type="text/css"> <%@ include file="design.css" %> </style>
 
	<title>BO Starcraft 2</title>
</head>
<body>
	<div id="header">
 
	</div>
 
	<div id="menu">
		<div class="element_menu">
			<h3>Member</h3>
			<ul>
				<li ><a href="inscription.jsp">Inscription</a></li>
				<li><a href="vip.jsp">VIP</a></li>
				<li><a href="donate.jsp">Donate</a></li>
			</ul>
		</div>
		<div class="element_menu">
			<h3>Build Order</h3>
			<ul>
				<li><a href="boTerran.jsp">Terran</a></li>
				<li><a href="boZerg.jsp">Zerg</a></li>
				<li><a href="boProtoss.jsp">Protoss</a></li>
			</ul>
		</div>
	</div>
 
	<div id="corps">
		<%  
                        Iterator it = ((List)request.getAttribute("BuildOrders")).iterator(); 
                                  
                        while(it.hasNext()) {
                                          
                                Buildorder build = (Buildorder)it.next(); 
                %>
				<ul>
					<li><%= build.getName()%></li>
				</ul>
 
		<%      } %>
	</div>
 
	<div id="footer">
		@2010 - Web Application JEE & Hibernate
	</div>
 
 
 
</body>
</html>

Le css (Path: /projectName/design.css) où seul le body nous intéresse

Code :

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

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
 
body
{
   width: 1024px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px; 
   background-image: url("img/fond.png");   
}
 
#header
{
   width: 760px;
   height: 100px;
   margin-bottom: 10px;
}
 
#menu
{
   float: left; /* Le menu flottera à gauche */
   width: 150px; /* Très important : donner une taille au menu */
}
 
.element_menu
{
   background-color: #626262;
   border: 2px solid black;
   margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}
 
.element_menu h3 /* Tous les titres de menus */
{    
   margin-left: 5px;
   color: #B3B3B3;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: left;
}
 
.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
   padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}
 
.element_menu a /* Tous les liens se trouvant dans un menu */
{
   color: #B3B3B3;
}
 
.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
   background-color: #B3B3B3;
   color: black;
}
 
#corps
{
   margin-left: 160px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
   padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
 
   color: #B3B3B3;
   background-color: #626262; /* Une couleur de fond pour le corps */
   border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
 
#footer
{
   padding: 5px;
   clear: both;
   text-align: center;
   color: #B3B3B3;
   background-color: #626262;
   border: 2px solid black;
}

et l'image (/projectName/img/fond.png)

Le truc absurde c'est que si je veux accéder à
http://localhost:8080/ProjectName/img/fond.png
J'ai une erreur : Etat HTTP 404 - /ProjectName/img/home.jsp

Suite à ça je décide de modifier temporairement le web.xml

Code :

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

1
2
3
4
<servlet-mapping>
		<servlet-name>index</servlet-name>
		<url-pattern>/</url-pattern>
	</servlet-mapping>

Par

Code :

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

1
2
3
4
<servlet-mapping>
		<servlet-name>index</servlet-name>
		<url-pattern>/nimportequoi</url-pattern>
	</servlet-mapping>

Et là en accédant à http://localhost:8080/ProjectName/img/fond.png, je vois bien mon image. Le plus drôle c'est que en remettant le web.xml d'origine en rechargeant Tomcat via le plugin Eclispe, en accédant à nouveau à http://localhost:8080/ProjectName/ j'ai ma jsp avec l'image de fond. Mais en rechargeant la page l'image disparait.

Donc vous l'aurez compris, je suis vraiment dans l'incompréhension. D'ailleurs cette histoire de chemin m'a "obligé" de changer mon link de CSS dans ma jsp

Code :

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

<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design.css" />

par

Code :

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

<style type="text/css"> <%@ include file="design.css" %> </style>

Car le premier ne fonctionnait pas surement pour les même raisons.

**Lorantus** · 14/11/2010, 19h20

Je vais essayer de pas entrer de le détail, détail... voici.

Le mapping ci-dessous n'est pas correct:

<servlet-mapping>
<servlet-name>index</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>

"/" définit: "le servlet par défaut, si aucun mapping n'est trouvé".

Lorsque tu appels http://localhost:8080/ProjectName/img/fond.png, tu obtiens l'erreur 404 (/ProjectName/img/home.jsp) car Tomcat recherche un mapping pour "/img/fond.png" dans ceux que tu as défini. Le seul qui correspond est "/" (par défaut). Il fait donc une execution du servlet init, dans "/img/" (chemin défini via l'objet request). Comme le servlet init finit par un

Code :

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

request.getRequestDispatcher("home.jsp").forward(request, response);

, Tomcat recherche "home.jsp" dans "/img/", qui ne doit pas exister, du moins à cet emplacement.

Essaye le mapping suivant ("/*" au lieu de "/"):

<servlet-mapping>
<servlet-name>index</servlet-name>
<url-pattern>/*</url-pattern>
</servlet-mapping>

Pour l'erreur que tu décris à la fin, avec

Et là en accédant à http://localhost:8080/ProjectName/img/fond.png, je vois bien mon image. Le plus drôle c'est que en remettant le web.xml d'origine en rechargeant Tomcat via le plugin Eclispe, en accédant à nouveau à http://localhost:8080/ProjectName/ j'ai ma jsp avec l'image de fond. Mais en rechargeant la page l'image disparait.

c'est un probléme de cache avec le navigateur. Replace comme tu as mis avant, en 1er lieu sans le <%@include ...%>, avec le mapping corrigé.

Tu peux renommer ton problème en "Mapping incorrecte, mais pourquoi?"

**hitokiri06** · 16/11/2010, 19h00

Merci le problème venait en effet de là.

Cependant le :

Code :

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

<url-pattern>/*</url-pattern>

Me génére des erreurs à l'infini, j'ai donc utilisé dans le fichier web.xml

Code :

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

1
2
3
4
 
<welcome-file-list>
	<welcome-file>home.jsp</welcome-file>	
</welcome-file-list>

Ce qui fonctionne parfaitement à mes besoins. Je te remercie pour ton aide

Problème de chemin relatif avec TOMCAT pour mes CSS et images

Servlets/JSP Java

Discussions similaires

Partager

Partager