Mobile progress indicator

**jerome5869** · 26/02/2012, 00h24

Bonjour,

je suis sur un projet web mobile en dojo et j'ai besoin d'utiliser la class progress indicator pour créer un indicateur de progression. Lorsque j'ajoute le code suivant :

Code :

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

1
2
3
4
5
6
 
<script type="text/javascript">
        var prog = dojox.mobile.ProgressIndicator.getInstance();
        container.appendChild(prog.domNode);
        prog.start();
</script>

le debugger de Firefox me met "dojox.mobile is undefined" par rapport à la ligne :

var prog = dojox.mobile.ProgressIndicator.getInstance();

Je ne comprend pas d’où vient cette erreur car j'ai bien ajouté dans le fichier

dojo.require("dojox.mobile.parser");
dojo.require("dojox.mobile");

**emmanuel.remy** · 29/02/2012, 15h35

Salut,

Pas de souci particulier avec ce composant. Pour t'en assurer tu peux le tester ici: dojox/mobile/tests/test_progress-indicator.html

Es tu bien sûr que tes librairies sont chargées au moment d'exécuter le code ? Si non un dojo.ready s'impose.

ERE

**jerome5869** · 01/03/2012, 09h51

Bonjour,

J'ai testé avec dojo.ready et cela marche bien pour lancer le progress indicator. Cependant, je ne comprends pas pourquoi mes librairies ne sont pas chargées. De plus, je n'arrive pas à arrêter le progress indicator avec la fonction stop.

Voici mon code :

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<title>Application mobile</title>
		<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes/iphone/iphone.css" rel="stylesheet" />
		<link rel="icon" type="image/png" href="icon.png" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" djConfig="isDebug:true, parseOnLoad:true, "></script>
		<script type="text/javascript">
			// Use the lightweight parser
			dojo.require("dojox.mobile.parser");
			// Require Dojo mobile
			dojo.require("dojox.mobile");
			dojo.require("dojox.mobile.TabBar");
			dojo.require("dojox.mobile.ScrollableView");	
			//Require the compat if the client isn't Webkit-based
			dojo.requireIf(!dojo.isWebKit,"dojox.mobile.compat");
 
			function creerpage(id, dojoType, selected, components, pagefils){
			dojo.create("div", {id: id, dojoType: dojoType, selected: selected}, dojo.body());
			dojo.forEach(components, function(data,i){
				if (data.dojoType=="dojox.mobile.Heading"){
					creerComponentHeader(data.id,data.dojoType,data.title,data.moveTo,data.titleBack, id);}
				else if (data.dojoType=="dojox.mobile.RoundRectList" || data.dojoType=="dojox.mobile.EdgeToEdgeList"){
					creerComponentList(data.id, data.dojoType, data.title, data.styleTitre, id, data.items);}
				else if (data.dojoType=="dojox.mobile.RoundRect"){
					creerComponentPanel(data.id, data.dojoType, id, data.contents);}
			});
			dojo.forEach(pagefils, function(data2,i){
				creerpage(data2.id, data2.dojoType, data2.selected, data2.components, data2.pagefils);
			});
		}
 
		function creerComponentHeader(id,dojoType,title,moveTo,titleBack, parent){ 
			dojo.create("h1", {innerHTML: title, dojoType: dojoType, back: titleBack, moveTo: moveTo}, parent);
		}
 
		function creerComponentList(id, dojoType, title, styleTitre, parent, items){
			dojo.create("h2", {innerHTML: title, dojoType: styleTitre}, parent);
			var ul=dojo.create("ul", {dojoType: dojoType}, parent);
			dojo.forEach(items, function(data,i){
				creerItem(data.id, data.text, data.righText, data.icon, data.moveTo, data.transition, data.transitionDir, data.switchB, ul);
			});
		}
 
		function creerItem(id, text, righText, icon, moveTo, transition, transitionDir, switchB, parent){
			dojo.create("li", { id: id, innerHTML: text, dojoType: "dojox.mobile.ListItem", icon: icon, rightText: righText, moveTo: moveTo}, parent);
			if (switchB=="true") {
				creerswitch(id, parent, "off");
			}
		}
 
		function creerComponentPanel(id, dojoType, parent, contents){
			dojo.create("div", {id: id, dojoType: dojoType}, parent);
			dojo.forEach(contents, function(data3,i){
				if (data3.type=="img"){
					creerContentImage(data3.id, data3.src, data3.alt, id);}
				else if (data3.type=="link"){
					creerContentLink(data3.id, data3.href, data3.text, data3.target, id);}
				else if (data3.type=="text"){
					creerContentText(data3.id, data3.text,id);}
			});
		}
 
		function creerContentImage(id, src, alt, parent){
			dojo.create("img", {src: src}, parent);
		}
 
		function creerContentText(id, text, parent){
			dojo.create("p", {innerHTML: text}, parent);
		}
 
		function creerContentLink(id, href, text, target, parent){
			dojo.create("a", {href: href, innerHTML: text, target: target}, parent);
		}
 
		function creerswitch(id, parent, value){
			dojo.create("div", {classname: "mblItemSwitch", dojoType: "dojox.mobile.Switch", value: value}, parent);
			dojo.removeAttr(parent, "moveTo");
		}
 
		function creerfooter(id, dojoType, tabBars){
			var ul2=dojo.create("ul", {dojoType: dojoType, fixed: "bottom"}, dojo.body());
			dojo.forEach(tabBars, function(data3,i){
				creerTabBarButton(data3.id, data3.text, data3.icon1, data3.icon2, data3.moveTo, data3.selected, ul2);
			});
		}
 
		function creerTabBarButton(id, text, icon1, icon2, moveTo, selected, parent){
			dojo.create("li", {id: id, innerHTML: text, dojoType: "dojox.mobile.TabBarButton", icon1: icon1, icon2: icon2, moveTo: moveTo, selected: selected}, parent);
		}	
 
		dojo.ready(function(){
				var prog = dojox.mobile.ProgressIndicator.getInstance();
				dojo.body().appendChild(prog.domNode);
				prog.start();
			});
 
		dojo.xhrGet({
                        url : 'param2.json',
			handleAs : "json",
			load : function(param) {
				var application=param.application;
				var footer=application.footer;
				dojo.forEach(application.page, function(page){
					creerpage(page.id, page.dojoType, page.selected, page.components, page.pagefils)
				});
				creerfooter(footer.id, footer.dojoType, footer.tabButtons);
			},
			error : function(err) {
				console.debug("Error : ", err);
			}
		});
 
		</script>
	</head>
	<body>
 
	</body>
