PEAR Progress2 logo

HTML_Progress2 : The Definitive Guide

Default improved render
Prev  Chapter 8. Quick Start with HTML_Progress2_Monitor  Next

Default improved render

With some options and a new QF renderer, we will improve a lot in few lines, the decent but poor graphic of first example. Enjoy the new result:

Lets review now, how to do this in source code below:

  1. <?php
  2. require_once 'HTML/Progress2/Monitor.php';
  3.  
  4. function myFunctionHandler($pValue, &$pb)
  5. {
  6.     global $pm;
  7.  
  8.     $pb->sleep();
  9.  
  10.     if ((fmod($pValue,10) == 0) and ($pValue > 0)) {
  11.         $pm->setCaption('myFunctionHandler -> progress value is = '.$pValue);
  12.     }
  13. }
  14.  
  15. $pm = new HTML_Progress2_Monitor('frmMonitor', array(
  16.     'button' => array('style' => 'width:80px;'),
  17. ));
  18.  
  19. $pb =& $pm->getProgressElement();
  20. $pb->setAnimSpeed(75);
  21. $pb->setCellCount(20);
  22. $pb->setProgressAttributes('background-color=#EEE');
  23. $pb->setCellAttributes('inactive-color=#FFF active-color=#444444');
  24. $pb->setLabelAttributes('pct1', 'color=navy');
  25. $pb->setLabelAttributes('monitorStatus', 'color=navy font-size=10');
  26. $pb->setProgressHandler('myFunctionHandler');
  27.  
  28. $pm->setProgressElement($pb);
  29. ?>
  30. <html>
  31. <head>
  32. <?php
  33. echo $pm->getStyle(false);
  34. echo $pm->getScript(false);
  35. ?>
  36. </head>
  37. <body>
  38. <?php
  39. $renderer =& HTML_QuickForm::defaultRenderer();
  40. $renderer->setFormTemplate('
  41. <form{attributes}>
  42.  <table width="450" border="0" cellpadding="3" cellspacing="2" bgcolor="#EEEEEE">
  43.  {content}
  44.  </table>
  45. </form>
  46. ');
  47. $renderer->setElementTemplate('
  48.  <tr>
  49.    <td valign="top" style="padding-left:15px;">
  50.    {element}
  51.    </td>
  52.  </tr>
  53. ');
  54. $renderer->setHeaderTemplate('
  55.  <tr>
  56.    <td style="background:#7B7B88;color:#ffc;" align="left" colspan="2">
  57.      <b>{header}</b>
  58.    </td>
  59.  </tr>
  60. ');
  61. $pm->accept($renderer);
  62.  
  63. echo $renderer->toHtml();
  64. $pm->run();
  65. ?>
  66. </body>
  67. </html>
Lines 4-13, 26 :

User callback attached to progress meter should be the main task to do. Here we have simplified task to display a message in the monitor caption zone.

Line 17 :

Customization begin by using some HTML_Progress2_Monitor options on new instance construction.

Monitor dialog box is renamed to frmMonitor, and buttons (start, cancel) are 80 pixels width.

Lines 11, 25 :

The monitor caption zone is named by default monitorStatus, and behind it's a progress meter label.

[Warning] Warning
A text label is by default aligned on top left of the progress meter, but for the progress monitor, default is bottom left alignement.
Lines 39, 40, 47, 54 :

Layout is mainly modified by the QF renderer through three template elements: FormTemplate, ElementTemplate, HeaderTemplate.

Line 63 :

Show initial state of progress monitor before running. We can't used here the display() method as in previous example.

Now we know how to customize the skin, in next example we will see how to combine a task with events observation.

HTML_Progress2 : The Definitive Guide v 2.4.0 : April 20, 2007
Prev  Up  Next
Default render  Home  Sigma template engine integration