PEAR Progress2 logo

HTML_Progress2 : The Definitive Guide

Sigma template engine integration
Prev  Chapter 8. Quick Start with HTML_Progress2_Monitor  Next

Sigma template engine integration

After we have seen how to modify layout presentation, and how to link monitor with the main user task. We will now see how to combine a work to do (task) and listen events when they are triggered.

In this example we will simulate pictures upload monitoring. Here is a preview of final result.

  1. <?php
  2. require_once 'HTML/Progress2/Monitor.php';
  3. require_once 'HTML/QuickForm/Renderer/ITDynamic.php';
  4. require_once 'HTML/Template/Sigma.php';
  5.  
  6. function getmicrotime($time)
  7. {
  8.     list($usec, $sec) = explode(' ', $time);
  9.     return ((float)$usec + (float)$sec);
  10.  
  11. }
  12.  
  13. class myObservatory
  14. {
  15.     function myObserver(&$notification)
  16.     {
  17.         static $time_start;
  18.         global $pm;
  19.  
  20.         $notifyName = $notification->getNotificationName();
  21.         $notifyInfo = $notification->getNotificationInfo();
  22.         $notifyObj  =&$notification->getNotificationObject();
  23.  
  24.         switch ($notifyName) {
  25.             case 'onSubmit':
  26.                 $time_start = getmicrotime($notifyInfo['time']);
  27.                 break;
  28.             case 'onLoad':
  29.                 $time_elapse = getmicrotime($notifyInfo['time']) - $time_start;
  30.                 $pm->setCaption("upload done (elapse time = $time_elapse  sec.)");
  31.                 break;
  32.             case 'onChange':
  33.                 $pValue = $notifyInfo['value'];
  34.                 if ($pValue == 10) {
  35.                     $pic = 'picture1.jpg';
  36.                 } elseif ($pValue == 45) {
  37.                     $pic = 'picture2.jpg';
  38.                 } elseif ($pValue == 70) {
  39.                     $pic = 'picture3.jpg';
  40.                 } else {
  41.                     $pic = false;
  42.                 }
  43.                 if ($pic) {
  44.                     $pm->setCaption("upload $pic in progress ... "
  45.                                   . "Start at $pValue%");
  46.                 }
  47.         }
  48.         $notifyObj->sleep();
  49.     }
  50. }
  51.  
  52. $pm = new HTML_Progress2_Monitor('uploadMonitor', array(
  53.     'title'  => 'Upload your pictures',
  54.     'start'  => 'Upload',
  55.     'cancel' => 'Stop',
  56.     'button' => array('style' => 'width:80px;')
  57. ));
  58.  
  59. $pb =& $pm->getProgressElement();
  60. $pb->setAnimSpeed(50);
  61. $pb->setCellCount(20);
  62. $pb->setProgressAttributes('background-color=#EEE');
  63. $pb->setCellAttributes('inactive-color=#FFF active-color=#444');
  64. $pb->setLabelAttributes('pct1', 'color=navy');
  65. $pb->setLabelAttributes('monitorStatus', 'color=navy font-size=10');
  66. $pb->addListener(array('myObservatory','myObserver'));
  67.  
  68. $pm->setProgressElement($pb);
  69.  
  70. $tpl =& new HTML_Template_Sigma('.');
  71. $tpl->loadTemplateFile('itdynamic.html');
  72.  
  73. $tpl->setVariable(array(
  74.     'qf_style'  => $pm->getStyle(),
  75.     'qf_script' => $pm->getScript(false)
  76. ));
  77.  
  78. $renderer =& new HTML_QuickForm_Renderer_ITDynamic($tpl);
  79. $renderer->setElementBlock(array('buttons' => 'qf_buttons'));
  80.  
  81. $pm->accept($renderer);
  82.  
  83. $tpl->show();
  84. $pm->run();
  85. ?>
  86. </body>
  87. </html>
Lines 13-50, 66 :

Main task (upload pictures simulation) is combined with events observation. User callback is not attached to the progress meter but as an observer (myObserver() method of myObservatory class).

Lines 22, 48, 59 :

Progress meter linked to the monitor is retrieved in observer user callback as instance $notifyObj. Smooth animation with HTML_Progress2::sleep() is then possible.

Lines 74, 75 :

Cascading style sheet and javascript code are merged into template file itdynamic.html for a good progress meter presentation and handling.

Lines 70, 78 :

This time we use QF ITDynamic renderer and Sigma as template engine.

Template file itdynamic.html used by Sigma is:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  4. <head>
  5. <title>Progress2 Monitor - ITDynamic renderer </title>
  6. <style type="text/css">
  7. <!--
  8. body {
  9.     font-family: Verdana, Arial;
  10. }
  11. th {
  12.     font-family: sans-serif;
  13.     font-size: small;
  14.     color: #FFF;
  15.     background-color: #AAA;
  16. }
  17. .maintable {
  18.     border: thin dashed #D0D0D0;
  19.     background-color : #EEE;
  20. }
  21. {qf_style}
  22.  -->
  23. </style>
  24. {qf_script}
  25. </head>
  26. <body>
  27.  
  28. <h1>ITDynamic QF renderer</h1>
  29. <p>This example simulate a pictures uploads.<br/>
  30. First image upload at 10%, second at 45%, and third at 70%.</p>
  31.  
  32. <form{qf_attributes}>
  33. <!-- BEGIN qf_hidden_block -->
  34. <div style="display: none;">
  35.   <!-- BEGIN qf_hidden_loop -->{qf_hidden}<!-- END qf_hidden_loop -->
  36. </div>
  37. <!-- END qf_hidden_block -->
  38.  
  39. <table class="maintable" width="600" align="center">
  40. <!-- BEGIN qf_main_loop -->
  41. <tr><td valign="top">
  42.   <table width="100%" cellpadding="4">
  43.   <!-- BEGIN qf_header --><tr><th>{qf_header}</th></tr><!-- END qf_header -->
  44.   <!-- BEGIN qf_element --><tr><td>{qf_element}</td></tr><!-- END qf_element -->
  45.   </table>
  46. </td>
  47. </tr>
  48. <!-- END qf_main_loop -->
  49. </table>
  50.  
  51. <!-- BEGIN qf_buttons -->
  52. <table width="600" align="center">
  53. <tr>
  54.   <td align="right">
  55. <!-- BEGIN qf_buttons_loop -->
  56.   <!-- BEGIN qf_buttons_element -->{qf_separator}{qf_element}<!-- END qf_buttons_element -->
  57. <!-- END qf_buttons_loop -->
  58.   </td>
  59. </tr>
  60. </table>
  61. <!-- END qf_buttons -->
  62.  
  63. </form>
  64.  
  65. <!-- BEGIN qf_errors -->
  66. <!-- BEGIN qf_error_loop -->
  67. {qf_error}<br />
  68. <!-- END qf_error_loop -->
  69. <!-- END qf_errors -->
HTML_Progress2 : The Definitive Guide v 2.4.0 : April 20, 2007
Prev  Up  Next
Default improved render  Home  Chapter 9. Quick Start with HTML_Progress2_Generator