<?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>
Default improved render
</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="ch08s02.html" title="Default render" />
<link rel="next" href="ch08s04.html" title=
"Sigma template engine integration " />
<style type="text/css">
/*<![CDATA[*/
body {
background-color: white;
color: black;
}
:link { color: #0000FF }
:visited { color: #840084 }
:active { color: #0000FF }
div.c3 {margin-left: 0.5in; margin-right: 0.5in;}
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">
Default improved render
</th>
</tr>
<tr>
<td width="20%" align="left">
<a accesskey="p" href="ch08s02.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="ch08s04.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.default2" id="monitor.default2"></a>Default improved
render
</h2>
</div>
<p>
With some options and a new QF renderer, we will improve a lot in few
lines, the decent but poor graphic of first example. Enjoy the new
result:
</p>
<div class="screenshot">
<img src="img/monitor1.png" alt="" />
</div>
<p>
Lets review now, how to do this in source code below:
</p>
<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">
</div>
</li>
<li class="li1 ln-xtra">
<div class="de1">
<span class="kw2">function</span> myFunctionHandler<span class=
"br0">(</span><span class="re1">$pValue</span><span class=
"sy0">,</span> <span class="sy0">&</span><span class=
"re1">$pb</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">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</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="br0">(</span><span class=
"kw3">fmod</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=
"sy0">==</span> <span class="nu0">0</span><span class=
"br0">)</span> and <span class="br0">(</span><span class=
"re1">$pValue</span> <span class="sy0">></span> <span class=
"nu0">0</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">$pm</span><span class="sy0">-></span><span class=
"me1">setCaption</span><span class="br0">(</span><span class=
"st0">'myFunctionHandler -> progress value is =
'</span><span class="sy0">.</span><span class=
"re1">$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">
<div class="de1">
</div>
</li>
<li class="li1 ln-xtra">
<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> <span class="kw3">array</span><span class=
"br0">(</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><span class=
"sy0">,</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">
<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">75</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=#444444'</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 ln-xtra">
<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">setProgressHandler</span><span class=
"br0">(</span><span class=
"st0">'myFunctionHandler'</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">
<span class="kw2">?></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>html<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="kw2"><?php</span>
</div>
</li>
<li class="li1">
<div class="de1">
<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=
"kw2">false</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<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>
</div>
</li>
<li class="li1">
<div class="de1">
<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">
<span class="kw2"><?php</span>
</div>
</li>
<li class="li1 ln-xtra">
<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 ln-xtra">
<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="#EEEEEE"></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 ln-xtra">
<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 ln-xtra">
<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:#7B7B88;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">
<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 ln-xtra">
<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">
<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 4-13, 26 :</span>
</dt>
<dd>
<p>
User callback attached to progress meter should be the main task
to do. Here we have simplified task to display a message in the
monitor caption zone.
</p>
</dd>
<dt>
<span class="term">Line 17 :</span>
</dt>
<dd>
<p>
Customization begin by using some HTML_Progress2_Monitor options
on new instance construction.
</p>
<p>
Monitor dialog box is renamed to <span class=
"bold"><strong>frmMonitor</strong></span>, and buttons (start,
cancel) are <span class="bold"><strong>80 pixels
width</strong></span>.
</p>
</dd>
<dt>
<span class="term">Lines 11, 25 :</span>
</dt>
<dd>
<p>
The monitor caption zone is named by default <span class=
"bold"><strong>monitorStatus</strong></span>, and behind it's a
progress meter label.
</p>
<div class="warning c3">
<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">
A text label is by default aligned on top left of the
progress meter, but for the progress monitor, default is
bottom left alignement.
</td>
</tr>
</table>
</div>
</dd>
<dt>
<span class="term">Lines 39, 40, 47, 54 :</span>
</dt>
<dd>
<p>
Layout is mainly modified by the QF renderer through three
template elements: <span class="simplelist">FormTemplate,
ElementTemplate, HeaderTemplate</span>.
</p>
</dd>
<dt>
<span class="term">Line 63 :</span>
</dt>
<dd>
<p>
Show initial state of progress monitor before running. We can't
used here the <code class="methodname">display()</code> method as
in previous example.
</p>
</dd>
</dl>
</div>
<p>
Now we know how to customize the skin, in next example we will see how
to combine a task with events observation.
</p>
</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="ch08s02.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="ch08s04.html">Next</a>
</td>
</tr>
<tr>
<td width="40%" align="left" valign="top">
Default render
</td>
<td width="20%" align="center">
<a accesskey="h" href="index.html">Home</a>
</td>
<td width="40%" align="right" valign="top">
Sigma template engine integration
</td>
</tr>
</table>
</div>
</body>
</html>
distrib
>
Mandriva
>
2010.0
>
i586
>
media
>
contrib-release
>
by-pkgid
>
89346381d9fb64d9ee8827de5f073355
>
files
>
27
