<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>
Sigma template engine integration
</title>
<link rel="stylesheet" href="book.css" type="text/css" />
<meta name="generator" content="DocBook XSL Stylesheets V1.69.1" />
<link rel="start" href="index.html" title="HTML_Progress2 Manual" />
<link rel="up" href="ch08.html" title=
"Chapter 8. Quick Start with HTML_Progress2_Monitor" />
<link rel="prev" href="ch08s03.html" title="Default improved render" />
<link rel="next" href="ch09.html" title=
"Chapter 9. Quick Start with HTML_Progress2_Generator" />
<style type="text/css">
/*<![CDATA[*/
body {
background-color: white;
color: black;
}
:link { color: #0000FF }
:visited { color: #840084 }
:active { color: #0000FF }
div.c2 {font-family: monospace;}
h2.c1 {clear: both}
/*]]>*/
</style>
</head>
<body>
<table class="progress2Header">
<tr>
<td>
<img src="img/pear_progress2.gif" align="left" alt=
"PEAR Progress2 logo" />
<h1>
HTML_Progress2 : The Definitive Guide
</h1>
<div class="navheader">
<table width="100%" summary="Navigation header">
<tr>
<th colspan="3" align="center">
Sigma template engine integration
</th>
</tr>
<tr>
<td width="20%" align="left">
<a accesskey="p" href="ch08s03.html">Prev</a>
</td>
<th width="60%" align="center">
Chapter 8. Quick Start with HTML_Progress2_Monitor
</th>
<td width="20%" align="right">
<a accesskey="n" href="ch09.html">Next</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<div class="sect1" lang="en" xml:lang="en">
<div class="titlepage">
<h2 class="title c1">
<a name="monitor.sigma" id="monitor.sigma"></a>Sigma template engine
integration
</h2>
</div>
<p>
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.
</p>
<p>
In this example we will simulate pictures upload monitoring. Here is a
preview of final result.
</p>
<div class="screenshot">
<img src="img/monitor2.png" alt="" />
</div>
<div class="php c2">
<ol>
<li class="li1">
<div class="de1">
<span class="kw2"><?php</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">require_once</span> <span class=
"st0">'HTML/Progress2/Monitor.php'</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">require_once</span> <span class=
"st0">'HTML/QuickForm/Renderer/ITDynamic.php'</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">require_once</span> <span class=
"st0">'HTML/Template/Sigma.php'</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">function</span> getmicrotime<span class=
"br0">(</span><span class="re1">$time</span><span class=
"br0">)</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw3">list</span><span class=
"br0">(</span><span class="re1">$usec</span><span class=
"sy0">,</span> <span class="re1">$sec</span><span class=
"br0">)</span> <span class="sy0">=</span> <span class=
"kw3">explode</span><span class="br0">(</span><span class="st0">'
'</span><span class="sy0">,</span> <span class=
"re1">$time</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">return</span> <span class=
"br0">(</span><span class="br0">(</span>float<span class=
"br0">)</span><span class="re1">$usec</span> <span class=
"sy0">+</span> <span class="br0">(</span>float<span class=
"br0">)</span><span class="re1">$sec</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1 ln-xtra">
<div class="de1">
<span class="kw2">class</span> myObservatory
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">function</span>
myObserver<span class="br0">(</span><span class=
"sy0">&</span><span class=
"re1">$notification</span><span class="br0">)</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw3">static</span>
<span class="re1">$time_start</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw3">global</span>
<span class="re1">$pm</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$notifyName</span>
<span class="sy0">=</span> <span class=
"re1">$notification</span><span class=
"sy0">-></span><span class=
"me1">getNotificationName</span><span class=
"br0">(</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$notifyInfo</span>
<span class="sy0">=</span> <span class=
"re1">$notification</span><span class=
"sy0">-></span><span class=
"me1">getNotificationInfo</span><span class=
"br0">(</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1 ln-xtra">
<div class="de1">
<span class="re1">$notifyObj</span>
<span class="sy0">=&</span><span class=
"re1">$notification</span><span class=
"sy0">-></span><span class=
"me1">getNotificationObject</span><span class=
"br0">(</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">switch</span>
<span class="br0">(</span><span class=
"re1">$notifyName</span><span class="br0">)</span> <span class=
"br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"kw1">case</span> <span class="st0">'onSubmit'</span><span class=
"sy0">:</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$time_start</span> <span class="sy0">=</span>
getmicrotime<span class="br0">(</span><span class=
"re1">$notifyInfo</span><span class="br0">[</span><span class=
"st0">'time'</span><span class="br0">]</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">break</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"kw1">case</span> <span class="st0">'onLoad'</span><span class=
"sy0">:</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$time_elapse</span> <span class="sy0">=</span>
getmicrotime<span class="br0">(</span><span class=
"re1">$notifyInfo</span><span class="br0">[</span><span class=
"st0">'time'</span><span class="br0">]</span><span class=
"br0">)</span> <span class="sy0">-</span> <span class=
"re1">$time_start</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pm</span><span class=
"sy0">-></span><span class="me1">setCaption</span><span class=
"br0">(</span><span class="st0">"upload done (elapse time =
$time_elapse sec.)"</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">break</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"kw1">case</span> <span class="st0">'onChange'</span><span class=
"sy0">:</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pValue</span> <span class="sy0">=</span>
<span class="re1">$notifyInfo</span><span class=
"br0">[</span><span class="st0">'value'</span><span class=
"br0">]</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">if</span> <span class=
"br0">(</span><span class="re1">$pValue</span> <span class=
"sy0">==</span> <span class="nu0">10</span><span class=
"br0">)</span> <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pic</span> <span class="sy0">=</span>
<span class="st0">'picture1.jpg'</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span> <span class="kw1">elseif</span>
<span class="br0">(</span><span class="re1">$pValue</span>
<span class="sy0">==</span> <span class=
"nu0">45</span><span class="br0">)</span> <span class=
"br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pic</span> <span class="sy0">=</span>
<span class="st0">'picture2.jpg'</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span> <span class="kw1">elseif</span>
<span class="br0">(</span><span class="re1">$pValue</span>
<span class="sy0">==</span> <span class=
"nu0">70</span><span class="br0">)</span> <span class=
"br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pic</span> <span class="sy0">=</span>
<span class="st0">'picture3.jpg'</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span> <span class="kw1">else</span>
<span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pic</span> <span class="sy0">=</span>
<span class="kw2">false</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">if</span> <span class=
"br0">(</span><span class="re1">$pic</span><span class=
"br0">)</span> <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pm</span><span class=
"sy0">-></span><span class="me1">setCaption</span><span class=
"br0">(</span><span class="st0">"upload $pic in progress ...
"</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0">.</span> <span class="st0">"Start at
$pValue%"</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1 ln-xtra">
<div class="de1">
<span class=
"re1">$notifyObj</span><span class="sy0">-></span><span class=
"me1">sleep</span><span class="br0">(</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pm</span> <span class="sy0">=</span>
<span class="kw2">new</span> HTML_Progress2_Monitor<span class=
"br0">(</span><span class=
"st0">'uploadMonitor'</span><span class="sy0">,</span>
<span class="kw3">array</span><span class="br0">(</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'title'</span> <span class=
"sy0">=></span> <span class="st0">'Upload your
pictures'</span><span class="sy0">,</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'start'</span> <span class=
"sy0">=></span> <span class="st0">'Upload'</span><span class=
"sy0">,</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'cancel'</span> <span class=
"sy0">=></span> <span class="st0">'Stop'</span><span class=
"sy0">,</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'button'</span> <span class=
"sy0">=></span> <span class="kw3">array</span><span class=
"br0">(</span><span class="st0">'style'</span> <span class=
"sy0">=></span> <span class=
"st0">'width:80px;'</span><span class="br0">)</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">)</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1 ln-xtra">
<div class="de1">
<span class="re1">$pb</span> <span class="sy0">=&</span>
<span class="re1">$pm</span><span class=
"sy0">-></span><span class=
"me1">getProgressElement</span><span class=
"br0">(</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setAnimSpeed</span><span class="br0">(</span><span class=
"nu0">50</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setCellCount</span><span class="br0">(</span><span class=
"nu0">20</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setProgressAttributes</span><span class=
"br0">(</span><span class=
"st0">'background-color=#EEE'</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setCellAttributes</span><span class=
"br0">(</span><span class="st0">'inactive-color=#FFF
active-color=#444'</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setLabelAttributes</span><span class=
"br0">(</span><span class="st0">'pct1'</span><span class=
"sy0">,</span> <span class="st0">'color=navy'</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setLabelAttributes</span><span class=
"br0">(</span><span class=
"st0">'monitorStatus'</span><span class="sy0">,</span>
<span class="st0">'color=navy font-size=10'</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1 ln-xtra">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">addListener</span><span class="br0">(</span><span class=
"kw3">array</span><span class="br0">(</span><span class=
"st0">'myObservatory'</span><span class=
"sy0">,</span><span class="st0">'myObserver'</span><span class=
"br0">)</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pm</span><span class=
"sy0">-></span><span class=
"me1">setProgressElement</span><span class=
"br0">(</span><span class="re1">$pb</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1 ln-xtra">
<div class="de1">
<span class="re1">$tpl</span> <span class="sy0">=&</span>
<span class="kw2">new</span> HTML_Template_Sigma<span class=
"br0">(</span><span class="st0">'.'</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$tpl</span><span class=
"sy0">-></span><span class=
"me1">loadTemplateFile</span><span class=
"br0">(</span><span class=
"st0">'itdynamic.html'</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$tpl</span><span class=
"sy0">-></span><span class=
"me1">setVariable</span><span class="br0">(</span><span class=
"kw3">array</span><span class="br0">(</span>
</div>
</li>
<li class="li1 ln-xtra">
<div class="de1">
<span class="st0">'qf_style'</span>
<span class="sy0">=></span> <span class=
"re1">$pm</span><span class="sy0">-></span><span class=
"me1">getStyle</span><span class="br0">(</span><span class=
"br0">)</span><span class="sy0">,</span>
</div>
</li>
<li class="li1 ln-xtra">
<div class="de1">
<span class="st0">'qf_script'</span> <span class=
"sy0">=></span> <span class="re1">$pm</span><span class=
"sy0">-></span><span class="me1">getScript</span><span class=
"br0">(</span><span class="kw2">false</span><span class=
"br0">)</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">)</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1 ln-xtra">
<div class="de1">
<span class="re1">$renderer</span> <span class=
"sy0">=&</span> <span class="kw2">new</span>
HTML_QuickForm_Renderer_ITDynamic<span class=
"br0">(</span><span class="re1">$tpl</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$renderer</span><span class=
"sy0">-></span><span class=
"me1">setElementBlock</span><span class=
"br0">(</span><span class="kw3">array</span><span class=
"br0">(</span><span class="st0">'buttons'</span> <span class=
"sy0">=></span> <span class=
"st0">'qf_buttons'</span><span class="br0">)</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pm</span><span class=
"sy0">-></span><span class="me1">accept</span><span class=
"br0">(</span><span class="re1">$renderer</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$tpl</span><span class=
"sy0">-></span><span class="me1">show</span><span class=
"br0">(</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pm</span><span class=
"sy0">-></span><span class="me1">run</span><span class=
"br0">(</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">?></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"></</span>body<span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"></</span>html<span class="sy0">></span>
</div>
</li>
</ol>
</div>
<div class="variablelist">
<dl>
<dt>
<span class="term">Lines 13-50, 66 :</span>
</dt>
<dd>
<p>
Main task (upload pictures simulation) is combined with events
observation. User callback is not attached to the progress meter
but as an observer (<code class="methodname">myObserver()</code>
method of <code class="classname">myObservatory</code> class).
</p>
</dd>
<dt>
<span class="term">Lines 22, 48, 59 :</span>
</dt>
<dd>
<p>
Progress meter linked to the monitor is retrieved in observer
user callback as instance <code class=
"varname">$notifyObj</code>. Smooth animation with <code class=
"methodname">HTML_Progress2::sleep()</code> is then possible.
</p>
</dd>
<dt>
<span class="term">Lines 74, 75 :</span>
</dt>
<dd>
<p>
Cascading style sheet and javascript code are merged into
template file <span class=
"bold"><strong>itdynamic.html</strong></span> for a good progress
meter presentation and handling.
</p>
</dd>
<dt>
<span class="term">Lines 70, 78 :</span>
</dt>
<dd>
<p>
This time we use QF ITDynamic renderer and Sigma as template
engine.
</p>
</dd>
</dl>
</div>
<p>
Template file <span class="bold"><strong>itdynamic.html</strong></span>
used by Sigma is:
</p>
<div class="html4strict c2">
<ol>
<li class="li1">
<div class="de1">
<span class="sc0"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc0">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2"><span class="kw2"><html</span>
xmlns<span class="sy0">=</span><span class=
"st0">"http://www.w3.org/1999/xhtml"</span> xml:<span class=
"kw3">lang</span><span class="sy0">=</span><span class=
"st0">"en"</span><span class="kw2">></span></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 kw2"><head></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 kw2"><title></span>Progress2 Monitor -
ITDynamic renderer <span class="sc2 kw2"></title></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2"><span class="kw2"><style</span> <span class=
"kw3">type</span><span class="sy0">=</span><span class=
"st0">"text/css"</span><span class="kw2">></span></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 coMULTI"><!--</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI">body {</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI"> font-family: Verdana,
Arial;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI">th {</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI"> font-family:
sans-serif;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI"> font-size: small;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI"> color: #FFF;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI"> background-color:
#AAA;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI">.maintable {</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI"> border: thin dashed
#D0D0D0;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI"> background-color :
#EEE;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI">{qf_style}</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI"> --></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 kw2"></style></span>
</div>
</li>
<li class="li1">
<div class="de1">
{qf_script}
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 kw2"></head></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 kw2"><body></span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 kw2"><h1></span>ITDynamic QF
renderer<span class="sc2 kw2"></h1></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 kw2"><p></span>This example simulate a
pictures uploads.<span class="sc2"><span class=
"kw2"><br</span><span class="sy0">/</span><span class=
"kw2">></span></span>
</div>
</li>
<li class="li1">
<div class="de1">
First image upload at 10%, second at 45%, and third at
70%.<span class="sc2 kw2"></p></span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2"><span class="kw2"><form</span><span class=
"br0">{</span>qf_attributes<span class="br0">}</span><span class=
"kw2">></span></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 coMULTI"><!-- BEGIN qf_hidden_block
--></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2"><span class="kw2"><div</span> <span class=
"kw3">style</span><span class="sy0">=</span><span class=
"st0">"display: none;"</span><span class="kw2">></span></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 coMULTI"><!-- BEGIN qf_hidden_loop
--></span>{qf_hidden}<span class="sc2 coMULTI"><!-- END
qf_hidden_loop --></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 kw2"></div></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 coMULTI"><!-- END qf_hidden_block
--></span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2"><span class="kw2"><table</span> <span class=
"kw3">class</span><span class="sy0">=</span><span class=
"st0">"maintable"</span> <span class=
"kw3">width</span><span class="sy0">=</span><span class=
"st0">"600"</span> <span class="kw3">align</span><span class=
"sy0">=</span><span class="st0">"center"</span><span class=
"kw2">></span></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 coMULTI"><!-- BEGIN qf_main_loop
--></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 kw2"><tr></span><span class=
"sc2"><span class="kw2"><td</span> <span class=
"kw3">valign</span><span class="sy0">=</span><span class=
"st0">"top"</span><span class="kw2">></span></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2"><span class="kw2"><table</span>
<span class="kw3">width</span><span class=
"sy0">=</span><span class="st0">"100%"</span> <span class=
"kw3">cellpadding</span><span class="sy0">=</span><span class=
"st0">"4"</span><span class="kw2">></span></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 coMULTI"><!-- BEGIN qf_header
--></span><span class="sc2 kw2"><tr></span><span class=
"sc2 kw2"><th></span>{qf_header}<span class=
"sc2 kw2"></th></span><span class=
"sc2 kw2"></tr></span><span class="sc2 coMULTI"><!-- END
qf_header --></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 coMULTI"><!-- BEGIN qf_element
--></span><span class="sc2 kw2"><tr></span><span class=
"sc2 kw2"><td></span>{qf_element}<span class=
"sc2 kw2"></td></span><span class=
"sc2 kw2"></tr></span><span class="sc2 coMULTI"><!-- END
qf_element --></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 kw2"></table></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 kw2"></td></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 kw2"></tr></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 coMULTI"><!-- END qf_main_loop --></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 kw2"></table></span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 coMULTI"><!-- BEGIN qf_buttons --></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2"><span class="kw2"><table</span> <span class=
"kw3">width</span><span class="sy0">=</span><span class=
"st0">"600"</span> <span class="kw3">align</span><span class=
"sy0">=</span><span class="st0">"center"</span><span class=
"kw2">></span></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 kw2"><tr></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2"><span class="kw2"><td</span>
<span class="kw3">align</span><span class=
"sy0">=</span><span class="st0">"right"</span><span class=
"kw2">></span></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 coMULTI"><!-- BEGIN qf_buttons_loop
--></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 coMULTI"><!-- BEGIN qf_buttons_element
--></span>{qf_separator}{qf_element}<span class=
"sc2 coMULTI"><!-- END qf_buttons_element --></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 coMULTI"><!-- END qf_buttons_loop
--></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 kw2"></td></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 kw2"></tr></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 kw2"></table></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 coMULTI"><!-- END qf_buttons --></span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 kw2"></form></span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 coMULTI"><!-- BEGIN qf_errors --></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 coMULTI"><!-- BEGIN qf_error_loop
--></span>
</div>
</li>
<li class="li1">
<div class="de1">
{qf_error}<span class="sc2"><span class="kw2"><br</span>
<span class="sy0">/</span><span class="kw2">></span></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 coMULTI"><!-- END qf_error_loop --></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2 coMULTI"><!-- END qf_errors --></span>
</div>
</li>
</ol>
</div>
</div>
<table class="progress2Footer">
<tr>
<td align="left">
HTML_Progress2 : The Definitive Guide
</td>
<td align="right">
v 2.4.0 : April 20, 2007
</td>
</tr>
</table>
<div class="navfooter">
<hr />
<table width="100%" summary="Navigation footer">
<tr>
<td width="40%" align="left">
<a accesskey="p" href="ch08s03.html">Prev</a>
</td>
<td width="20%" align="center">
<a accesskey="u" href="ch08.html">Up</a>
</td>
<td width="40%" align="right">
<a accesskey="n" href="ch09.html">Next</a>
</td>
</tr>
<tr>
<td width="40%" align="left" valign="top">
Default improved render
</td>
<td width="20%" align="center">
<a accesskey="h" href="index.html">Home</a>
</td>
<td width="40%" align="right" valign="top">
Chapter 9. Quick Start with
HTML_Progress2_Generator
</td>
</tr>
</table>
</div>
</body>
</html>
distrib
>
Mandriva
>
2010.0
>
i586
>
media
>
contrib-release
>
by-pkgid
>
89346381d9fb64d9ee8827de5f073355
>
files
>
28