</html>

jerome5869

**emmanuel.remy** · 01/03/2012, 10h38

Salut,

Je ne vois pas de prog.stop dans ton code...

ERE

**jerome5869** · 01/03/2012, 11h22

Bonjour,

Je ne l'ai pas mis car je sais pas ou le mettre. Si je le met dans après la fonction dojo.xhrGet cela me met prog is not defined et c'est normal car la variable n'est pas globale. Si je déclare la variable prog à l'extérieur de la fonction, cela me donne la même erreur. Si je met la fonction dojo.xhrGet et la fonction stop dans la fonction dojo.ready, je perd le style de ma page.

jerome5869

**emmanuel.remy** · 01/03/2012, 14h00

Re,

D'abord tu devrais mettre ton xhrGet dans le dojo.ready, et ensuite tu appelles le stop directement depuis le xhrGet après le creerFooter

ERE

**jerome5869** · 01/03/2012, 21h50

Bonsoir,

J'ai fait ce que vous avez dit. Le problème c'est que cela me donne une page sans style avec toutes les données dans le désordre.

jerome5869

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<title>Application mobile</title>
		<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes/iphone/iphone.css" rel="stylesheet" />
		<link rel="icon" type="image/png" href="icon.png" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" djConfig="isDebug:true, parseOnLoad:true, "></script>
		<script type="text/javascript">
			// Use the lightweight parser
			dojo.require("dojox.mobile.parser");
			// Require Dojo mobile
			dojo.require("dojox.mobile");
			dojo.require("dojox.mobile.TabBar");
			dojo.require("dojox.mobile.ScrollableView");	
			//Require the compat if the client isn't Webkit-based
			dojo.requireIf(!dojo.isWebKit,"dojox.mobile.compat");
 
			function creerpage(id, dojoType, selected, components, pagefils){
			dojo.create("div", {id: id, dojoType: dojoType, selected: selected}, dojo.body());
			dojo.forEach(components, function(data,i){
				if (data.dojoType=="dojox.mobile.Heading"){
					creerComponentHeader(data.id,data.dojoType,data.title,data.moveTo,data.titleBack, id);}
				else if (data.dojoType=="dojox.mobile.RoundRectList" || data.dojoType=="dojox.mobile.EdgeToEdgeList"){
					creerComponentList(data.id, data.dojoType, data.title, data.styleTitre, id, data.items);}
				else if (data.dojoType=="dojox.mobile.RoundRect"){
					creerComponentPanel(data.id, data.dojoType, id, data.contents);}
			});
			dojo.forEach(pagefils, function(data2,i){
				creerpage(data2.id, data2.dojoType, data2.selected, data2.components, data2.pagefils);
			});
		}
 
		function creerComponentHeader(id,dojoType,title,moveTo,titleBack, parent){ 
			dojo.create("h1", {innerHTML: title, dojoType: dojoType, back: titleBack, moveTo: moveTo}, parent);
		}
 
		function creerComponentList(id, dojoType, title, styleTitre, parent, items){
			dojo.create("h2", {innerHTML: title, dojoType: styleTitre}, parent);
			var ul=dojo.create("ul", {dojoType: dojoType}, parent);
			dojo.forEach(items, function(data,i){
				creerItem(data.id, data.text, data.righText, data.icon, data.moveTo, data.transition, data.transitionDir, data.switchB, ul);
			});
		}
 
		function creerItem(id, text, righText, icon, moveTo, transition, transitionDir, switchB, parent){
			dojo.create("li", { id: id, innerHTML: text, dojoType: "dojox.mobile.ListItem", icon: icon, rightText: righText, moveTo: moveTo}, parent);
			if (switchB=="true") {
				creerswitch(id, parent, "off");
			}
		}
 
		function creerComponentPanel(id, dojoType, parent, contents){
			dojo.create("div", {id: id, dojoType: dojoType}, parent);
			dojo.forEach(contents, function(data3,i){
				if (data3.type=="img"){
					creerContentImage(data3.id, data3.src, data3.alt, id);}
				else if (data3.type=="link"){
					creerContentLink(data3.id, data3.href, data3.text, data3.target, id);}
				else if (data3.type=="text"){
					creerContentText(data3.id, data3.text,id);}
			});
		}
 
		function creerContentImage(id, src, alt, parent){
			dojo.create("img", {src: src}, parent);
		}
 
		function creerContentText(id, text, parent){
			dojo.create("p", {innerHTML: text}, parent);
		}
 
		function creerContentLink(id, href, text, target, parent){
			dojo.create("a", {href: href, innerHTML: text, target: target}, parent);
		}
 
		function creerswitch(id, parent, value){
			dojo.create("div", {classname: "mblItemSwitch", dojoType: "dojox.mobile.Switch", value: value}, parent);
			dojo.removeAttr(parent, "moveTo");
		}
 
		function creerfooter(id, dojoType, tabBars){
			var ul2=dojo.create("ul", {dojoType: dojoType, fixed: "bottom"}, dojo.body());
			dojo.forEach(tabBars, function(data3,i){
				creerTabBarButton(data3.id, data3.text, data3.icon1, data3.icon2, data3.moveTo, data3.selected, ul2);
			});
		}
 
		function creerTabBarButton(id, text, icon1, icon2, moveTo, selected, parent){
			dojo.create("li", {id: id, innerHTML: text, dojoType: "dojox.mobile.TabBarButton", icon1: icon1, icon2: icon2, moveTo: moveTo, selected: selected}, parent);
		}	
 
		dojo.ready(function(){
			var prog = dojox.mobile.ProgressIndicator.getInstance();
			dojo.body().appendChild(prog.domNode);
			prog.start();
 
			dojo.xhrGet({
				url : 'param2.json',
				handleAs : "json",
				load : function(param) {
					var application=param.application;
					var footer=application.footer;
					dojo.forEach(application.page, function(page){
						creerpage(page.id, page.dojoType, page.selected, page.components, page.pagefils)
					});
					creerfooter(footer.id, footer.dojoType, footer.tabButtons);
					prog.stop();
				},
				error : function(err) {
					console.debug("Error : ", err);
				}
			});
		});
		</script>
	</head>
	<body>
 
	</body>
</html>

**emmanuel.remy** · 01/03/2012, 23h24

Re,

Si tu modifies ton DOM en ajoutant des composants dojo (dojox.mobile.Heading etc...) il te faut faire un parse ensuite, sinon dojo ne peut pas savoir qu'il doit faire le rendu.

ERE

**jerome5869** · 03/03/2012, 14h51

Bonjour,

Tout fonctionne bien à présent. Je vous remercie pour votre aide.

Jerome5869

Mobile progress indicator [Dojo]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager