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

Version imprimable

02/10/2009, 10h26
Lnhab

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

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
04/10/2009, 17h16
emmanuel.remy

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
05/10/2009, 10h51
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).
06/10/2009, 00h22
emmanuel.remy

Re,

Citation:

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

ERE

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

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

08/10/2009, 00h26
emmanuel.remy
Salut,

Attention:
Code:

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

Bonjour,

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

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

09/10/2009, 16h05
Lnhab

J'ai résolu mon problème en utilisant finalement un simple objet html et non dijit.form.NumberTextBox ...

Merci Hélène
09/10/2009, 23h53
emmanuel.remy

Citation:

Envoyé par emmanuel.remy

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

ERE

Citation:

J'ai résolu mon problème en utilisant finalement un simple objet html et non dijit.form.NumberTextBox ...

Merci Hélène

Et oui... ;)

ERE