Liaison entre servlet et page HTML

**mdh12** · 07/03/2011, 19h17

salut,

mon but est gérer un statistique selon des donnes récupérer d'après un fichier .xml

j'ai un code qui tourne et qui affiche un statistique sous forme camembert

dans une page html

voila le code de la page stat.html

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
78
79
 
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Mon exemple Example</title>
 
 
 
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript" src="../js/highcharts.js"></script>
 
 
		<script type="text/javascript" src="../js/modules/exporting.js"></script>
 
 
 
		<script type="text/javascript">
                
                        var chart;
                        $(document).ready(function() {
                                chart = new Highcharts.Chart({
                                        chart: {
                                                renderTo: 'container',
                                                plotBackgroundColor: null,
                                                plotBorderWidth: null,
                                                plotShadow: false
                                        },
                                        title: {
                                                text: 'Browser market shares at a specific website, 2010'
                                        },
                                        tooltip: {
                                                formatter: function() {
                                                        return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
                                                }
                                        },
                                        plotOptions: {
                                                pie: {
                                                        allowPointSelect: true,
                                                        cursor: 'pointer',
                                                        dataLabels: {
                                                                enabled: true,
                                                                color: '#000000',
                                                                connectorColor: '#000000',
                                                                formatter: function() {
                                                                        return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
                                                                }
                                                        }
                                                }
                                        },
                                    series: [{
                                                type: 'pie',
                                                name: 'Browser share',
                                                data: [
                                                        ['Firefox',   45.0],
                                                        
                                                        {
                                                                name: 'Chrome',    
                                                                y: 12,
                                                                sliced: true,
                                                                selected: true
                                                        },
                                                       ['Others',  43 ]
                                                        
                                                ]
                                        }]
                                });
                        });
                                
                </script>
 
	</head>
	<body>
 
		<!-- 3. Add the container -->
		<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
 
 
	</body>
</html>

bien sur je met sous mon projet les fichier exporting.js ,highcharts.js

mais mon but est créer une servlet grâce a cette servlet je peux récupérer

les donnés qui sont stockés dans fichier .xml

je vous donne un exemple de fichier xml qui je dois le parser pour extraire les donnes

fichier test.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
<?xml version="1.0" encoding="UTF-8"?>
<applications>
   <application id="1">
      <nom>fireFox</nom>
      <occupation>45%</occupation>
   </application>
 
    <application id="2">
      <nom>Chrome</nom>
      <occupation>12.8%</occupation>
   </application>
 
 
 
</applications>

donc dans la servlet en principe je dois écrire le code java grâce lequel je dois parcourir le fichier test.xml

j'ai une idee sur le code java qui sert a parcourir le fichier .xml et extraire le donnes dans mon cas je dois extraire : Firefox 45
Chrome 12,8

la valeur de other dois être calculer automatique en faire la différence (100-(45+12))

le but est connaitre la structure final de la servlet nommé par exemple : testServlet.java

et comment avoir la relation avec le fichier stat.html

pour que les donnes par exemple ['Firefox', 45.0] seront remplir automatique c a dire le nom :firefox doit être rempli automatique grâce au fichier test.xml :<nom>fireFox</nom>

de même pour la valeur 45

donc a mon avie je dois avoir un changement dans le fichier stat.html pour que je peux remplir les valeurs de manière automatique

aussi le fichier testServlet.java dois être écrit de manière a qu'il puisse parcourir le fichier test.xml et extraire les donnes nécessaire

j'espère qui j'arrive a simplifier le problème et l'objectif attendue

merci d'avance

**noOneIsInnocent** · 07/03/2011, 23h13

Bonsoir

Tout d'abord tu peux découper ton application en couche

-Ta servlet qui va servir de contrôleur et qui va appeler une classe ChartBuisness qui va se charger de parser ton fichier XML et renvoyer un objet que tu vas afficher

Après comme le contenu de ta page est dynamique, il va falloir que tu passes du HTML aux JSP, à moins que tu n'utilises de l'AJAX. Mais dans ton cas je ne pense pas que soit adéquat

Une fois que t'as servlet à reçu le résultat du parsing du fichier XML, tu mets le résultat dans ta request et tu l'affiches dans ta JSP

**mdh12** · 08/03/2011, 13h54

merci pour ta réponse

je travail avec ton principe

vraiment j'essaye de simplifier le chose mais reelement je travail avec le fichier

