| Current File : //opt/RZphp5/includes/doc/HTML_Progress2/docs/TDG/ch06s02.html |
<?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>
Progress Monitor usage
</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="ch06.html" title=
"Chapter 6. Indeterminate Mode" />
<link rel="prev" href="ch06.html" title=
"Chapter 6. Indeterminate Mode" />
<link rel="next" href="ch07.html" title="Chapter 7. Listener" />
<style type="text/css">
/*<![CDATA[*/
body {
background-color: white;
color: black;
}
:link { color: #0000FF }
:visited { color: #840084 }
:active { color: #0000FF }
div.c3 {font-family: monospace;}
div.c2 {margin-left: 0.5in; margin-right: 0.5in;}
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">
Progress Monitor usage
</th>
</tr>
<tr>
<td width="20%" align="left">
<a accesskey="p" href="ch06.html">Prev</a>
</td>
<th width="60%" align="center">
Chapter 6. Indeterminate Mode
</th>
<td width="20%" align="right">
<a accesskey="n" href="ch07.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="indeterminate.monitor" id=
"indeterminate.monitor"></a>Progress Monitor usage
</h2>
</div>
<p>
Here is a preview of a progress monitor in indeterminate mode with a
custom layout. Differences with <a href="ch06.html#indeterminate.basic"
title="Basic usage">basic concept</a> resides mainly into <span class=
"bold"><strong>QF renders</strong></span>.
</p>
<div class="screenshot">
<img src="img/indeterminate2.png" alt="" />
</div>
<div class="important c2">
<table border="0" summary="Important">
<tr>
<td rowspan="2" align="center" valign="top" width="48">
<img alt="[Important]" src="img/admons/important.png" />
</td>
<th align="left">
Important
</th>
</tr>
<tr>
<td align="left" valign="top">
When you had choice of <a href="ch05s02.html" title=
"Processing ">processing strategy</a> with simple progress meter,
it's not the same with a progress monitor.
<p>
Due to its architecture, progress monitor only work with
progress meter and user callback.
</p>
</td>
</tr>
</table>
</div>
<p>
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.
</p>
<div class="php c3">
<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">
</div>
</li>
<li class="li1 ln-xtra">
<div class="de1">
<span class="kw2">function</span> myProcess<span class=
"br0">(</span><span class="re1">$pValue</span><span class=
"sy0">,</span> <span class="sy0">&</span><span class=
"re1">$pBar</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">global</span> <span class=
"re1">$pm</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw3">static</span> <span class=
"re1">$c</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">if</span> <span class=
"br0">(</span><span class="sy0">!</span><span class=
"kw3">isset</span><span class="br0">(</span><span class=
"re1">$c</span><span class="br0">)</span><span class=
"br0">)</span> <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$c</span>
<span class="sy0">=</span> <span class="nu0">0</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="re1">$c</span> <span class=
"sy0">+=</span> <span class="nu0">16</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">'completed %step% out of
400'</span><span class="sy0">,</span> <span class=
"kw3">array</span><span class="br0">(</span><span class=
"st0">'step'</span> <span class="sy0">=></span> <span class=
"re1">$c</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 ln-xtra">
<div class="de1">
<span class="re1">$pBar</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">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">if</span> <span class=
"br0">(</span><span class="re1">$c</span> <span class=
"sy0">>=</span> <span class="nu0">240</span> <span class=
"sy0">&&</span> <span class=
"re1">$pBar</span><span class="sy0">-></span><span class=
"me1">isIndeterminate</span><span class=
"br0">(</span><span class="br0">)</span><span class=
"br0">)</span> <span class="br0">{</span>
</div>
</li>
<li class="li1 ln-xtra">
<div class="de1">
<span class=
"re1">$pBar</span><span class="sy0">-></span><span class=
"me1">setIndeterminate</span><span class=
"br0">(</span><span class="kw2">false</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1 ln-xtra">
<div class="de1">
<span class=
"re1">$pBar</span><span class="sy0">-></span><span class=
"me1">setValue</span><span class="br0">(</span><span class=
"nu0">0</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="kw1">if</span> <span class=
"br0">(</span><span class="re1">$pBar</span><span class=
"sy0">-></span><span class=
"me1">getPercentComplete</span><span class=
"br0">(</span><span class="br0">)</span> <span class=
"sy0">==</span> <span class="nu0">1</span><span class=
"br0">)</span> <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">if</span>
<span class="br0">(</span><span class=
"re1">$pBar</span><span class="sy0">-></span><span class=
"me1">isIndeterminate</span><span class=
"br0">(</span><span class="br0">)</span><span class=
"br0">)</span> <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"re1">$pBar</span><span class="sy0">-></span><span class=
"me1">setValue</span><span class="br0">(</span><span class=
"nu0">0</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">
<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">'frmMonitor'</span><span class=
"sy0">,</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw3">array</span><span class=
"br0">(</span> <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><span class=
"sy0">,</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"st0">'title'</span> <span class="sy0">=></span>
<span class="st0">'Progress ...'</span> <span class=
"br0">)</span>
</div>
</li>
<li class="li1">
<div class="de1">
<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 ln-xtra">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setAnimSpeed</span><span class="br0">(</span><span class=
"nu0">200</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">setIncrement</span><span class="br0">(</span><span class=
"nu0">10</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=#E0E0E0'</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">'active-color=#996'</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=#996'</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=black 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">setIndeterminate</span><span class=
"br0">(</span><span class="kw2">true</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">setProgressHandler</span><span class=
"br0">(</span><span class="st0">'myProcess'</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="co1">//$pm->setProgressElement($pb);</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>DOCTYPE html <span class=
"kw2">PUBLIC</span> <span class="st0">"-//W3C//DTD XHTML 1.0
Strict//EN"</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"st0">"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"</span><span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>html xmlns<span class=
"sy0">=</span><span class=
"st0">"http://www.w3.org/1999/xhtml"</span> xml<span class=
"sy0">:</span>lang<span class="sy0">=</span><span class=
"st0">"en"</span><span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>head<span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>title<span class=
"sy0">></span>Waiting <span class="kw1">for</span> resource
<span class="sy0">...</span> <span class=
"br0">(</span>simulation<span class="br0">)</span><span class=
"sy0"></</span>title<span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>style type<span class=
"sy0">=</span><span class="st0">"text/css"</span><span class=
"sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><!--</span>
</div>
</li>
<li class="li1">
<div class="de1">
body <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
background<span class=
"sy0">-</span>color<span class="sy0">:</span> <span class=
"co2">#444444;</span>
</div>
</li>
<li class="li1">
<div class="de1">
font<span class="sy0">-</span>family<span class=
"sy0">:</span> Verdana<span class="sy0">,</span>
Arial<span class="sy0">;</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="kw2"><?php</span> <span class="kw3">echo</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> <span class="kw2">?></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0">--></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"></</span>style<span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2"><?php</span> <span class="kw3">echo</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><span class="sy0">;</span> <span class=
"kw2">?></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"></</span>head<span class="sy0">></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">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2"><?php</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$renderer</span> <span class=
"sy0">=&</span> HTML_QuickForm<span class=
"sy0">::</span><span class=
"me2">defaultRenderer</span><span class=
"br0">(</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">setFormTemplate</span><span class=
"br0">(</span><span class="st0">'</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0"><form{attributes}></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0"> <table width="450" border="0"
cellpadding="3" cellspacing="2" bgcolor="#CCCC99"></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0"> {content}</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0"> </table></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0"></form></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'</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">setElementTemplate</span><span class=
"br0">(</span><span class="st0">'</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0"> <tr></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0"> <td valign="top"
style="padding-left:15px;"></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0"> {element}</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0"> </td></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0"> </tr></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'</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">setHeaderTemplate</span><span class=
"br0">(</span><span class="st0">'</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0"> <tr></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0"> <td
style="background:#996;color:#ffc;" align="left"
colspan="2"></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0"> <b>{header}</b></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0"> </td></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0"> </tr></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1 ln-xtra">
<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="kw3">echo</span> <span class=
"re1">$renderer</span><span class="sy0">-></span><span class=
"me1">toHtml</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">
</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">Line 18 :</span>
</dt>
<dd>
<p>
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%).
</p>
</dd>
<dt>
<span class="term">Line 19 :</span>
</dt>
<dd>
<p>
Without this reset step, the progress meter continue until end
(100%) from its current position (unpredictable).
</p>
</dd>
<dt>
<span class="term">Lines 15, 34, 35 :</span>
</dt>
<dd>
<p>
Increment is set to 10 to give, with a 0.2 second (200
milisecond) delay, a smooth animation.
</p>
</dd>
<dt>
<span class="term">Line 40 :</span>
</dt>
<dd>
<p>
<span class="emphasis"><em>Indeterminate mode</em></span> is
activated(/desactivated) only with <code class=
"methodname">setIndeterminate()</code> method.
</p>
</dd>
<dt>
<span class="term">Lines 4-26, 41 :</span>
</dt>
<dd>
<p>
<span class="emphasis"><em>myProcess</em></span> function is the
user process that will simulate a waiting resource (that become
available on value 240/400), and finish in determinate mode.
</p>
</dd>
<dt>
<span class="term">Lines 33, 43 :</span>
</dt>
<dd>
<p>
You need to use <code class=
"methodname">setProgressElement()</code> 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.
</p>
<div class="warning c2">
<table border="0" summary="Warning">
<tr>
<td rowspan="2" align="center" valign="top" width="48">
<img alt="[Warning]" src="img/admons/warning.png" />
</td>
<th align="left">
Warning
</th>
</tr>
<tr>
<td align="left" valign="top">
If you change an html layout element such as, cell size,
cell count, progress shape ... and you forget to add line
43, then no change you should expected will be applied.
</td>
</tr>
</table>
</div>
<div class="caution c2">
<table border="0" summary="Caution">
<tr>
<td rowspan="2" align="center" valign="top" width="48">
<img alt="[Caution]" src="img/admons/caution.png" />
</td>
<th align="left">
Caution
</th>
</tr>
<tr>
<td align="left" valign="top">
Notice the <span class="bold"><strong>&</strong></span>
that means you work by reference.
</td>
</tr>
</table>
</div>
</dd>
<dt>
<span class="term">Line 87 :</span>
</dt>
<dd>
<p>
This Progress Monitor use a QF renderer defined by its custom
elements:
</p>
<div class="itemizedlist">
<ul type="disc">
<li>
<p>
[QF window presentation] <code class=
"methodname">setFormTemplate()</code>
</p>
</li>
<li>
<p>
[QF meter/buttons line] <code class=
"methodname">setElementTemplate()</code>
</p>
</li>
<li>
<p>
[QF window title] <code class=
"methodname">setHeaderTemplate()</code>
</p>
</li>
</ul>
</div>
</dd>
</dl>
</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="ch06.html">Prev</a>
</td>
<td width="20%" align="center">
<a accesskey="u" href="ch06.html">Up</a>
</td>
<td width="40%" align="right">
<a accesskey="n" href="ch07.html">Next</a>
</td>
</tr>
<tr>
<td width="40%" align="left" valign="top">
Chapter 6. Indeterminate Mode
</td>
<td width="20%" align="center">
<a accesskey="h" href="index.html">Home</a>
</td>
<td width="40%" align="right" valign="top">
Chapter 7. Listener
</td>
</tr>
</table>
</div>
</body>
</html>