diff options
| author | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 | 
|---|---|---|
| committer | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 | 
| commit | e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch) | |
| tree | 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dijit/tests/test_ProgressBar.html | |
| parent | a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff) | |
| download | semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2 | |
New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit
git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
Diffstat (limited to 'includes/js/dijit/tests/test_ProgressBar.html')
| -rw-r--r-- | includes/js/dijit/tests/test_ProgressBar.html | 165 | 
1 files changed, 165 insertions, 0 deletions
| diff --git a/includes/js/dijit/tests/test_ProgressBar.html b/includes/js/dijit/tests/test_ProgressBar.html new file mode 100644 index 0000000..7df8119 --- /dev/null +++ b/includes/js/dijit/tests/test_ProgressBar.html @@ -0,0 +1,165 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" +	"http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> +	<title>Dojo Toolkit - ProgressBar test</title> + +	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> + +	<style type="text/css"> +		@import "../../dojo/resources/dojo.css"; +		@import "css/dijitTests.css"; +		body { +			margin: 1em; +		} +		.smallred .dijitProgressBarTile { +			background:red; +		} +		.smallred .dijitProgressBarLabel { +			display:none; +		} +	</style> + +	<script type="text/javascript" src="../../dojo/dojo.js" +		djConfig="parseOnLoad: true, isDebug: true"></script> +	<script type="text/javascript" src="_testCommon.js"></script> + +	<script type="text/javascript"> +		dojo.require("dijit.ProgressBar"); +		dojo.require("dojo.parser");	// scan page for widgets +		dojo.require("dojo.string"); + +		dojo.addOnLoad(go); + +		function go(){ +			//TODO: it's a little strange that id must be specified again?	 +			var theBar = new dijit.ProgressBar({id: "testBar", width: 400, annotate: true, maximum: 256, duration: 2000, +				report:function(percent){ +					return dojo.string.substitute("${0} out of ${1} max chars", [this.progress, this.maximum]); +				} +			}, dojo.byId("testBar")); + +			dojo.byId("test").value=""; +			dojo.byId("progressValue").focus(); +			dojo.byId("progressValue").value = dijit.byId("setTestBar").progress; +			dojo.byId("maximum").value = dijit.byId("setTestBar").maximum; +			dojo.connect(dojo.byId("test"), "onkeyup", null, keyUpHandler); +			dojo.connect(dojo.byId("set"), "onclick", null, setParameters); +			dojo.connect(dojo.byId("startTimer"), "onclick", null, +				function(){ remoteProgress(dijit.byId("timerBar")); } ); + +			function indeterminateSetter(id, value){ +				return function(){ +					dijit.byId(id).update({'indeterminate': value}); +				} +			} +			dojo.connect(dojo.byId("setIndeterminate1True"), "onclick", null, +				indeterminateSetter("indeterminateBar1", true)); +			dojo.connect(dojo.byId("setIndeterminate1False"), "onclick", null, +				indeterminateSetter("indeterminateBar1", false)); +			dojo.connect(dojo.byId("setIndeterminate2True"), "onclick", null, +				indeterminateSetter("indeterminateBar2", true)); +			dojo.connect(dojo.byId("setIndeterminate2False"), "onclick", null, +				indeterminateSetter("indeterminateBar2", false)); +		} + +		// An example of polling on a separate (heartbeat) server thread.  This is useful when the progress +		// is entirely server bound and there is no existing interaction with the server to determine status. + +		// We don't have a server to run against, but a simple heartbeat implementation might look something +		// like this: + +		// function getProgressReport(){ +		//	var dataSource = "http://dojotoolkit.org"; +		//	return dojo.xhrGet({url: dataSource, handleAs: "json", content: {key: "progress"}}); +		// } + +		// Instead, we'll just tick off intervals of 10 + +		var fakeProgress = 0; +		function getProgressReport(){ +			var deferred = new dojo.Deferred(); +			fakeProgress = Math.min(fakeProgress + 10, 100); +			deferred.callback(fakeProgress+"%"); +			return deferred; +		} + +		function remoteProgress(bar){ +			var _timer = setInterval(function(){ +				var report = getProgressReport(); +				report.addCallback(function(response){ +					bar.update({progress: response}); +					if(response == "100%"){ +						clearInterval(_timer); +						_timer = null; +						return; +					} +				}); +			}, 3000); // on 3 second intervals +		} + +		function setParameters(){ +			dijit.byId("setTestBar").update({maximum: dojo.byId("maximum").value, progress: dojo.byId("progressValue").value}); +		} + +		function keyUpHandler(){ +			dijit.byId("testBar").update({progress:dojo.byId("test").value.length}); +			dijit.byId("testBarInt").update({progress:dojo.byId("test").value.length}); +			dijit.byId("smallTestBar").update({progress:dojo.byId("test").value.length}); +		} +	</script> +</head> +<body> + +	<h1 class="testTitle">Dijit ProgressBar Tests</h1> + +	<h3>Test 1</h3> +	Progress Value <input type="text" name="progressValue" id="progressValue" /> +	<br> +	Max Progress Value <input type="text" name="maximum" id="maximum" /> +	<br> +	<input type="button" name="set" id="set" value="set!" /> +	<br> +	<div style="width:400px" annotate="true" +		maximum="200" id="setTestBar" progress="20" dojoType="dijit.ProgressBar"></div> + +	<h3>Test 2</h3> +	Write here: <input type="text" value="" name="test" maxLength="256" id="test" style="width:300"/> +	<br /> +	<br /> +	<div id="testBar" style='width:300px'></div>		 +	<br /> +	Small, without text and background image: +	<br /> +	<div style="width:400px; height:10px" class="smallred" +		maximum="256" id="smallTestBar" dojoType="dijit.ProgressBar"></div>		 +	<br /> +	Show decimal place: +	<div places="1" style="width:400px" annotate="true" +		maximum="256" id="testBarInt" dojoType="dijit.ProgressBar"></div> + +	<h3>Test 3</h3> +	No explicit maximum (both 50%) +	<div style="width:400px" annotate="true" +		id="implied1" progress="50" dojoType="dijit.ProgressBar"></div>		 +	<br /> +	<div style="width:400px" annotate="true" +		id="implied2" progress="50%" dojoType="dijit.ProgressBar"></div> + +	<h3>Test 4</h3> +	<input type="button" name="startTimer" id="startTimer" value="Start Timer" /> +	<div style="width:400px" id="timerBar" annotate="true" +		maximum="100" progress="0" dojoType="dijit.ProgressBar"></div> + +	<h3>Test 5 - indeterminate progess</h3> +	<input type="button" name="setIndeterminate1True" id="setIndeterminate1True" value="Make Indeterminate" /> +	<input type="button" name="setIndeterminate1False" id="setIndeterminate1False" value="Make Determinate" /> +	<div style="width:400px" indeterminate="true" id="indeterminateBar1" +		dojoType="dijit.ProgressBar"></div> +	<input type="button" name="setIndeterminate2True" id="setIndeterminate2True" value="Make Indeterminate" /> +	<input type="button" name="setIndeterminate2False" id="setIndeterminate2False" value="Make Determinate" /> +	<div style="width:400px" progress="50" id="indeterminateBar2" +		dojoType="dijit.ProgressBar"></div> + +</body> +</html> | 