.xhtml

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
78
79
80
81
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<head>
<title>page test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Mon exemple Example</title>
 
 
 
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript" src="../js/highcharts.js"></script>
 
 
		<script type="text/javascript" src="../js/modules/exporting.js"></script>
 
 
 
		<script type="text/javascript">
                
                        var chart;
                        $(document).ready(function() {
                                chart = new Highcharts.Chart({
                                        chart: {
                                                renderTo: 'container',
                                                plotBackgroundColor: null,
                                                plotBorderWidth: null,
                                                plotShadow: false
                                        },
                                        title: {
                                                text: 'Browser market shares at a specific website, 2010'
                                        },
                                        tooltip: {
                                                formatter: function() {
                                                        return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
                                                }
                                        },
                                        plotOptions: {
                                                pie: {
                                                        allowPointSelect: true,
                                                        cursor: 'pointer',
                                                        dataLabels: {
                                                                enabled: true,
                                                                color: '#000000',
                                                                connectorColor: '#000000',
                                                                formatter: function() {
                                                                        return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
                                                                }
                                                        }
                                                }
                                        },
                                    series: [{
                                                type: 'pie',
                                                name: 'Browser share',
                                                data: [
                                                        ['Firefox',   45.0],
                                                        
                                                        {
                                                                name: 'Chrome',    
                                                                y: 12,
                                                                sliced: true,
                                                                selected: true
                                                        },
                                                       ['Others',  43 ]
                                                        
                                                ]
                                        }]
                                });
                        });
                                
                </script>
 
	</head>
	<body>
 
		<!-- 3. Add the container -->
		<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
 
 
	</body>

mais vous remarquer que les donnes sont au niveau de javascript

donc la résolution de problème est en principe de la même

je travail avec jsf et je configure le fichier faces-config.xml et je créer un fichier contoller.java qui contient des méthodes qui sert a donner des condition de navigations de page vers une autre page

mon code tourne mais le probleme comme je vous dite est que dois contient le fichier testServlet.java pour qu'il puisse parser le fichier test.xml

et extraire les donner ces donnes sont les mêmes donnes dans le fichier stat.xml c'est à dire dois être remplis de la même maniéré que je déjà vous donne dans ma premier question

**noOneIsInnocent** · 08/03/2011, 14h13

Il faut procéder par étape
Est-ce que tu as déjà écris la classe Java qui va parser le fichier stats.xml et qui va rendre un objet que tu sauras interpréter dans ta JSP ?
Si ce n'est pas le cas commence par ça

Si tu l'as déjà fait est-ce que tu as déjà écris ta servlet qui va appeler ta classe qui parse le ficher ?

classe StatsParser

Code :

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

1
2
3
4
5
6
7
8
 
class StatParser {
 
//ici ta méthode qui va parser ton fichier XML
public Result getListOfStats(){
 
}
}

Servlet ChartServlet

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
 
 
class ChartServlet extends ...{
 
doGet(...){
 
StatParser.getListOfStats();
//tu mets en request le résultat de ta ligne dessus 
}
 
doPost(...){
 
 
}
}

**mdh12** · 08/03/2011, 16h00

j'arrive à erire la classe java qui sert à parcourir le fichier .xml et elle est correcte

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
 
import java.io.*;
import org.jdom.*;
import org.jdom.output.*;
 
public class Test
{
   //Nous allons commencer notre arborescence en créant la racine XML
   //qui sera ici "applications".
   static Element racine = new Element("applications");
 
   //On crée un nouveau Document JDOM basé sur la racine que l'on vient de créer
   static org.jdom.Document document = new Document(racine);
 
   public static void main(String[] args)
   {
      //On crée un nouvel Element application et on l'ajoute
      //en tant qu'Element de racine
      Application application = new Application("application");
      racine.addContent(application);
 
      //On crée un nouvel Attribut nombre et on l'ajoute à l'application
     //grâce à la méthode setAttribute
      Attribute nombre = new Attribute("nombre",45);
      application.setAttribute(nombre);
 
      //On crée un nouvel Element nom, on lui assigne du texte
      //et on l'ajoute en tant qu'Element d'lapplication
      Element nom = new Element("nom");
      nom.setText("firefox");
      application.addContent(nom);
 
      //Les deux méthodes qui suivent seront définies plus loin dans l'article
      affiche();
      enregistre("Test1.xml");
   }
 
   static void affiche()
   {
      try
      {
         //On utilise ici un affichage classique avec getPrettyFormat()
         XMLOutputter sortie = new XMLOutputter(Format.getPrettyFormat());
         sortie.output(document, System.out);
      }
      catch (java.io.IOException e){}
   }
 
   static void enregistre(String fichier)
   {
      try
      {
         //On utilise ici un affichage classique avec getPrettyFormat()
 
         XMLOutputter sortie = new XMLOutputter(Format.getPrettyFormat());
 
         //Remarquez qu'il suffit simplement de créer une instance de FileOutputStream
         //avec en argument le nom du fichier pour effectuer la sérialisation.
 
         sortie.output(document, new FileOutputStream(fichier));
      }
      catch (java.io.IOException e){}
   }
}

voila un exemple de fichier .xml

Code :

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

1
2
3
4
5
6
<?xml version="1.0" encoding="UTF-8"?>
<applications>
  <application nombre=45>
    <nom>firefox</nom>
  </application>
</applications>

merci de m'aider à compléter le code de la servlet

**noOneIsInnocent** · 08/03/2011, 17h00

La servlet ne sert que de controller
Elle ne fait que appeler la partie business et appeler la bonne page
donc soit le chargement du fichier XML se fait mal et là redirection vers page d'erreur
sinon redirection vers page JSP d'affichage du rendu

Liaison entre servlet et page HTML

Servlets/JSP Java

Vue hybride

Discussions similaires

Partager

Partager