ProgressBar

The ProgressBar dijit behaves just like any other progress bar you've seen in an application, and it comes in both determinate and indeterminate variations. One of the greatest things about it is that there's just not that much to say. In fact, Example 15-3 should do a good job of speaking for itself.

Example 15-3. Typical indeterminate ProgressBar usage

<div dojoType="dijit.ProgressBar" indeterminate="true" style="width:300px"></div>

Of course, there will certainly be times when you'll want to fetch a real update from the server and display actual progress instead of an indeterminate indicator. Let's assume that you have a server-side routine that is returning some kind of progress indication. The following mockup simulates:

import cherrypy

config = {
    #serve up this static file...
    '/foo.html' :
    {
        'tools.staticfile.on' : True,
        'tools.staticfile.filename' : '/absolute/path/to/foo.html'
    }
}

class Content:
    def _  _init_  _(self):
        self.progress = 0

    @cherrypy.expose
    def getProgress(self):
        self.progress += 10
        return str(self.progress)

cherrypy.quickstart(Content(  ), '/', config=config)

The file foo.html that contains the ProgressBar might look like this:

<html>
    <head>
        <title>Fun with ProgressBar!</title>

        <link rel="stylesheet" type="text/css"
          href="http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css" />
        <link rel="stylesheet" type="text/css"
          href="http://o.aolcdn.com/dojo/1.1/dijit/themes/tundra/tundra.css" />

        <script
            type="text/javascript"
            src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js"
            djConfig="parseOnLoad:true">
        </script>

        <script type="text/javascript">
            dojo.require("dojo.parser");
            dojo.require("dijit.ProgressBar");

            dojo.addOnLoad(function(  ) {
                var progressInterval = setInterval(function(  ) {
                       dojo.xhrGet({
                            url : "http://localhost:8080/getProgress",
                            load : function(response, ioArgs) {
                                console.log("load", response);
                                if (response <= 100) {
                                    dijit.byId("pb").update({progress : response});
                                }
                                else  {
                                    clearInterval(progressInterval);
                                }
                            }
                        });
                }, 1000);
            });
        </script>
    </head>
    <body style="padding:100px" class="tundra">
        <div>Loading...</div>
        <div id="pb" dojoType="dijit.ProgressBar" style="width:300px"></div>
        </div>
    </body>
</html>

To summarize, every second the addOnLoad routine checks the /getProgress URL for an update and feeds it into ProgressBar via its update function. The use of JavaScript's setInterval function will be quite typical with a ProgressBar.

Warning

Don't confuse setInterval with setTimeout. The former executes a function repeatedly every time interval, while setTimeout executes a function just once, after a specified amount of time.

The full range of ProgressBar options are shown in Table 15-3.

Table 15-3. ProgressBar API

Name

Type

Comment

indeterminate

Boolean

Whether to display an indeterminate indication (an animated image) or to actually render progress as provided via the update method.

maximum

Float

The maximum possible value. Although values of 0 through 100 (the default) are common, any range could be used.

places

Number

The number of decimal places to display for a determinate ProgressBar. 0 by default.

progress

String

The initial value for the ProgressBar. You may provide a percent sign, such as "50%", to indicate a relative amount versus an absolute amount.

update(/*Object*/ progress)

Function

Used to update the progress information. You may pass in progress, maximum, and determinate to configure the ProgressBar during any update.

onChange( )

Function

Extension point that is called after each call to update.

Finally, recall that if you need to display a ProgressBar as part of a blocking event, you can always stuff it inside of a Dialog to make the user wait while something happens in the background. Something along the lines of the following example would do the trick:

var pb = new dijit.ProgressBar;
var d = new dijit.Dialog;
d.setContent(pb.domNode);
d.show(  );

Get Dojo: The Definitive Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial