Liaison entre servlet et page HTML

Version imprimable

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:

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:

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

07/03/2011, 23h13
noOneIsInnocent

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

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:

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

08/03/2011, 14h13
noOneIsInnocent
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:

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:

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(...){ } }

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

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
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:

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

08/03/2011, 17h00
noOneIsInnocent

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
08/03/2011, 18h59
mdh12

vous dite qu'une fois que ma servlet a reçu le résultat du parsing du fichier XML, je met le résultat dans ma request et je l'affiches dans ma JSP (dans mon cas fichier xhtml)

mais le problème est comment avoir une relation entre le résultat récupérer après parser le fichier .xml et mettre cette valeur dans le fichier .xhtml dans la place correspondante

par exemple si je récupère de fichier .xhtm les valeurs suivantes

comme nom :firefox et comme nombre la valeur 45 donc je dois mette dans la partie de javascript les donnes juste ['Firefox', 45.0]

et celle ci se fait de manière dynamique a chaque chargement de la servlet

elle parcoure le fichier .xml et récupéré les données et enregistre ces

donnés dans la page .xhtml donc si je résume moi comme utilisateur j'ai par exemple un formulaire qui contient un bouton et quand je clique sur ce bouton

il m'affiche un autre formulaire qui contient le statistique et celle ci comme j'ai deja dis dois se fait de manière dynamique

si je change par exemple le contenu de fichier .xml le graphe dois se changer

j'espère que j'arrive à expliquer le problème
09/03/2011, 09h01
mdh12

je suis vraiment bloqué dans cette étape,

juste je cherche une idée pour que je puisse mettre les valeurs dans le fichier .xhtml

et exactement dans cette étape dans la partie javascript ['Firefox', 45.0],

et ceci grâce à une servlet

Ce que je peux te conseiller c'est de faire du JSON
Je pense que ça peut être adapté pour toi

En gros tu déclares ta servlet dans ton fichier web.xml (tu trouveras facilement de la doc pour savoir comment faire)
Ensuite dans ta page html tu fais un formulaire avec un bouton submit
Code:

1 2 3 4 5 6 7 8 9 10 <servlet> <servlet-name>TestServlet</servlet-name> <servlet-class>monpackage.TestServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>TestServlet</servlet-name> <url-pattern>TestServlet/*</url-pattern> </servlet-mapping>
Code:

1 2 3 4 <form action="TestServlet" method="POST"> <input type="submit" value ="Rafraichir" /> </form>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 class TestServlet extends ....{ @override doGet(....){ doPost(); } @override doPost(...){ //ici tu appelles ta classe Test que tu transformes en objet JSON //puis tu renvois vers ta page } }
pour JSON il y a plein de tutoriel à ce sujet

merci encore fois pour vos réponses

mais pouvez m'aidez à savoir le changement que je dois faire dans le fichier .xhtml

je parle de ce fichier

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
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>

pour le donnes par exemple

Code:

1
2
 
['Firefox',   45.0]

seront inserer d'une maniere automatique

je ponse d'apres le fichier ChartServlet

09/03/2011, 14h36
noOneIsInnocent

voici un lien avec un exemple de ce que tu dois mettre dans ta servlet et dans JSP

http://java-x.blogspot.com/2007/04/u...from-java.html

cette exemple traire JSON mais moi je travail avec fichier .xml

mais est ce que je peux utiliser le même principe que JSON

mais vraiment le statistique qui sera afficher grâce a ce fichier répond a mon besoin

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
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>

seulement le probleme comme j'ai daja dis comment recuperer les donnes d'apres ce fichier par exemple

Code:

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

juste si vous avez une idée sur la contenu de la servlet pour cet exemple qui a mon avis fait appel a une classe java qui sert a parser le fichier .xml pour recuperer les donnes nécessaires sous forme d'objet ou qu'on dois écrire le code lui même pour le traitement de fichier .xml dans la servlet

10/03/2011, 18h32
mdh12

juste une idée sur le contenue de la servlet et dans mon cas je suis obligé de travailler avec fichier .xml pas avec json

désole peux être je vous donne un code java erroné pour parser le fichier .xml

voila un code qui est tester avec succé
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 import java.io.*; import org.jdom.*; import org.jdom.input.*; import java.util.List; import java.util.Iterator; public class Exemple_XML{ static org.jdom.Document document; static Element racine; public static void main(String[] args){ SAXBuilder sxb = new SAXBuilder(); try{ document = sxb.build(new File("Application.xml")); } catch(Exception e){} racine = document.getRootElement(); afficheALL(); } static void afficheALL(){ List listApplications = racine.getChildren("application"); Iterator i = listApplications.iterator(); while(i.hasNext()){ Element courant = (Element)i.next(); // System.out.println(courant.getValue()); //Afficher les noms + nombre System.out.println("\n"+courant.getChild("nom").getValue()+" \n"+courant.getChild("nombre").getValue()); // System.out.println(courant.getChild("nom").getValue()); } } }
et voila un exemple de fichier .xml
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <?xml version="1.0" encoding="UTF-8"?> <applications> <application> <nom>firefox</nom> <nombre>45</nombre> </application> <application> <nom>chrome</nom> <nombre>15</nombre> </application> </applications>
le resultat afficher est
Code:

1 2 3 4 5 firefox 45 chrome 15
donc avec ce résultat que je dois interagi avec mon statistique

donc pouvez m'aider a encire la servlet qui soit fait appel a la classe java présidente ou soit ecrire le code dans la servlet et prend comme sortie je pense avec doPost pour la récupérer dans la page jsp ou xhtml et comme cette valeur dans javascript pour afficher le statistique d'une maniere dynamique

j'espère que cette fois pouvez m'aider dans le codage de servlet et si vous avez une autre idée dans le scénario que j'ai déjà preci