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

sample screenshot

Demonstration

Give it a try

Dependencies

And also but optional :

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

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

Source Code

default2.php

  1. <?php
  2. /**
  3. * Basic AJAX example that used an auto server to handle progress bar responses
  4. *
  5. * @author     Laurent Laville <pear@laurent-laville.org>
  6. * @package    HTML_Progress2
  7. * @subpackage Examples
  8. * @access     public
  9. */
  10.  
  11. if (isset($_GET['reload'])) {
  12.     session_start();
  13.     unset($_SESSION['progressPercentage']);
  14.     session_destroy();
  15.     die('Job is over !');
  16. }
  17.  
  18. require_once 'HTML/Progress2.php';
  19.  
  20. $pb = new HTML_Progress2();
  21. $pb->addLabel(HTML_PROGRESS2_LABEL_TEXT, 'txt1', 'Basic AJAX Progress2 example 2');
  22. $pb->addLabel(HTML_PROGRESS2_LABEL_TEXT, 'txt2', 'caption ...');
  23. $pb->setLabelAttributes('txt2', array('valign' => 'bottom'));
  24. $pb->setIdent('PB1');
  25. $pb->setBorderAttributes('class=progressBorder');
  26. $pb->setCellAttributes('class=cell');
  27. $pb->setLabelAttributes('pct1', array(
  28.     'class' => 'progressPercentLabel',
  29.     'align' => 'center'
  30. ));
  31. $pb->importStyle('bluesand2.css');
  32. $pb->registerAJAX('auto_server.php', array('requeststatus'));
  33. ?>
  34. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  35.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  36. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  37. <head>
  38. <title>Basic Ajax Progress2 example 2</title>
  39. <link rel="stylesheet" type="text/css" href="bluesand2.css"  />
  40. <style type="text/css">
  41. <!--
  42. body {background-color: #EEEEEE; }
  43.  -->
  44. </style>
  45. <script type="text/javascript" src="HTML_Progress2.js"></script>
  46. <?php
  47. echo $pb->setupAJAX();
  48. ?>
  49. <script type="text/javascript">
  50. //<![CDATA[
  51. HTML_Progress2.serverClassName  = 'RequestStatus';
  52. HTML_Progress2.serverMethodName = 'updatePercentage';
  53. //]]>
  54. </script>
  55. </head>
  56. <body>
  57.  
  58. <a href="javascript:HTML_Progress2.start('<?php echo $pb->getIdent(); ?>');">Start</a>
  59. <?php $pb->display(); ?>
  60.  
  61. </body>
  62. </html>

auto_server.php

  1. <?php
  2. /**
  3. * Auto server that will serve user task script responder
  4. *
  5. * @version    $Id: auto_server.php,v 1.1 2007/01/22 17:58:54 farell Exp $
  6. * @author     Laurent Laville <pear@laurent-laville.org>
  7. * @package    HTML_Progress2
  8. * @subpackage Examples
  9. * @access     public
  10. */
  11.  
  12. session_start();
  13.  
  14. require_once 'HTML/AJAX/Server.php';
  15.  
  16. class AutoServer extends HTML_AJAX_Server
  17. {
  18.     // this flag must be set for your init methods to be used
  19.     var $initMethods = true;
  20.  
  21.     function initRequestStatus()
  22.     {
  23.         include_once 'RequestStatus.class.php';
  24.         $status = new RequestStatus();
  25.         $this->registerClass($status, 'RequestStatus', array('updatePercentage'));
  26.     }
  27.  
  28.     function initRequestFullStatus()
  29.     {
  30.         include_once 'RequestStatus.class.php';
  31.         $status = new RequestStatus();
  32.         $this->registerClass($status, 'RequestFullStatus', array('updateTask'));
  33.     }
  34.  
  35.     function initRequestStatusAndFx()
  36.     {
  37.         include_once 'RequestStatus.class.php';
  38.         $status = new RequestStatus();
  39.         $this->registerClass($status, 'RequestStatusAndFx', array('updateTask'));
  40.  
  41.         $this->registerJsLibrary('scriptaculous',
  42.             array('prototype.js', 'scriptaculous.js', 'effects.js'),
  43.             dirname(__FILE__) . DIRECTORY_SEPARATOR. 'scriptaculous-js-1.7.0' . DIRECTORY_SEPARATOR);
  44.     }
  45. }
  46.  
  47. $server = new AutoServer();
  48. $server->handleRequest();
  49. ?>

RequestStatus.class.php

  1. <?php
  2. /**
  3. * Sample of user-task script, that also handle response for progress meter
  4. *
  5. * @version    $Id: RequestStatus.class.php,v 1.1 2007/01/22 17:57:26 farell Exp $
  6. * @author     Laurent Laville <pear@laurent-laville.org>
  7. * @package    HTML_Progress2
  8. * @subpackage Examples
  9. * @access     public
  10. */
  11. class RequestStatus
  12. {
  13.     var $status = array('labels' => array(), 'percentage' => 0);
  14.  
  15.     function RequestStatus()
  16.     {
  17.         if (!isset($_SESSION['progressPercentage'])) {
  18.             $_SESSION['progressPercentage'] = 0;
  19.         }
  20.     }
  21.  
  22.     /**
  23.      * Returns only new percentage value
  24.      *
  25.      * @return  array
  26.      * @access  public
  27.      */
  28.     function getStatus()
  29.     {
  30.         return $this->status;
  31.     }
  32.  
  33.     /**
  34.      * Returns new percentage value with associate new labels values.
  35.      *
  36.      * You can define label value even, if its not declared in progress bar;
  37.      * no error will be raised.
  38.      * See example default3.php and label id 'txt4' usage
  39.      *
  40.      * @return  array
  41.      * @access  public
  42.      */
  43.     function getFullStatus()
  44.     {
  45.         $status = $this->getStatus();
  46.  
  47.         if ($status['percentage'] < 25) {
  48.             $this->status['labels']['txt1'] = '1st quarter';
  49.             $this->status['labels']['txt2'] = 'Q1';
  50.         } elseif ($status['percentage'] < 50) {
  51.             $this->status['labels']['txt1'] = '2nd quarter';
  52.             $this->status['labels']['txt2'] = 'Q2';
  53.         } elseif ($status['percentage'] < 75) {
  54.             $this->status['labels']['txt1'] = '3rd quarter';
  55.             $this->status['labels']['txt2'] = 'Q3';
  56.         } else {
  57.             $this->status['labels']['txt1'] = '4th quarter';
  58.             $this->status['labels']['txt4'] = 'Q4';
  59.         }
  60.  
  61.         return $this->status;
  62.     }
  63.  
  64.     /**
  65.      * Move on current user-task and returns full status of progress meter.
  66.      *
  67.      * Here we simulate a user-task that take many cycles to complete, and we
  68.      * don't know how many.
  69.      *
  70.      * @return  array
  71.      * @access  public
  72.      */
  73.     function updateTask()
  74.     {
  75.         $this->_updateStatus();
  76.         return $this->getFullStatus();
  77.     }
  78.  
  79.     /**
  80.      * Move on current user-task and returns only new percentage of progress meter.
  81.      *
  82.      * Here we simulate a user-task that take many cycles to complete, and we
  83.      * don't know how many.
  84.      *
  85.      * @return  array
  86.      * @access  public
  87.      */
  88.     function updatePercentage()
  89.     {
  90.         $this->_updateStatus();
  91.         return $this->getStatus();
  92.     }
  93.  
  94.     /**
  95.      * Updates only progress meter status
  96.      *
  97.      * @return  void
  98.      * @access  private
  99.      */
  100.     function _updateStatus()
  101.     {
  102.         $newVal = $_SESSION['progressPercentage'] + mt_rand(1, 25);
  103.         $_SESSION['progressPercentage'] = min(100, $newVal);
  104.         $this->status['percentage'] = $_SESSION['progressPercentage'];
  105.     }
  106. }
  107. ?>

bluesand2.css

  1. #PB1 .cellI, #PB1 .cellA {
  2.   width: 10px;
  3.   height: 20px;
  4.   font-family: Courier, Verdana;
  5.   font-size: 8px;
  6.   float: left;
  7. }
  8.  
  9. #PB1 .progressBorder {
  10.   width: 122px;
  11.   height: 24px;
  12.   border-width: 1px;
  13.   border-style: solid;
  14.   border-color: navy;
  15.   background-color: #FFFFFF;
  16. }
  17.  
  18. #PB1 .progressPercentLabel {
  19.   width: 60px;
  20.   text-align: center;
  21.   background-color: transparent;
  22.   font-size: 14px;
  23.   font-family: Verdana, Tahoma, Arial;
  24.   font-weight: normal;
  25.   color: #000000;
  26. }
  27.  
  28. #PB1 .cellI {
  29.   background-color: #EEEECC;
  30. }
  31.  
  32. #PB1 .cellA {
  33.   background-color: #3874B4;
  34. }