cfprogressbar

Description

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

Category

Display management tags

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.

If an error occurs, no further bind expression calls are triggered and onError is called (if defined).

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:

  • 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.

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