PEAR Progress2 logo

HTML_Progress2 : The Definitive Guide

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.

<?php
require_once 'HTML/Progress2/Monitor.php';

function myProcess($pValue, &$pBar) 5
{
    global $pm;
    static $c;

    if (!isset($c)) {
        $c = 0;
    }
    $c += 16;
    $pm->setCaption('completed %step% out of 400', array('step' => $c));

    $pBar->sleep(); 3

    if ($c >= 240 && $pBar->isIndeterminate()) {
        $pBar->setIndeterminate(false); 1
        $pBar->setValue(0); 2
    }
    if ($pBar->getPercentComplete() == 1) {
        if ($pBar->isIndeterminate()) {
            $pBar->setValue(0);
        }
    }
}

$pm = new HTML_Progress2_Monitor('frmMonitor',
    array( 'button' => array('style' => 'width:80px;'),
           'title'  => 'Progress ...' )
);

$pb =& $pm->getProgressElement(); 6
$pb->setAnimSpeed(200); 3
$pb->setIncrement(10); 3
$pb->setProgressAttributes('background-color=#E0E0E0');
$pb->setCellAttributes('active-color=#996');
$pb->setLabelAttributes('pct1', 'color=#996');
$pb->setLabelAttributes('monitorStatus', 'color=black font-size=10');
$pb->setIndeterminate(true); 4
$pb->setProgressHandler('myProcess'); 5

//$pm->setProgressElement($pb); 6
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Waiting for resource ... (simulation)</title>
<style type="text/css">
<!--
body {
    background-color: #444444;
    font-family: Verdana, Arial;
}

<?php echo $pm->getStyle(); ?>
// -->
</style>
<?php echo $pm->getScript(false); ?>
</head>
<body>

<?php
$renderer =& HTML_QuickForm::defaultRenderer();
$renderer->setFormTemplate('
<form{attributes}>
  <table width="450" border="0" cellpadding="3" cellspacing="2" bgcolor="#CCCC99">
  {content}
  </table>
</form>
');
$renderer->setElementTemplate('
  <tr>
    <td valign="top" style="padding-left:15px;">
    {element}
    </td>
  </tr>
');
$renderer->setHeaderTemplate('
  <tr>
  <td style="background:#996;color:#ffc;" align="left" colspan="2">
    <b>{header}</b>
  </td>
  </tr>
');
$pm->accept($renderer); 7

echo $renderer->toHtml();
$pm->run();
?>

</body>
</html>
    

1

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

2

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

3

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

4

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

5

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

6

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.

[Caution] Caution
Notice the & that means you work by reference.

7

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.1.0 : August 12, 2006