| 2150 |
mathias |
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
|
2 |
"http://www.w3.org/TR/html4/strict.dtd">
|
|
|
3 |
<html>
|
|
|
4 |
<head>
|
|
|
5 |
<title>Dojo Toolkit - ProgressBar test</title>
|
|
|
6 |
|
|
|
7 |
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
|
|
|
8 |
<style type="text/css">
|
|
|
9 |
@import "../../dojo/resources/dojo.css";
|
|
|
10 |
@import "css/dijitTests.css";
|
|
|
11 |
body {
|
|
|
12 |
margin: 1em;
|
|
|
13 |
}
|
|
|
14 |
.smallred .dijitProgressBarTile {
|
|
|
15 |
background:red;
|
|
|
16 |
}
|
|
|
17 |
.smallred .dijitProgressBarLabel {
|
|
|
18 |
display:none;
|
|
|
19 |
}
|
|
|
20 |
</style>
|
|
|
21 |
|
|
|
22 |
|
|
|
23 |
<script type="text/javascript" src="../../dojo/dojo.js"
|
|
|
24 |
djConfig="parseOnLoad: true, isDebug: true"></script>
|
|
|
25 |
<script type="text/javascript" src="_testCommon.js"></script>
|
|
|
26 |
|
|
|
27 |
<script type="text/javascript">
|
|
|
28 |
dojo.require("dijit.ProgressBar");
|
|
|
29 |
dojo.require("dojo.parser"); // scan page for widgets
|
|
|
30 |
dojo.require("dojo.string");
|
|
|
31 |
</script>
|
|
|
32 |
|
|
|
33 |
<script type="text/javascript">
|
|
|
34 |
|
|
|
35 |
dojo.addOnLoad(go);
|
|
|
36 |
|
|
|
37 |
function go(){
|
|
|
38 |
//TODO: it's a little strange that id must be specified again?
|
|
|
39 |
var theBar = new dijit.ProgressBar({id: "testBar", width: 400, annotate: true, maximum: 256, duration: 2000,
|
|
|
40 |
report:function(percent){
|
|
|
41 |
return dojo.string.substitute("${0} out of ${1} max chars", [this.progress, this.maximum]);
|
|
|
42 |
}
|
|
|
43 |
}, dojo.byId("testBar"));
|
|
|
44 |
|
|
|
45 |
dojo.byId("test").value="";
|
|
|
46 |
dojo.byId("progressValue").focus();
|
|
|
47 |
dojo.byId("progressValue").value = dijit.byId("setTestBar").progress;
|
|
|
48 |
dojo.byId("maximum").value = dijit.byId("setTestBar").maximum;
|
|
|
49 |
dojo.connect(dojo.byId("test"), "onkeyup", null, keyUpHandler);
|
|
|
50 |
dojo.connect(dojo.byId("set"), "onclick", null, setParameters);
|
|
|
51 |
dojo.connect(dojo.byId("startTimer"), "onclick", null,
|
|
|
52 |
function(){ remoteProgress(dijit.byId("timerBar")); } );
|
|
|
53 |
|
|
|
54 |
function indeterminateSetter(id, value){
|
|
|
55 |
return function(){
|
|
|
56 |
dijit.byId(id).update({'indeterminate': value});
|
|
|
57 |
}
|
|
|
58 |
}
|
|
|
59 |
dojo.connect(dojo.byId("setIndeterminate1True"), "onclick", null,
|
|
|
60 |
indeterminateSetter("indeterminateBar1", true));
|
|
|
61 |
dojo.connect(dojo.byId("setIndeterminate1False"), "onclick", null,
|
|
|
62 |
indeterminateSetter("indeterminateBar1", false));
|
|
|
63 |
dojo.connect(dojo.byId("setIndeterminate2True"), "onclick", null,
|
|
|
64 |
indeterminateSetter("indeterminateBar2", true));
|
|
|
65 |
dojo.connect(dojo.byId("setIndeterminate2False"), "onclick", null,
|
|
|
66 |
indeterminateSetter("indeterminateBar2", false));
|
|
|
67 |
}
|
|
|
68 |
|
|
|
69 |
// An example of polling on a separate (heartbeat) server thread. This is useful when the progress
|
|
|
70 |
// is entirely server bound and there is no existing interaction with the server to determine status.
|
|
|
71 |
|
|
|
72 |
// We don't have a server to run against, but a simple heartbeat implementation might look something
|
|
|
73 |
// like this:
|
|
|
74 |
|
|
|
75 |
// function getProgressReport(){
|
|
|
76 |
// var dataSource = "http://dojotoolkit.org";
|
|
|
77 |
// return dojo.xhrGet({url: dataSource, handleAs: "json", content: {key: "progress"}});
|
|
|
78 |
// }
|
|
|
79 |
|
|
|
80 |
// Instead, we'll just tick off intervals of 10
|
|
|
81 |
|
|
|
82 |
var fakeProgress = 0;
|
|
|
83 |
function getProgressReport(){
|
|
|
84 |
var deferred = new dojo.Deferred();
|
|
|
85 |
fakeProgress = Math.min(fakeProgress + 10, 100);
|
|
|
86 |
deferred.callback(fakeProgress+"%");
|
|
|
87 |
return deferred;
|
|
|
88 |
}
|
|
|
89 |
|
|
|
90 |
function remoteProgress(bar){
|
|
|
91 |
var _timer = setInterval(function(){
|
|
|
92 |
var report = getProgressReport();
|
|
|
93 |
report.addCallback(function(response){
|
|
|
94 |
bar.update({progress: response});
|
|
|
95 |
if(response == "100%"){
|
|
|
96 |
clearInterval(_timer);
|
|
|
97 |
_timer = null;
|
|
|
98 |
return;
|
|
|
99 |
}
|
|
|
100 |
});
|
|
|
101 |
}, 3000); // on 3 second intervals
|
|
|
102 |
}
|
|
|
103 |
|
|
|
104 |
function setParameters(){
|
|
|
105 |
dijit.byId("setTestBar").update({maximum: dojo.byId("maximum").value, progress: dojo.byId("progressValue").value});
|
|
|
106 |
}
|
|
|
107 |
|
|
|
108 |
function keyUpHandler(){
|
|
|
109 |
dijit.byId("testBar").update({progress:dojo.byId("test").value.length});
|
|
|
110 |
dijit.byId("testBarInt").update({progress:dojo.byId("test").value.length});
|
|
|
111 |
dijit.byId("smallTestBar").update({progress:dojo.byId("test").value.length});
|
|
|
112 |
}
|
|
|
113 |
|
|
|
114 |
</script>
|
|
|
115 |
|
|
|
116 |
</head>
|
|
|
117 |
<body class="tundra">
|
|
|
118 |
|
|
|
119 |
<h1 class="testTitle">Dijit ProgressBar Tests</h1>
|
|
|
120 |
|
|
|
121 |
<h3>Test 1</h3>
|
|
|
122 |
Progress Value <input type="text" name="progressValue" id="progressValue" />
|
|
|
123 |
<br>
|
|
|
124 |
Max Progress Value <input type="text" name="maximum" id="maximum" />
|
|
|
125 |
<br>
|
|
|
126 |
<input type="button" name="set" id="set" value="set!" />
|
|
|
127 |
<br>
|
|
|
128 |
<div style="width:400px" annotate="true"
|
|
|
129 |
maximum="200" id="setTestBar" progress="20" dojoType="dijit.ProgressBar"></div>
|
|
|
130 |
|
|
|
131 |
<h3>Test 2</h3>
|
|
|
132 |
Write here: <input type="text" value="" name="test" maxLength="256" id="test" style="width:300"/>
|
|
|
133 |
<br />
|
|
|
134 |
<br />
|
|
|
135 |
<div id="testBar" style='width:300px'></div>
|
|
|
136 |
<br />
|
|
|
137 |
Small, without text and background image:
|
|
|
138 |
<br />
|
|
|
139 |
<div style="width:400px; height:10px" class="smallred"
|
|
|
140 |
maximum="256" id="smallTestBar" dojoType="dijit.ProgressBar"></div>
|
|
|
141 |
<br />
|
|
|
142 |
Show decimal place:
|
|
|
143 |
<div places="1" style="width:400px" annotate="true"
|
|
|
144 |
maximum="256" id="testBarInt" dojoType="dijit.ProgressBar"></div>
|
|
|
145 |
|
|
|
146 |
<h3>Test 3</h3>
|
|
|
147 |
No explicit maximum (both 50%)
|
|
|
148 |
<div style="width:400px" annotate="true"
|
|
|
149 |
id="implied1" progress="50" dojoType="dijit.ProgressBar"></div>
|
|
|
150 |
<br />
|
|
|
151 |
<div style="width:400px" annotate="true"
|
|
|
152 |
id="implied2" progress="50%" dojoType="dijit.ProgressBar"></div>
|
|
|
153 |
|
|
|
154 |
<h3>Test 4</h3>
|
|
|
155 |
<input type="button" name="startTimer" id="startTimer" value="Start Timer" />
|
|
|
156 |
<div style="width:400px" id="timerBar" annotate="true"
|
|
|
157 |
maximum="100" progress="0" dojoType="dijit.ProgressBar"></div>
|
|
|
158 |
|
|
|
159 |
<h3>Test 5 - indeterminate progess</h3>
|
|
|
160 |
<input type="button" name="setIndeterminate1True" id="setIndeterminate1True" value="Make Indeterminate" />
|
|
|
161 |
<input type="button" name="setIndeterminate1False" id="setIndeterminate1False" value="Make Determinate" />
|
|
|
162 |
<div style="width:400px" indeterminate="true" id="indeterminateBar1"
|
|
|
163 |
dojoType="dijit.ProgressBar"></div>
|
|
|
164 |
<input type="button" name="setIndeterminate2True" id="setIndeterminate2True" value="Make Indeterminate" />
|
|
|
165 |
<input type="button" name="setIndeterminate2False" id="setIndeterminate2False" value="Make Determinate" />
|
|
|
166 |
<div style="width:400px" progress="50" id="indeterminateBar2"
|
|
|
167 |
dojoType="dijit.ProgressBar"></div>
|
|
|
168 |
|
|
|
169 |
</body>
|
|
|
170 |
</html>
|