Affichage d'image dans ma JSP

Version imprimable

14/08/2011, 19h09
abed77

Affichage d'image dans ma JSP

Bonsoir, j'ai un petit problème qui ralentit un peu mon avancement dans mon projet J2EE puisque toute mon application web repose sur l'affichage d'images.
Ma servlet appelle une classe qui se charge de générer un graphe à l'aide de JFreeChart, tout se passe très bien, j'obtiens un graphe dans le répertoire "image" sans aucun problème.Puis ma servlet délègue l'affichage à ma page jsp, mais cette dernière ne m'affiche pas le résultat directement, c'est après des "F5" successifs que j'obtiens mon graphe et ce n'est pas vraiment pratique.
j'espère que j'ai été très clair, et je vous remercie d'avance.
excellente fin de soirée :)
14/08/2011, 19h25
FirePrawn

Bonsoir,

Mets ton code qu'on puisse voir où ça pêche ;)

Bonsoir et merci pour ta réponse.
1- le code da ma classe 'Creer' qui utilise JFreeChart

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
 
 
package Traiter;
 
import java.io.File;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import org.jfree.chart.ChartFactory;
import org.jfree.chart.ChartUtilities;
import org.jfree.chart.JFreeChart;
import org.jfree.data.general.DefaultPieDataset;
 
 
 
 
 
 
public class Creer {
 
    public String dessiner() throws SQLException{
 
        Connection con = new ConnexionBD().createCon();
        String sql ="select dept.dname, count (*) as empno from dept, emp where dept.deptno = emp.deptno group by dept.dname";
        Statement st= con.createStatement();
        ResultSet res = st.executeQuery(sql);
 
        DefaultPieDataset pieDataset = new DefaultPieDataset();
        String a ;
        int b;
        while (res.next()){
            a= res.getString(1);
            b= Integer.parseInt(res.getString(2));
            pieDataset.setValue(a, new Integer(b));
        }
 
        JFreeChart chart = ChartFactory.createPieChart("Employe per Departement",pieDataset, true,true,false);
       File image = new File ("C:\\Documents and Settings\\Administrateur\\Mes documents\\NetBeansProjects\\Emp\\web\\image\\char1.jpg");
       //File image = new File ("web\\image\\char.jpg");
        try {
ChartUtilities.saveChartAsJPEG(image, chart, 500, 300);
} catch (Exception e) {
System.out.println("Problem occurred creating chart.");
}
 
 
 
 
        return image.getName();
    }
 
}

2- Le code de ma servlet 'Test', elle fait appel à ma classe 'Creer' puis cède l'affichage du graphe à une page JSP

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
 
 
package Traiter;
 
 
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
public class Test extends HttpServlet {
 
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException, SQLException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
 
            String image = new Creer().dessiner();
             request.setAttribute("p",image);
                       getServletContext().getRequestDispatcher("/index.jsp")
.forward(request,response);
        } finally {            
            out.close();
        }
    }
 
 
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        try {
            processRequest(request, response);
        } catch (SQLException ex) {
            Logger.getLogger(Test.class.getName()).log(Level.SEVERE, null, ex);
        }
    }
 
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
       // processRequest(request, response);
    }
 
 
    @Override
    public String getServletInfo() {
        return "Short description";
    }// </editor-fold>
}

14/08/2011, 21h47
abed77

RE
3- et enfin ma page JSP, supposée se charger de l'affichage, et c'est là ou réside le problème
Code:

1 2 <IMG SRC="image/<%= request.getAttribute("p") %>"/>
j'aimerais bien le signaler une deuxième fois, mon graphe est généré, il est dans l'emplacement voulu mais l'affichage au niveau de la jsp ne se fait qu'après des "F5" ou bien ré-exécuter le programme tout entier.
Merci encore une nouvelle fois.
17/08/2011, 11h30
abed77

Personne n'a une solution à mon problème ?
il me reste seulement à afficher mon image créée, chose que je n'ai pas su faire et c'est sur cette image que repose tout mon projet, il me reste pas beaucoup de temps pour présenter ma 2ème maquette alors SVP aidez-moi. Je vous demande pas l'impossible tout de même :?
17/08/2011, 14h12
jowo
Bonjour,

Ton problème vient du cache des ressources (images, pages, css, ...) de ton navigateur.

Un solution simple et rapide est d'ajouter un paramètre à l'URL de ton image.
Ce paramètre a une valeur aléatoire. Le navigateur croira qu'une nouvelle ressource est demandée. Et il demandera au serveur cette image au lieu de la charger depuis son cache.

La valeur de ce paramètre peut être la date et l'heure actuelle en milliseconde.
Code:

