JSF/Facelet images disparaissent après action

**chriscoolletoubibe** · 18/03/2010, 17h10

Bonjour, j'ai un petit problème avec ma configuration de projet.

J'utilise Facelet JSF 1.2 et RichFaces.

J'ai configuré mon WEB.xml de la manière suivante:

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
 
 <context-param>
        <param-name>org.richfaces.LoadScriptStrategy</param-name>
        <param-value>ALL</param-value>
    </context-param>
    <context-param>
        <param-name>facelets.BUILD_BEFORE_RESTORE</param-name>
        <param-value>false</param-value>
    </context-param> 
    <context-param>
        <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
        <param-value>.xhtml</param-value>
    </context-param>
    <context-param>
        <param-name>com.sun.faces.verifyObjects</param-name>
        <param-value>false</param-value>
    </context-param>
    <context-param>
        <param-name>com.sun.faces.validateXml</param-name>
        <param-value>true</param-value>
    </context-param>
    <context-param>
        <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
        <param-value>server</param-value>
    </context-param>
    <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>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>faces/pages/accueil.xhtml</welcome-file>
    </welcome-file-list>
    <filter>
        <display-name>RichFaces Filter</display-name>
        <filter-name>richfaces</filter-name>
        <filter-class>org.ajax4jsf.Filter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>richfaces</filter-name>
        <servlet-name>Faces Servlet</servlet-name>
        <dispatcher>REQUEST</dispatcher>
        <dispatcher>FORWARD</dispatcher>
        <dispatcher>INCLUDE</dispatcher>
    </filter-mapping>

Ma page d'accueil charge très bien. Voici son code :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 
    <ui:composition template="/templates/template.xhtml"  xmlns="http://www.w3.org/1999/xhtml"
                    xmlns:h="http://java.sun.com/jsf/html"
                    xmlns:f="http://java.sun.com/jsf/core"
                    xmlns:ui="http://java.sun.com/jsf/facelets"
                    xmlns:rich="http://richfaces.org/rich"
                    xmlns:a4j="http://richfaces.org/a4j"
                    xmlns:pe="http://www.proximeo.com/taglib">
 
        <ui:define name="connexionBox">
            <h:form>
            <a onclick="Richfaces.showModalPanel('subscriptionPanel');" href="#">Show ModalPanel</a>
            </h:form>
            <h:form>
                <table class="box" width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td class="box-top-left"/>
                        <td class="box-top"/>
                        <td class="box-top-right"/>
                    </tr>
                    <tr>
                        <td rowspan="5" class="box-left"/>
                        <td>
                            <pe:inputTextArea name="test" title="email" value="votre@email.ici" size="17"/>
                        </td>
                        <td rowspan="5" class="box-right"/>
                    </tr>
                    <tr>
                        <td>
                            <pe:inputPasswordArea name="pass" title="website password" value="********" size="17"/>
                        </td>
                    </tr>
                    <td class="box-content-c">
                        <h:commandLink action="accueil">Mot de passe oublié?</h:commandLink>
                    </td>
                    <tr>
                        <td class="box-content-c" align="center">
                            <pe:button id="connect1" size="70" value="Connexion" action="" align="center" 
                                       srcImageUp="pictures/ihm/button/fr/button-connection-up.jpg" srcImageDown="../pictures/ihm/button/fr/button-connection-down.jpg"/>
 
                        </td>
                    </tr>
                    <tr>
                        <td class="box-content-c">
                            <a onclick="displayConnexionForm();">Pas encore de compte?</a>
 
                        </td>
                    </tr>
                    <tr>
                        <td class="box-bottom-left"/>
                        <td class="box-bottom"/>
                        <td class="box-bottom-right"/>
                    </tr>
                </table>
            </h:form>
 
        </ui:define>
 
        <ui:define name="content">
 
 
 
        </ui:define>
 
    </ui:composition>
 
</html>

Mon soucis, c'est quand je change de page je perd toutes mes images:

voici le chemin de l'image avant clique:
localhost:8080/MonProjet-war/pictures/ihm/title.jpg

et voici le chemin de l'image après clique
localhost:8080/MonProjet-war/faces/pages/pictures/ihm/title.jpg

Si je change dans ma page les chemins des images et que je les fait précéder de "../../ " les images chargeront correctement après l'action, mais pas lors du chargement initial.

Mon problème doit être assez con, mais je bloque. Quelqu'un à une solution?

**Chritofff** · 19/03/2010, 10h25

Salut Christophe,

Pour accéder à une page JSF, il y a 2 possibilitées...

Soit tu dois avoir le répertoire /faces/* dans ton projet
comme dans ton exemple :

Code :

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

1
2
3
4
5
 
     <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>

Soit tu définis un type d'extension. exemple : .faces
Comme ceci :

Code :

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

1
2
3
4
5
 
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.faces</url-pattern>
    </servlet-mapping>

Je te conseil d'utiliser la 2éme solution ...

**Sniper37** · 19/03/2010, 10h47

Il faut mettre les images avec un lien relatif '../folder/image.png' .
et pour la page d'accueil il faut lancer une page jsf pas une jsp ou xhtml, ta première pas ne passe pas par JSF.
pour celà un petit coup d'oeil sur la

pour lire la réponse.