![]() HTML_Progress2 : The Definitive Guide
|
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.
<?php require_once 'HTML/Progress2/Monitor.php'; require_once 'HTML/QuickForm/Renderer/ITDynamic.php'; require_once 'HTML/Template/Sigma.php'; function getmicrotime($time) { list($usec, $sec) = explode(' ', $time); return ((float)$usec + (float)$sec); } class myObservatory { function myObserver(&$notification){ static $time_start; global $pm; $notifyName = $notification->getNotificationName(); $notifyInfo = $notification->getNotificationInfo(); $notifyObj =&$notification->getNotificationObject();
switch ($notifyName) { case 'onSubmit': $time_start = getmicrotime($notifyInfo['time']); break; case 'onLoad': $time_elapse = getmicrotime($notifyInfo['time']) - $time_start; $pm->setCaption("upload done (elapse time = $time_elapse sec.)"); break; case 'onChange': $pValue = $notifyInfo['value']; if ($pValue == 10) { $pic = 'picture1.jpg'; } elseif ($pValue == 45) { $pic = 'picture2.jpg'; } elseif ($pValue == 70) { $pic = 'picture3.jpg'; } else { $pic = false; } if ($pic) { $pm->setCaption("upload $pic in progress ... " . "Start at $pValue%"); } } $notifyObj->sleep();
} } $pm = new HTML_Progress2_Monitor('uploadMonitor', array( 'title' => 'Upload your pictures', 'start' => 'Upload', 'cancel' => 'Stop', 'button' => array('style' => 'width:80px;') )); $pb =& $pm->getProgressElement();
$pb->setAnimSpeed(50); $pb->setCellCount(20); $pb->setProgressAttributes('background-color=#EEE'); $pb->setCellAttributes('inactive-color=#FFF active-color=#444'); $pb->setLabelAttributes('pct1', 'color=navy'); $pb->setLabelAttributes('monitorStatus', 'color=navy font-size=10'); $pb->addListener(array('myObservatory','myObserver'));
$pm->setProgressElement($pb); $tpl =& new HTML_Template_Sigma('.');
$tpl->loadTemplateFile('itdynamic.html'); $tpl->setVariable(array( 'qf_style' => $pm->getStyle(),
'qf_script' => $pm->getScript(false)
)); $renderer =& new HTML_QuickForm_Renderer_ITDynamic($tpl);
$renderer->setElementBlock(array('buttons' => 'qf_buttons')); $pm->accept($renderer); $tpl->show(); $pm->run(); ?> </body> </html>
Template file itdynamic.html used by Sigma is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Progress2 Monitor - ITDynamic renderer </title> <style type="text/css"> <!-- body { font-family: Verdana, Arial; } th { font-family: sans-serif; font-size: small; color: #FFF; background-color: #AAA; } .maintable { border: thin dashed #D0D0D0; background-color : #EEE; } {qf_style} --> </style> {qf_script} </head> <body> <h1>ITDynamic QF renderer</h1> <p>This example simulate a pictures uploads.<br/> First image upload at 10%, second at 45%, and third at 70%.</p> <form{qf_attributes}> <!-- BEGIN qf_hidden_block --> <div style="display: none;"> <!-- BEGIN qf_hidden_loop -->{qf_hidden}<!-- END qf_hidden_loop --> </div> <!-- END qf_hidden_block --> <table class="maintable" width="600" align="center"> <!-- BEGIN qf_main_loop --> <tr><td valign="top"> <table width="100%" cellpadding="4"> <!-- BEGIN qf_header --><tr><th>{qf_header}</th></tr><!-- END qf_header --> <!-- BEGIN qf_element --><tr><td>{qf_element}</td></tr><!-- END qf_element --> </table> </td> </tr> <!-- END qf_main_loop --> </table> <!-- BEGIN qf_buttons --> <table width="600" align="center"> <tr> <td align="right"> <!-- BEGIN qf_buttons_loop --> <!-- BEGIN qf_buttons_element -->{qf_separator}{qf_element}<!-- END qf_buttons_element --> <!-- END qf_buttons_loop --> </td> </tr> </table> <!-- END qf_buttons --> </form> <!-- BEGIN qf_errors --> <!-- BEGIN qf_error_loop --> {qf_error}<br /> <!-- END qf_error_loop --> <!-- END qf_errors -->
HTML_Progress2 : The Definitive Guide | v 2.1.0 : August 12, 2006 |