Laurent-Laville.org

BlueSand with AJAX

Overview

This example will run a natural horizontal progress bar with blue skin (example 1.3), in asynchronous mode.
Use an auto (HTML_)AJAX server with PHP class and methods.

Screenshot

Demonstration

Dependencies

• PHP >= 4.3.0
• PEAR::HTML_Progress2 >= 2.3.0a2
• PEAR::HTML_Common >= 1.2.1
• PEAR::HTML_CSS >= 1.1.2
• PEAR::PHP_Compat >= 1.4.1
• PEAR::Event_Dispatcher >= 0.9.1
• PEAR::HTML_AJAX >= 0.5.0

And also but optional :

• PEAR >= 1.3.5

Explains step by step

Lines 11-16: clean-up session data when user-task is over (progress meter at 100%). The default behavior of AJAX progress bar is to reload the same page when task is complete. Use QueryString "reload=true". To change this behavior, you have to modify content of HTML_Progress2.onComplete JavaScript variable (See example 15.4 with usage of Scriptaculous AJAX framework).

Lines 20-31, 39: Reuse an existing external style sheet (see bluesand2.css) following feature introduced in version 2.2.0

  Take care to use the same progress bar identifier in your PHP (line 24) and CSS code (lines 1,9,18,28,32)

Line 32: function HTML_Progress2::registerAJAX, allow to identify components of (HTML_)AJAX server. Here we don't use the default server name ('server.php') but script 'auto_server.php' that will handle through PHP class RequestStatus (see line 51) and one of its methods updatePercentage (see line 52) the simulation of a user-task that take many cycles to complete, and return new status of the progress bar (percentage and labels key-value pairs).

Line 47: Do all job to initialize references to AJAX server and JS client librairies used. Will print these lines:

<script type='text/javascript' src='auto_server.php?client=all'></script>
<script type='text/javascript' src='auto_server.php?stub=requeststatus'></script>
<script type="text/javascript">HTML_AJAX.defaultServerUrl = 'auto_server.php'</script>

Lines 51-52: Identify the PHP class/method that will act as responder to handle user-task (RequestStatus.class.php lines 90,100-105) and update the progress bar status.