1 2 <IMG SRC="image/<%= request.getAttribute("p") %>?_=<% (new Date()).getTime() %>"/>
17/08/2011, 16h05
abed77
Citation:
Envoyé par jowo

Bonjour,

Ton problème vient du cache des ressources (images, pages, css, ...) de ton navigateur.

Un solution simple et rapide est d'ajouter un paramètre à l'URL de ton image.
Ce paramètre a une valeur aléatoire. Le navigateur croira qu'une nouvelle ressource est demandée. Et il demandera au serveur cette image au lieu de la charger depuis son cache.

La valeur de ce paramètre peut être la date et l'heure actuelle en milliseconde.

Code:

1 2 <IMG SRC="image/<%= request.getAttribute("p") %>?_=<% (new Date()).getTime() %>"/>
Salut, je te remercie pour ta réponse. J'ai suivi ton conseil à la lettre mais malheureusement ça n'as pas marché :(
Il faut toujours rafraîchir la page pour obtenir l'image voulue.
Je tiens à signaler que je travaille avec chrome, et j'ai essayé sous firefox mais en vain.
Merci encore
17/08/2011, 16h10
jowo

Ça fonctionne chez moi...

J'ai vu une erreur dans le code

Code corrigé

Code:

<IMG SRC="image/<%= request.getAttribute("p") %>?_=<%= (new Date()).getTime() %>"/>

J'espère que tu avais remarqué l'erreur. ;)

L'URL doit être similaire à "image/chart1.jpg?_=12456789100"
17/08/2011, 16h30
abed77
Citation:

Envoyé par jowo

Ça fonctionne chez moi...

J'ai vu une erreur dans le code

Code corrigé

Code:

<IMG SRC="image/<%= request.getAttribute("p") %>?_=<%= (new Date()).getTime() %>"/>

J'espère que tu avais remarqué l'erreur. ;)

L'URL doit être similaire à "image/chart1.jpg?_=12456789100"

même avec ça je dois toujours faire "F5"
Code:

1 2 <IMG SRC="image/<%= request.getAttribute("pathPicture") %>?_=<%= (new Date()).getTime() %>"/>

Bonjour,
j'avais eu le même problème en faisant ça. Je pense qu'il s'agit d'un problème de chargement du fichier nouvellement crée sur ton serveur qui fait que tu essaye de l'afficher avant qu'il soit réellement disponible.

Je n'ai pas trouvé de solution directe, mais j'ai fini par utiliser une autre méthode qui marche pas mal et ne nécessite pas d'écrire le fichier sur disque:
- Ma servlet convertit l'image en tableau de byte puis la stocke dans la session:
Code:

1 2 3 4 5 6 7 ... ByteArrayOutputStream baosTH = new ByteArrayOutputStream(); ChartUtilities.writeChartAsPNG(baosTH, tonObjetChart, 800, 500); byte[] imageEnBytes= baos.toByteArray(); request.getSession().setAttribute("imageEnBytes", imageEnBytes);
- J'ai crée une autre servlet qui renvoie directement ce byte[]:
Code:

1 2 3 4 5 6 7 8 9 10 String nomFichier = request.getParameter("nomFichier"); if(nomFichier!=null){ byte[] image = (byte[]) request.getSession().getAttribute(nomFichier); if(image==null) throw new Exception("L'image demandée n'existe pas!"); response.addHeader("Content-disposition", "filename=\"stats.png\""); response.addHeader("Content-type", "image/png"); response.getOutputStream().write(image); request.getSession().removeAttribute(nomFichier); }
Et enfin pour faire le lien entre les deux, ma première Servlet redirige vers une JSP, qui appelle la servlet GetImage:
Code:

1 2 <img src="GetImage?nomFichier=nomDeTonImage" style="" title="oh, la belle image">
L'inconvénient majeur est le stockage de l'image en session. Si tu le supprime à l'affichage (removeAttribute), normalement ça prend pas trop de place...

17/08/2011, 16h56
abed77

RE

Salut, merci pour cette proposition.
Bon, ce que tu as cité au début de ton post est vraiment logique, c'est ce que je me disais moi aussi :" Ma JSP essaie d'afficher mon image avant même qu'elle ne soit créée". Là on est d'accord.
Concernant ta solution, j'avais pensé à contourner mon problème en utilisant une servlet qui dessine le graphe puis mettre le chemin de cette servlet dans ma jsp et ça fonctionne à merveille. (Les Mises à jours sont appliquées sur l'image de ma jsp)
MAIS MAIS !!!
j'ai voulu ajouter une liste déroulante qui contrôle mon affichage (Salaire des employés par département), alors là je suis coincé, ma liste déroulante exécuté ma servlet indépendamment de ma jsp, du coup on appelle ma servlet et pas ma jsp.
et c'est ça qui m'a obligé à revenir vers la solution citée en haut du post.
Merci et si tu as besoin de voir le code, n'hésite pas à me le demander :)
17/08/2011, 17h57
Jidefix

