Affichage de données issues d'une base de donnée

**Lnhab** · 02/10/2009, 10h26

Bonjour,

Je dois créer une page html en utilisant dojo pour afficher des données provenant d'une base de donnée. Chaque donnée doit pouvoir être remise à jour mais pas à la même fréquence.
J'ai cherché sur internet mais je n'arrive pas à savoir quel objet dojo utilisé et comment procéder pour que les données soient rafraichies régulièrement.

Merci de votre aide

Hélène

**emmanuel.remy** · 04/10/2009, 17h16

Salut,

L'idéal est de passer par Ajax pour ce type d'affichage. On peut le faire avec la gestion d'un simple Timer (setInterval, setTimeout...).

Dojo te propose des composants intéressants qui répondront à tes attentes, inclus dans le package dojox.timing, dont dojox.timing.Timer.

ERE

**Lnhab** · 05/10/2009, 10h51

J'avais effectivement penser utiliser Ajax et les fonctions setTimeout ... mais je n'arrive pas à savoir quel élément de dojo (dijit.form.NumberTextBox?) je dois utiliser pour afficher une donnée numérique (la donnée ne doit pas être éditable).

**emmanuel.remy** · 06/10/2009, 00h22

Re,

Envoyé par Lnhab

J'avais effectivement penser utiliser Ajax et les fonctions setTimeout ... mais je n'arrive pas à savoir quel élément de dojo (dijit.form.NumberTextBox?) je dois utiliser pour afficher une donnée numérique (la donnée ne doit pas être éditable).

Si c'est juste pour afficher une donnée numérique un simple bout de code HTML suffit...

ERE

**Lnhab** · 07/10/2009, 15h06

J'ai presque réussi à faire ce que je veux faire en utilisant dijit.form.NumberTextBox:

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
 
<html>
  <head>
  	<title>Programmatic Layout Basic</title>
    <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
    </style>
 
		<script type="text/javascript" src="lib/dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script>
	<script type="text/javascript">
      dojo.require("dojo.parser");
      dojo.require("dijit.form.NumberTextBox");
 
      dojo.addOnLoad(show);
 
	  var myDijit1;
	  var myDijit2;	 
 
      function show() {
   		myDijit1 = new dijit.form.NumberTextBox({
          value : 2
        });
        dojo.byId("my").appendChild(myDijit1.domNode);
 
		myDijit2 = new dijit.form.NumberTextBox({
          value : 2
        });
        dojo.byId("my").appendChild(myDijit2.domNode);
 
 
	setTimeout("updateValue1(10)", 5000); 
	setTimeout("updateValue2(20)", 5000); 
      }
 
  	var updateValue1 = function(iValue){
	  myDijit1.onChange(iValue);
	  setTimeout("updateValue1("+(iValue +1)+")", 4000);
	};
 
	var updateValue2 = function(iValue){
	  myDijit2.setValue(iValue);
	  setTimeout("updateValue2("+(iValue +1)+")", 4000);
	};
 
    </script>
 
 
  </head>
  <body class="tundra">
	<div id="my"/>
  </body>
 
</html>

Mais je n'arrive pas à mettre de label.
Est-ce-que vous savez aussi comment faire pour mettre à jour mes NumberTextBox avec des données provenant d'un fichier json?

Dsl pour mes nombreuses questions mais c'est la première fois que je travaille sur ce genre de projet.

Hélène

**emmanuel.remy** · 08/10/2009, 00h26

Salut,

Attention:

Code :

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

1
2
3
 
//myDijit1.onChange(iValue); à remplacer par
 myDijit1.attr("value",iValue);

Pour ton fichier JSON, à toi de récupérer l'objet inscrit dedans (généralement par un dojo.fromJson), puis à injecter ta valeur dans myDijit1

ERE

**Lnhab** · 09/10/2009, 14h21

Bonjour,

J'ai modifié en partie mon code pour utiliser dojo.xhrGet():

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
82
83
84
85
86
 
<html>
  <head>
  	<title>Programmatic Layout Basic</title>
    <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
    </style>
 
	<script type="text/javascript" src="lib/dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script>
	<script type="text/javascript">
      dojo.require("dojo.parser");
      dojo.require("dijit.form.NumberTextBox");
 
      dojo.addOnLoad(show);
 
	  var myDijit1;
	  var myDijit2;
 
      function show() {
  	myDijit1 = new dijit.form.NumberTextBox({label:"test"});
	dojo.xhrGet({
		url: "GetTempSensor3.php",
		hanleAs: "json",
		content:{
			i:1
		},
		load: function(data){
			var obj = dojo.fromJson(data);
			myDijit1.setValue(obj.temp);
			dojo.byId("my").appendChild(myDijit1.domNode);
			setTimeout("updateValue1()", 5000); 
		}
	}); 
 
	myDijit2 = new dijit.form.NumberTextBox({label:"test"});
	dojo.xhrGet({
		url: "GetTempSensor3.php",
		hanleAs: "json",
		content:{
			i:2
		},
		load: function(data){
			var obj = dojo.fromJson(data);
			myDijit2.setValue(obj.temp);
			dojo.byId("my").appendChild(myDijit2.domNode);
			setTimeout("updateValue2()", 5000); 
		}
	}); 		 
      }
 
  	var updateValue1 = function(iValue){
			dojo.xhrGet({
				url: "GetTempSensor3.php",
				hanleAs: "json",
				content: {
					i: 1
				},
				load: function(data){
					var obj = dojo.fromJson(data);
					myDijit1.setValue(obj.pres);
					setTimeout("updateValue1()", 5000);
				}
			})
		};
 
	var updateValue2 = function(iValue){
		dojo.xhrGet({
			url: "GetTempSensor3.php",
			hanleAs: "json",
			content: {
				i: 2
			},
			load: function(data){
				var obj = dojo.fromJson(data);
				myDijit2.setValue(obj.pres);
				setTimeout("updateValue2()", 5000);
			}
		})
	};
    </script>
  </head>
  <body class="tundra">
	<div id="my"/>
  </body>
 
</html>

La remise à jour s'effectue correctement mais je n'arrive toujours pas modifier le label: un "X" s'affiche à coté de mon NumberTextBox.

Merci de votre aide

Hélène