| Current File : //opt/RZphp5/includes/doc/HTML_Progress2/docs/TDG/ch06.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>
Chapter 6. Indeterminate Mode
</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="pt02.html" title=
"Part II. Getting Started" />
<link rel="prev" href="ch05s03.html" title="Strategy of handling " />
<link rel="next" href="ch06s02.html" title="Progress Monitor usage" />
<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;}
h2.c2 {clear: both}
p.c1 {font-weight: bold}
/*]]>*/
</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">
Chapter 6. Indeterminate Mode
</th>
</tr>
<tr>
<td width="20%" align="left">
<a accesskey="p" href="ch05s03.html">Prev</a>
</td>
<th width="60%" align="center">
Part II. Getting Started
</th>
<td width="20%" align="right">
<a accesskey="n" href="ch06s02.html">Next</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<div class="chapter" lang="en" xml:lang="en">
<div class="titlepage">
<h2 class="title">
<a name="developers.indeterminate" id=
"developers.indeterminate"></a>Chapter 6. Indeterminate
Mode
</h2>
</div>
<div class="toc">
<p class="c1">
Table of Contents
</p>
<dl>
<dt>
<span class="sect1"><a href="ch06.html#indeterminate.basic">Basic
usage</a></span>
</dt>
<dt>
<span class="sect1"><a href="ch06s02.html">Progress Monitor
usage</a></span>
</dt>
</dl>
</div>
<p>
Sometimes you can't immediately determine the length of a long-running
task, or the task might stay stuck at the same state of completion for
a long time.
</p>
<p>
You can show work without measurable progress by putting the progress
meter in indeterminate mode. A progress meter in indeterminate mode
displays animation to indicate that work is occurring. As soon as the
progress meter can display more meaningful information, you should
switch it back into its default, determinate mode.
</p>
<p>
We will learn, with two examples, how to use indeterminate mode. The
first example apply basic concept, and the second example show an
integration with a progress monitor.
</p>
<div class="sect1" lang="en" xml:lang="en">
<div class="titlepage">
<h2 class="title c2">
<a name="indeterminate.basic" id="indeterminate.basic"></a>Basic
usage
</h2>
</div>
<p>
In following example we will simulate a task that display a progress
meter in indeterminate mode waiting for a ressource (mail post, file
upload, ...). We are waiting 12 seconds before switch back to
determinate mode (default) and finish process with a full loop from 0
to 100% by +5 step increment.
</p>
<p>
Strategies used are :
</p>
<div class="orderedlist">
<ol type="1">
<li>user callback for the waiting process (function: <code class=
"literal">myProcess</code>)
</li>
<li>refresh with standard <span class=
"emphasis"><em>moveNext</em></span> handling. If you don't know
what i means, then you have probably skip the chapter i suggest you
to <a href="ch05s03.html" title="Strategy of handling ">read it
now</a> before to continue.
</li>
</ol>
</div>
<p>
Here is a preview of a progress bar in indeterminate mode. Animation
look like a sliding box.
</p>
<div class="screenshot">
<img src="img/indeterminate1.png" alt="" />
</div>
<p>
And now the script we will review step by step to understand
concepts.
</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.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">static</span> <span class=
"re1">$c</span><span class="sy0">,</span> <span class=
"re1">$t</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=
"kw3">time</span><span class="br0">(</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$t</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">
</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">$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">$elapse</span>
<span class="sy0">=</span> <span class=
"kw3">time</span><span class="br0">(</span><span class=
"br0">)</span> <span class="sy0">-</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="re1">$elapse</span>
<span class="sy0">></span> <span class=
"re1">$t</span><span class="br0">)</span> <span class=
"br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"kw3">echo</span> <span class="st0">"myProgressHandler ->
elapse time = $elapse s.<br /><span class=
"es0">\n</span>"</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"re1">$t</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">$elapse</span>
<span class="sy0">>=</span> <span class=
"nu0">12</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=
"re1">$pBar</span><span class="sy0">-></span><span class=
"me1">setIncrement</span><span class="br0">(</span><span class=
"nu0">5</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">$pb</span> <span class="sy0">=</span>
<span class="kw2">new</span> HTML_Progress2<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="kw3">array</span><span class=
"br0">(</span><span class="st0">'color'</span> <span class=
"sy0">=></span> <span class="st0">'#996'</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">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">
<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">#CCCC99;</span>
</div>
</li>
<li class="li1">
<div class="de1">
color<span class="sy0">:</span> <span class=
"co2">#996;</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">$pb</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">
</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">$pb</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">$pb</span><span class=
"sy0">-></span><span class="me1">display</span><span class=
"br0">(</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw3">echo</span> <span class="st0">'<br
/><br />'</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">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>p<span class=
"sy0">><</span>b<span class="sy0">></span>Process
Ended <span class="sy0">!</</span>b<span class=
"sy0">></</span>p<span class="sy0">></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 23 :</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 24 :</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 13, 31, 32 :</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 36 :</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-28, 37 :</span>
</dt>
<dd>
<p>
<span class="emphasis"><em>myProcess</em></span> function is
the user process that will simulate a waiting resource for 12
seconds, and finish in determinate mode.
</p>
</dd>
</dl>
</div>
</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="ch05s03.html">Prev</a>
</td>
<td width="20%" align="center">
<a accesskey="u" href="pt02.html">Up</a>
</td>
<td width="40%" align="right">
<a accesskey="n" href="ch06s02.html">Next</a>
</td>
</tr>
<tr>
<td width="40%" align="left" valign="top">
Strategy of handling
</td>
<td width="20%" align="center">
<a accesskey="h" href="index.html">Home</a>
</td>
<td width="40%" align="right" valign="top">
Progress Monitor usage
</td>
</tr>
</table>
</div>
</body>
</html>