Description
Defines a progress bar to indicate the progress of an activity such as a file download.
Category
Syntax
<cfprogressbar autoDisplay="true|false" name="control identifier" bind ="bind expression" duration="time value" height="height in pixels" interval="time in milliseconds" onComplete="function name" onError="JavaScript function name" style="style specification" width="pixel value" >
History
ColdFusion 9: Added this tag.
Attributes
Attribute |
Req/Opt |
Default |
Description |
|---|---|---|---|
autoDisplay |
Optional |
true |
Set to true to display the progress bar. |
name |
Required |
|
The control name. Used to refer to the control in JavaScript, for example in the script that starts the progress. |
bind |
Required if duration is not specified |
|
A bind expression specifying a client JavaScript function or server CFC that the control calls to get progress information each time the period defined by the interval attribute elapses. You cannot use this attribute with a duration attribute. |
duration |
Required if bind is not specified |
|
The time, in milliseconds, between when the bar starts showing progress and when it shows completed progress. Use only on automatic progress bars that do not use a bind expression to get actual progress information. You cannot use this attribute with a bind attribute. |
height |
Optional |
|
Height of the bar in pixels. |
interval |
Optional |
1000 |
Used if duration is specified. The time interval, in milliseconds, at which the progress bar updates. Although this attribute is optional, specify it to prevent the bar from updating frequently. |
onComplete |
Optional |
|
The name of a function to call when progress completes. |
onError |
|
|
Applies only if you use bind. The JavaScript function to run on an error condition. The error can be a network error or server-side error. |
style |
Optional |
|
The following are the supported colors:
|
width |
Optional |
400 |
The width (length) of the bar in pixels. |
Usage
A progress bar has one of two behaviors:
- Manual, where the progress indicator length increases steadily over a time specified by the duration attribute.
- Dynamic, where the bind attribute specifies a function that determines the indicator length.
If you use a bind expression, the called function takes no parameters, and must return a structure with two values: - status - A decimal completion value, in the range 0 -1.0
message - A message to display in the progress bar, such as "Loading..." or "Completed".
You use two Ajax functions to start and stop the progress bar:
ColdFusion.ProgressBar.start(barName) ColdFusion.ProgressBar.stop(barName)
You must call the start method to start the progress bar. You call the stop method to explicitly stop the progress bar. The bar stops automatically when the bind method returns a status value of 1 or the period specified by the duration attribute elapses. Therefore, you need to use this method only if a process does not complete, if the process completes before the duration period, or in other nonstandard situations, such as error conditions.
Example
The following uses a simple comment form, and uses a timer to simulate the time it would take to process the form. The Application.cfc page must enable session management.
The main application page contains the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">
// The function that starts the progress bar,
// called when the user clicks the Send comment button.
function startProgress() {
ColdFusion.ProgressBar.start("mydataProgressbar");
};
// The function called when the progress bar finishes,
// specified by the cfprogressbar tag onComplete attribute.
function onfinish() {
alert("Done");
};
</script>
<body>
<!--- Ensure there is no Session.STATUS value, which is used by
the progress bar bind CFC, when the page displays. --->
<cfif IsDefined("Session.STATUS")>
<cfscript>
StructDelete(Session,"STATUS");
</cfscript>
</cfif>
<!--- For code simplicity, formatting is minimal. --->
<cfform name="kitform">
<p>To make our service better and to benefit from our special offers,
take a moment to give us your email address and send us a comment.</p>
<p>Name:<br />
<cfinput type="text" name="name"> </p>
<p>E-mail:<br />
<cfinput type="text" name="email"> </p>
<p>Comment:<br />
<cftextarea name="cmnt"/></p>
<p>
<cfinput type="button" name="" value="Send Comment"
onClick=startProgress()></p>
<!--- The progressbar control --->
<div style="padding-left:3px" >
<cfprogressbar name="mydataProgressbar"
bind="cfc:mycfc.getstatus()"
interval="1700"
width="200"
oncomplete="onfinish"/>
</div>
</cfform>
</body>
</html>
The mycfc.cfc file has a single getstatus function:
<cfcomponent>
<!--- This function simulates the time taken
by and operation by using sleep functions.
It increments the progressbar status by 1/10 each time the
progressbar bind expression calls it (that is, each time the
time specified by the cfprogressbar interval attribute passes.
--->
<cffunction name="getstatus" access="remote">
<cfset str = StructNew()>
<cfset str.message = "Saving Data">
<cfif NOT IsDefined("session.STATUS")>
<cfset session.STATUS = 0.1>
<cfscript>
Sleep(200);
</cfscript>
<cfelseif session.STATUS LT 0.9>
<cfset session.STATUS=session.STATUS + .1>
<cfscript>
Sleep(200);
</cfscript>
<cfelse>
<cfset str.message = "Done...">
<cfset session.STATUS="1.0">
</cfif>
<cfset str.status = session.STATUS>
<cfreturn str>
</cffunction>
</cfcomponent>
Sign in to your account