PEAR Progress2 logo

HTML_Progress2 : The Definitive Guide

Progress Monitor usage
Prev  Chapter 6. Indeterminate Mode  Next

Progress Monitor usage

Here is a preview of a progress monitor in indeterminate mode with a custom layout. Differences with basic concept resides mainly into QF renders.

[Important] Important
When you had choice of processing strategy with simple progress meter, it's not the same with a progress monitor.

Due to its architecture, progress monitor only work with progress meter and user callback.

Even if it's pretty same concept as basic example, let's review step by step how the monitor is implemented with a user callback.

  1. <?php
  2. require_once 'HTML/Progress2/Monitor.php';
  3.  
  4. function myProcess($pValue, &$pBar)
  5. {
  6.     global $pm;
  7.     static $c;
  8.  
  9.     if (!isset($c)) {
  10.         $c = 0;
  11.     }
  12.     $c += 16;
  13.     $pm->setCaption('completed %step% out of 400', array('step' => $c));
  14.  
  15.     $pBar->sleep();
  16.  
  17.     if ($c >= 240 && $pBar->isIndeterminate()) {
  18.         $pBar->setIndeterminate(false);
  19.         $pBar->setValue(0);
  20.     }
  21.     if ($pBar->getPercentComplete() == 1) {
  22.         if ($pBar->isIndeterminate()) {
  23.             $pBar->setValue(0);
  24.         }
  25.     }
  26. }
  27.  
  28. $pm = new HTML_Progress2_Monitor('frmMonitor',
  29.     array( 'button' => array('style' => 'width:80px;'),
  30.            'title'  => 'Progress ...' )
  31. );
  32.  
  33. $pb =& $pm->getProgressElement();
  34. $pb->setAnimSpeed(200);
  35. $pb->setIncrement(10);
  36. $pb->setProgressAttributes('background-color=#E0E0E0');
  37. $pb->setCellAttributes('active-color=#996');
  38. $pb->setLabelAttributes('pct1', 'color=#996');
  39. $pb->setLabelAttributes('monitorStatus', 'color=black font-size=10');
  40. $pb->setIndeterminate(true);
  41. $pb->setProgressHandler('myProcess');
  42.  
  43. //$pm->setProgressElement($pb);
  44. ?>
  45. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  46.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  47. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  48. <head>
  49. <title>Waiting for resource ... (simulation)</title>
  50. <style type="text/css">
  51. <!--
  52. body {
  53.     background-color: #444444;
  54.     font-family: Verdana, Arial;
  55. }
  56.  
  57. <?php echo $pm->getStyle(); ?>
  58.  -->
  59. </style>
  60. <?php echo $pm->getScript(false); ?>
  61. </head>
  62. <body>
  63.  
  64. <?php
  65. $renderer =& HTML_QuickForm::defaultRenderer();
  66. $renderer->setFormTemplate('
  67. <form{attributes}>
  68.  <table width="450" border="0" cellpadding="3" cellspacing="2" bgcolor="#CCCC99">
  69.  {content}
  70.  </table>
  71. </form>
  72. ');
  73. $renderer->setElementTemplate('
  74.  <tr>
  75.    <td valign="top" style="padding-left:15px;">
  76.    {element}
  77.    </td>
  78.  </tr>
  79. ');
  80. $renderer->setHeaderTemplate('
  81.  <tr>
  82.  <td style="background:#996;color:#ffc;" align="left" colspan="2">
  83.    <b>{header}</b>
  84.  </td>
  85.  </tr>
  86. ');
  87. $pm->accept($renderer);
  88.  
  89. echo $renderer->toHtml();
  90. $pm->run();
  91. ?>
  92.  
  93. </body>
  94. </html>
Line 18 :

Once the progress bar is switch back to determinate mode, we will reset value to zero to start a new standard cycle (from 0 to 100%).

Line 19 :

Without this reset step, the progress meter continue until end (100%) from its current position (unpredictable).

Lines 15, 34, 35 :

Increment is set to 10 to give, with a 0.2 second (200 milisecond) delay, a smooth animation.

Line 40 :

Indeterminate mode is activated(/desactivated) only with setIndeterminate() method.

Lines 4-26, 41 :

myProcess function is the user process that will simulate a waiting resource (that become available on value 240/400), and finish in determinate mode.

Lines 33, 43 :

You need to use setProgressElement() method when you build a complete progress bar from scratch, and don't reuse the basic version included into Progress Monitor. Or if you won't work by reference.

[Warning] Warning
If you change an html layout element such as, cell size, cell count, progress shape ... and you forget to add line 43, then no change you should expected will be applied.
[Caution] Caution
Notice the & that means you work by reference.
Line 87 :

This Progress Monitor use a QF renderer defined by its custom elements:

  • [QF window presentation] setFormTemplate()

  • [QF meter/buttons line] setElementTemplate()

  • [QF window title] setHeaderTemplate()

HTML_Progress2 : The Definitive Guide v 2.4.0 : April 20, 2007
Prev  Up  Next
Chapter 6. Indeterminate Mode  Home  Chapter 7. Listener