
856
DEVELOPING
COLDFUSION 9 APPLICATIONS
Requesting and Presenting Information
Las
t
upda
te
d 8/5/2010
<cfajaxproxy cfc="pbar" jsclassname="pbar">
<head>
<script>
var utils = new pbar();
var init = function()
{
document.getElementById('cfpbLabel').style.display = 'block';
ColdFusion.ProgressBar.show('pBar');
getProgessData();
}
var hideProgessBar = function()
{
document.getElementById('cfpbLabel').style.display = 'none';
ColdFusion.ProgressBar.hide('pBar');
}
var getProgessData = function()
{
for(i=1;i <= 10;i++)
{
var status = parseFloat(i * 0.10);
var message = Math.round(status * 100) + "%";
ColdFusion.ProgressBar.updateStatus('pBar',status,message);
utils.sleep(1000);
}
hideProgessBar();
}
</script>
</head>
<cfform>
<div id="cfpbLabel" style="display:none">
Saving File:
</div>
<cfprogressbar
name="pBar"
autodisplay=false
duration=15000
onComplete="hideProgessBar"
width="400">
<cfset ajaxOnLoad('init')>
</cfform>
The
sleep
function in the following CFC provides sleep functionality in the JavaScript code:
<cfcomponent>
<cffunction name="sleep" access="remote">
<cfargument name="timetosleep" default="1000">
<cfset sleep(timetosleep)>
</cffunction>
</cfcomponent>
Styling the progress bar
The
cfprogressbar
has
style
attribute that lets you decide:
•
Background color of the progress bar
•
Color of the progress message
•
Color of the progress indicator