cfprogressbar

Description

Defines a progress bar to indicate the progress of an activity such as a file download.

History

ColdFusion 9: Added this tag.

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"    >

Attributes

Attribute	Description	Required	Default
autoDisplay	Set to true to display the progress bar.	Optional	true
bind	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. If an error occurs, no further bind expression calls are triggered and onError is called (if defined).	Required if duration is not specified
duration	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.	Required if bind is not specified
height	Height of the bar in pixels.	Optional
interval	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.	Optional	1000
name	The control name. Used to refer to the control in JavaScript, for example in the script that starts the progress.	Required
onComplete	The name of a function to call when progress completes.	Optional
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	The following are the supported colors: bgcolor: The background color for the progress bar. A hexadecimal value without “#” prefixed. textcolor: Text color on progress bar. progresscolor: Color used to indicate the progress.	Optional
width	The width (length) of the bar in pixels.	Optional	400

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">   
    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> 
    Name:<br /> 
        &nbsp;<cfinput type="text" name="name">  </p> 
    E-mail:<br /> 
        &nbsp;<cfinput type="text"  name="email">  </p> 
    Comment:<br /> 
        &nbsp;<cftextarea   name="cmnt"/></p> 
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
             <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>

cfmldocs