Laurent-Laville.org

BgImages labels with AJAX

Overview

This example will run a natural horizontal progress bar with background pictures (example 1.2), 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 12-17: 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 21-40: Level design with all API to define look and feel of your progress bar.

Line 41: 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 RequestFullStatus (see line 61) and one of its methods updateTask (see line 62) 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 57: 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=RequestFullStatus'></script>
<script type="text/javascript">HTML_AJAX.defaultServerUrl = 'auto_server.php'</script>

Lines 61-62: Identify the PHP class/method that will act as responder to handle user-task (RequestStatus.class.php lines 73-77) and update the progress bar status (lines 43-62).