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

sample screenshot

Demonstration

Give it a try

Dependencies

And also but optional :

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

Source Code

default3.php

  1. <?php
  2. /**
  3. * Basic AJAX example that used an auto server to handle progress bar responses
  4. * Same as example default2.php, but its also multiple-labels system compatible.
  5. *
  6. * @author     Laurent Laville <pear@laurent-laville.org>
  7. * @package    HTML_Progress2
  8. * @subpackage Examples
  9. * @access     public
  10. */
  11.  
  12. if (isset($_GET['reload'])) {
  13.     session_start();
  14.     unset($_SESSION['progressPercentage']);
  15.     session_destroy();
  16.     die('Job is over !');
  17. }
  18.  
  19. require_once 'HTML/Progress2.php';
  20.  
  21. $pb = new HTML_Progress2();
  22. $pb->addLabel(HTML_PROGRESS2_LABEL_TEXT, 'txt1', 'Basic AJAX Progress2 example 3');
  23. $pb->addLabel(HTML_PROGRESS2_LABEL_TEXT, 'txt2', 'caption ...');
  24. $pb->setLabelAttributes('txt2', array('valign' => 'bottom'));
  25. $pb->setCellCount(20);
  26. $pb->setCellAttributes(array(
  27.     'active-color' => '#000084',
  28.     'inactive-color' => '#3A6EA5',
  29.     'width' => 25,
  30.     'spacing' => 0,
  31.     'background-image' => 'download.gif'
  32. ));
  33. $pb->setBorderPainted(true);
  34. $pb->setBorderAttributes('width=1 style=inset color=white');
  35. $pb->setLabelAttributes('pct1', array(
  36.     'width' => 60,
  37.     'font-size' => 10,
  38.     'align' => 'center',
  39.     'valign' => 'left'
  40. ));
  41. $pb->registerAJAX('auto_server.php', array('RequestFullStatus'));
  42. ?>
  43. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  44.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  45. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  46. <head>
  47. <title>Basic Ajax Progress2 example 3</title>
  48. <style type="text/css">
  49. <!--
  50. <?php echo $pb->getStyle(); ?>
  51.  
  52. body {background-color: #EEEEEE; }
  53.  -->
  54. </style>
  55. <script type="text/javascript" src="HTML_Progress2.js"></script>
  56. <?php
  57. echo $pb->setupAJAX();
  58. ?>
  59. <script type="text/javascript">
  60. //<![CDATA[
  61. HTML_Progress2.serverClassName  = 'RequestFullStatus';
  62. HTML_Progress2.serverMethodName = 'updateTask';
  63. //]]>
  64. </script>
  65. </head>
  66. <body>
  67.  
  68. <a href="javascript:HTML_Progress2.start('<?php echo $pb->getIdent(); ?>');">Start</a>
  69. <?php $pb->display(); ?>
  70.  
  71. </body>
  72. </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. ?>