Une Servlet est techniquement équivalente à une JSP. Tu peux faire avec l'une tout ce que tu pourrais faire avec l'autre (d'une manière différente, mais quand même)

Donc je ne vois pas comment cette distinction peut être bloquante: ta liste déroulante peut appeler une jsp, une servlet qui redirige vers une jsp, ou une servlet qui redirige vers un PNG sous forme de byte[] (comme je t'ai montré), c'est totalement transparent.

Du coup je veux bien voir ton code ;)

1-Servlet :

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
 
public class Serv extends HttpServlet {
 
 
 
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException, SQLException {
 
       Connection con = new ConnexionBD().createCon();
       String t= request.getParameter("dept");
       if (t== null)
           t="ACCOUNTING";
 
     String sql ="select ename,sal from emp, dept where emp.deptno = dept.deptno AND dname ='"+t+"'";
     Statement st= con.createStatement();   
     ResultSet res = st.executeQuery(sql);
 
     DefaultCategoryDataset dataset = new DefaultCategoryDataset(); 
     String a ;
     int b;
    while(res.next()){
         a= res.getString(1);
         b=Integer.parseInt(res.getString(2));
         dataset.setValue(b, "Number", a);
     }      
 JFreeChart chart = ChartFactory.createBarChart("Employés par Location",
"Location", "Number", dataset, PlotOrientation.VERTICAL,
false, true, false);      
 ServletOutputStream out = response.getOutputStream();
        response.setContentType("image/png");
        ChartUtilities.writeChartAsPNG(out, chart, 400, 300);
 
        out.close();
    }

2- et ma JSP :

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
 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
        <title>JSP Page</title>
    </head>
    <body>
        <h1>Employés par location</h1>
 
 
    <form name="form1" action="http://localhost:8084/Emp/Serv" method="POST">
         <select name="dept">
              <option>ACCOUNTING</option>
              <option>RESEARCH</option>
              <option>SALES</option>
              <option>OPERATIONS</option>
 
          </select>
         <input type="submit" name="Valider" />
    </form>
 
 
 
                <img src="http://localhost:8084/Emp/Serv">
    </body>
</html>

Juste une tite modif sur ta jsp:

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
 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
        <title>JSP Page</title>
    </head>
    <body>
        <h1>Employés par location</h1>
 
 
    <form target = "monIFrame" name="form1" action="http://localhost:8084/Emp/Serv" method="POST">
         <select name="dept">
              <option>ACCOUNTING</option>
              <option>RESEARCH</option>
              <option>SALES</option>
              <option>OPERATIONS</option>
 
          </select>
         <input type="submit" name="Valider" />
    </form>
 
 
 
                <iframe src="#" name="monIFrame">
        Votre navigateur ne peut malheureusement pas afficher de cadre incorporé
      </iframe>
    </body>
</html>

Et voila. Ton img est maintenant une iframe qui prendra la valeur renvoyée par ta servlet (à savoir ton image) lors de la validation du formulaire.

17/08/2011, 21h40
abed77

1 pièce(s) jointe(s)

RE

j'ai essayé ta solution, mais quand je lance mon application j'obtiens le résultat dans l'image ci-jointe. Mais quand je choisis un département dans ma liste déroulante on m'affiche le résultat dans mon iframe (voir image2)
il n y a pas un moyen d'afficher une image par défaut et de supprimer les bordures ?
17/08/2011, 21h42
abed77

1 pièce(s) jointe(s)

image2

le résultat après la validation du choix
18/08/2011, 10h00
Jidefix

Bonjour,
pour le formulaire qui se contient lui-même, essaye sans rien mettre dans la src (j'ai jamais compris ça, en général je bidouille jusqu'à ce que ça marche :ccool:)

Code:

<iframe src="" name="monIFrame">

Pour tout ce qui est esthétique je te laisse consulter la doc de la balise:
http://www.w3schools.com/TAGS/tag_iframe.asp

Et si tu veux mettre une image par défaut, il te suffit de la mettre par défaut:

Code:

<iframe src="chemin/vers/ton/image.jpg" name="monIFrame">
19/08/2011, 11h32
abed77

Merci
J'ai fait ça :
Code:

1 2 <iframe frameborder="0" src="http://localhost:8084/Emp/Serv" name="monIFrame" width="400" height="300"></iframe>
et ça marche à merveille. Je te remercie beaucoup parce que tu m'as sauvé la vie :).
Ainsi le problème de la fameuse JSP est résolu !!!