1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
5 <title>Dojo Toolkit - ProgressBar test</title>
7 <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
9 <style type="text/css">
10 @import "../../dojo/resources/dojo.css";
11 @import "css/dijitTests.css";
15 .smallred .dijitProgressBarTile {
18 .smallred .dijitProgressBarLabel {
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>
27 <script type="text/javascript">
28 dojo.require("dijit.ProgressBar");
29 dojo.require("dojo.parser"); // scan page for widgets
30 dojo.require("dojo.string");
35 //TODO: it's a little strange that id must be specified again?
36 var theBar = new dijit.ProgressBar({id: "testBar", width: 400, annotate: true, maximum: 256, duration: 2000,
37 report:function(percent){
38 return dojo.string.substitute("${0} out of ${1} max chars", [this.progress, this.maximum]);
40 }, dojo.byId("testBar"));
42 dojo.byId("test").value="";
43 dojo.byId("progressValue").focus();
44 dojo.byId("progressValue").value = dijit.byId("setTestBar").progress;
45 dojo.byId("maximum").value = dijit.byId("setTestBar").maximum;
46 dojo.connect(dojo.byId("test"), "onkeyup", null, keyUpHandler);
47 dojo.connect(dojo.byId("set"), "onclick", null, setParameters);
48 dojo.connect(dojo.byId("startTimer"), "onclick", null,
49 function(){ remoteProgress(dijit.byId("timerBar")); } );
51 function indeterminateSetter(id, value){
53 dijit.byId(id).update({'indeterminate': value});
56 dojo.connect(dojo.byId("setIndeterminate1True"), "onclick", null,
57 indeterminateSetter("indeterminateBar1", true));
58 dojo.connect(dojo.byId("setIndeterminate1False"), "onclick", null,
59 indeterminateSetter("indeterminateBar1", false));
60 dojo.connect(dojo.byId("setIndeterminate2True"), "onclick", null,
61 indeterminateSetter("indeterminateBar2", true));
62 dojo.connect(dojo.byId("setIndeterminate2False"), "onclick", null,
63 indeterminateSetter("indeterminateBar2", false));
66 // An example of polling on a separate (heartbeat) server thread. This is useful when the progress
67 // is entirely server bound and there is no existing interaction with the server to determine status.
69 // We don't have a server to run against, but a simple heartbeat implementation might look something
72 // function getProgressReport(){
73 // var dataSource = "http://dojotoolkit.org";
74 // return dojo.xhrGet({url: dataSource, handleAs: "json", content: {key: "progress"}});
77 // Instead, we'll just tick off intervals of 10
80 function getProgressReport(){
81 var deferred = new dojo.Deferred();
82 fakeProgress = Math.min(fakeProgress + 10, 100);
83 deferred.callback(fakeProgress+"%");
87 function remoteProgress(bar){
88 var _timer = setInterval(function(){
89 var report = getProgressReport();
90 report.addCallback(function(response){
91 bar.update({progress: response});
92 if(response == "100%"){
93 clearInterval(_timer);
98 }, 3000); // on 3 second intervals
101 function setParameters(){
102 dijit.byId("setTestBar").update({maximum: dojo.byId("maximum").value, progress: dojo.byId("progressValue").value});
105 function keyUpHandler(){
106 dijit.byId("testBar").update({progress:dojo.byId("test").value.length});
107 dijit.byId("testBarInt").update({progress:dojo.byId("test").value.length});
108 dijit.byId("smallTestBar").update({progress:dojo.byId("test").value.length});
114 <h1 class="testTitle">Dijit ProgressBar Tests</h1>
117 Progress Value <input type="text" name="progressValue" id="progressValue" />
119 Max Progress Value <input type="text" name="maximum" id="maximum" />
121 <input type="button" name="set" id="set" value="set!" />
123 <div style="width:400px" annotate="true"
124 maximum="200" id="setTestBar" progress="20" dojoType="dijit.ProgressBar"></div>
127 Write here: <input type="text" value="" name="test" maxLength="256" id="test" style="width:300"/>
130 <div id="testBar" style='width:300px'></div>
132 Small, without text and background image:
134 <div style="width:400px; height:10px" class="smallred"
135 maximum="256" id="smallTestBar" dojoType="dijit.ProgressBar"></div>
138 <div places="1" style="width:400px" annotate="true"
139 maximum="256" id="testBarInt" dojoType="dijit.ProgressBar"></div>
142 No explicit maximum (both 50%)
143 <div style="width:400px" annotate="true"
144 id="implied1" progress="50" dojoType="dijit.ProgressBar"></div>
146 <div style="width:400px" annotate="true"
147 id="implied2" progress="50%" dojoType="dijit.ProgressBar"></div>
150 <input type="button" name="startTimer" id="startTimer" value="Start Timer" />
151 <div style="width:400px" id="timerBar" annotate="true"
152 maximum="100" progress="0" dojoType="dijit.ProgressBar"></div>
154 <h3>Test 5 - indeterminate progess</h3>
155 <input type="button" name="setIndeterminate1True" id="setIndeterminate1True" value="Make Indeterminate" />
156 <input type="button" name="setIndeterminate1False" id="setIndeterminate1False" value="Make Determinate" />
157 <div style="width:400px" indeterminate="true" id="indeterminateBar1"
158 dojoType="dijit.ProgressBar"></div>
159 <input type="button" name="setIndeterminate2True" id="setIndeterminate2True" value="Make Indeterminate" />
160 <input type="button" name="setIndeterminate2False" id="setIndeterminate2False" value="Make Determinate" />
161 <div style="width:400px" progress="50" id="indeterminateBar2"
162 dojoType="dijit.ProgressBar"></div>