<?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 14. New Features in HTML_Progress2
</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="pt03.html" title=
"Part III. Migrating Guide" />
<link rel="prev" href="ch13s03.html" title="Data Management related" />
<link rel="next" href="ch14s02.html" title="Error Handling" />
<style type="text/css">
/*<![CDATA[*/
body {
background-color: white;
color: black;
}
:link { color: #0000FF }
:visited { color: #840084 }
:active { color: #0000FF }
div.c4 {margin-left: 0.5in; margin-right: 0.5in;}
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 14. New Features in HTML_Progress2
</th>
</tr>
<tr>
<td width="20%" align="left">
<a accesskey="p" href="ch13s03.html">Prev</a>
</td>
<th width="60%" align="center">
Part III. Migrating Guide
</th>
<td width="20%" align="right">
<a accesskey="n" href="ch14s02.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="migrating.newfeatures" id=
"migrating.newfeatures"></a>Chapter 14. New Features in
HTML_Progress2
</h2>
</div>
<div class="toc">
<p class="c1">
Table of Contents
</p>
<dl>
<dt>
<span class="sect1"><a href="ch14.html#id4796540">Multiple Label
System</a></span>
</dt>
<dd>
<dl>
<dt>
<span class="sect2"><a href="ch14.html#id4800562">Add a new
label</a></span>
</dt>
<dt>
<span class="sect2"><a href="ch14.html#id4800758">Remove
existing label</a></span>
</dt>
</dl>
</dd>
<dt>
<span class="sect1"><a href="ch14s02.html">Error
Handling</a></span>
</dt>
<dt>
<span class="sect1"><a href="ch14s03.html">Reuse CSS</a></span>
</dt>
<dd>
<dl>
<dt>
<span class="sect2"><a href="ch14s03.html#id4799982">Step 1 :
Extract Javascript code</a></span>
</dt>
<dt>
<span class="sect2"><a href="ch14s03.html#id4800241">Step 2 :
Extract CSS code</a></span>
</dt>
<dt>
<span class="sect2"><a href="ch14s03.html#id4800337">Step 3 :
Remove HTML_Progress2 css properties</a></span>
</dt>
<dt>
<span class="sect2"><a href="ch14s03.html#id4800430">Step 4 :
Adjust CSS class selector</a></span>
</dt>
<dt>
<span class="sect2"><a href="ch14s03.html#id4799869">Step 5 :
play with new pattern</a></span>
</dt>
</dl>
</dd>
</dl>
</div>
<p>
This chapter documents all of the differences between HTML_Progress 1.x
and the new features introduced in HTML_Progress2.
</p>
<p>
The most significant change in HTML_Progress2 is the addition of the
Multiple Label System.
</p>
<div class="sect1" lang="en" xml:lang="en">
<div class="titlepage">
<h2 class="title c2">
<a name="id4796540" id="id4796540"></a>Multiple Label System
</h2>
</div>
<div class="toc">
<dl>
<dt>
<span class="sect2"><a href="ch14.html#id4800562">Add a new
label</a></span>
</dt>
<dt>
<span class="sect2"><a href="ch14.html#id4800758">Remove existing
label</a></span>
</dt>
</dl>
</div>
<p>
While with HTML_Progress 1.x you have no choice, or so few, to
display informations with text zone also called “<span class=
"quote">string</span>”; In the new API of HTML_Progress2 you
may have as much labels as you want all around the progres meter.
</p>
<p>
No need anymore to do a choice between the percent text info and
captions while the progress meter reach particular values. You can
have both at same time, and even more.
</p>
<p>
As in previous version, HTML_Progress 1.x, you can have text zone as
label, but also now four more types. Here are the list :
</p>
<div class="variablelist">
<dl>
<dt>
<span class="term">(text) <code class=
"constant">HTML_PROGRESS2_LABEL_TEXT</code></span>
</dt>
<dd>
<p>
A simple text zone
</p>
</dd>
</dl>
</div>
<div class="variablelist">
<dl>
<dt>
<span class="term">(button) <code class=
"constant">HTML_PROGRESS2_LABEL_BUTTON</code></span>
</dt>
<dd>
<p>
A simple button
</p>
</dd>
</dl>
</div>
<div class="variablelist">
<dl>
<dt>
<span class="term">(step) <code class=
"constant">HTML_PROGRESS2_LABEL_STEP</code></span>
</dt>
<dd>
<p>
A step zone information to display value of current
<code class="methodname">moveStep()</code>
</p>
</dd>
</dl>
</div>
<div class="variablelist">
<dl>
<dt>
<span class="term">(percent) <code class=
"constant">HTML_PROGRESS2_LABEL_PERCENT</code></span>
</dt>
<dd>
<p>
The basic percent text information formatted as
“<span class="quote">67 %</span>”.
</p>
</dd>
</dl>
</div>
<div class="variablelist">
<dl>
<dt>
<span class="term">(crossbar) <code class=
"constant">HTML_PROGRESS2_LABEL_CROSSBAR</code></span>
</dt>
<dd>
<p>
A little javascript cross rotate animation
</p>
</dd>
</dl>
</div>
<div class="sect2" lang="en" xml:lang="en">
<div class="titlepage">
<h3 class="title">
<a name="id4800562" id="id4800562"></a>Add a new label
</h3>
</div>
<p>
The only label you don't have to set, in most cases, with
<code class="methodname">addLabel()</code> method is the percent
text info, identified by <span class=
"emphasis"><em>pct1</em></span> by default.
</p>
<div class="note c4">
<table border="0" summary="Note">
<tr>
<td rowspan="2" align="center" valign="top" width="48">
<img alt="[Note]" src="img/admons/note.png" />
</td>
<th align="left">
Note
</th>
</tr>
<tr>
<td align="left" valign="top">
You can remove the percent text info at build time with the
HTML_Progress2 class construtor and the fifth parameter set
to <code class="constant">FALSE</code>.
<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="re1">$bar</span> <span class=
"sy0">=</span> <span class="kw2">new</span>
HTML_Progress2<span class="br0">(</span><span class=
"re1">$errorPrefs</span><span class="sy0">,</span>
<span class="re1">$orient</span><span class=
"sy0">,</span> <span class=
"re1">$min</span><span class="sy0">,</span>
<span class="re1">$max</span><span class=
"sy0">,</span> <span class=
"re1">$percentLabel</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI">/*</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI">
$errorPrefs :hash of options to
configure the API error handling system</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI">
default is empty array (use PEAR_Error object)</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI">
$orient :orientation of
the progress bar (see constants)</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI"> $min
:minimum value of
the progress bar (default is zero)</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI"> $max
:maximum value of
the progress bar (default is 100)</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI">
$percentLabel :progress bar percent label
identifier (default is 'pct1')</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI"> */</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">?></span>
</div>
</li>
</ol>
</div>In such condition, if you need after a while to display
the percent text again, you shall use the <code class=
"methodname">addLabel()</code> method with any free
identifier (can be <span class=
"emphasis"><em>pct1</em></span> as any other else).
</td>
</tr>
</table>
</div>
<p>
Goal of this mini tutorial is to build a horizontal progress bar
with percent text info on right side, with four other kind of label
(text, crossbar, step, button). Something like that :
</p>
<div class="screenshot">
<img src="img/mixed2.png" alt="" />
</div>
<p>
For a full source code, have a look <a href=
"ch21s03.html#examples.label.1" title="">here</a>.
</p>
<p>
No special difficulty. We will used four times the couple :
</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="re1">$bar</span><span class=
"sy0">-></span><span class=
"me1">addLabel</span><span class="br0">(</span><span class=
"re1">$type</span><span class="sy0">,</span> <span class=
"re1">$name</span><span class="sy0">,</span> <span class=
"re1">$value</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI">/*</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI"> $type
:label type / a constant
HTML_PROGRESS2_LABEL_* value</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI"> $name
:label name (identifier)</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI"> $value
:initial label value</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI"> */</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$bar</span><span class=
"sy0">-></span><span class=
"me1">setLabelAttributes</span><span class=
"br0">(</span><span class="re1">$name</span><span class=
"sy0">,</span> <span class=
"re1">$attributes</span><span class="br0">)</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI">/*</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI"> $name
:label name (identifier)</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI"> $attributes
:associative array or string of HTML tag
attributes</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="coMULTI"> */</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">?></span>
</div>
</li>
</ol>
</div>
<p>
With $bar an instance of <code class=
"classname">HTML_Progress2</code> object.
</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="re1">$bar</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">
<div class="de1">
<span class="kw2">?></span>
</div>
</li>
</ol>
</div>
<p>
For a full attributes list depending of each label kind, see the
Reference Guide, <a href="re35.html" title=
"HTML_Progress2::setLabelAttributes">setLabelAttributes()</a>
related.
</p>
<p>
Remains of the script is as usal:
</p>
<div class="itemizedlist">
<ul type="disc">
<li>complete build of the progress meter (css, js, html parts) :
<code class="methodname">getStyle()</code>, <code class=
"methodname">getScript()</code>, <code class=
"methodname">display()</code>
</li>
<li>see the progress meter in action : <code class="methodname">
run()</code>
</li>
</ul>
</div>
</div>
<div class="sect2" lang="en" xml:lang="en">
<div class="titlepage">
<h3 class="title">
<a name="id4800758" id="id4800758"></a>Remove existing label
</h3>
</div>
<p>
This feature is available at build-time, and may be usefull to
extend some progress meter from a common source, and remove the
unnecessary labels.
</p>
<p>
For example, if you consider the previous script, as your
common/core script, written in two parts/templates (<code class=
"filename">build-meter.php</code>, <code class=
"filename">run-meter.php</code>) splitted at the DTD frontier.
</p>
<p>
So, if you want to build a new progress meter without the button.
You have just to re-used your previous code and complete with :
</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">include_once</span> <span class=
"st0">'build-meter.php'</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">removeLabel</span><span class=
"br0">(</span><span class="st0">'btn1'</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">include_once</span> <span class=
"st0">'run-meter.php'</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">?></span>
</div>
</li>
</ol>
</div>
<p>
Pretty easy.
</p>
</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="ch13s03.html">Prev</a>
</td>
<td width="20%" align="center">
<a accesskey="u" href="pt03.html">Up</a>
</td>
<td width="40%" align="right">
<a accesskey="n" href="ch14s02.html">Next</a>
</td>
</tr>
<tr>
<td width="40%" align="left" valign="top">
Data Management related
</td>
<td width="20%" align="center">
<a accesskey="h" href="index.html">Home</a>
</td>
<td width="40%" align="right" valign="top">
Error Handling
</td>
</tr>
</table>
</div>
</body>
</html>
distrib
>
Mandriva
>
2010.0
>
i586
>
media
>
contrib-release
>
by-pkgid
>
89346381d9fb64d9ee8827de5f073355
>
files
>
48
