back to main table of contents
August 27, 2003
By Laurent Laville
Values below, are used only when you call HTML_Progress_Bar_Horizontal or HTML_Progress_Bar_Vertical classes constructors then $attributes parameter contents none of these keys.
Percent text info :
- width bar_width
- height bar_height + (2 * bar_border_width)
- font Verdana, Arial, Helvetica, sans-serif
- size 12px
- color black
- text %
- v-align right if horizontal bar (top, bottom, left, right)
- v-align bottom if vertical bar (top, bottom, left, right)
- h-align right (left, right, center)
See examples progress2 and progress10.
HTML_Progress_Bar_Horizontal class constructor
HTML_Progress_Bar_Horizontal ([string $way = 'natural'], [mixed $self = null], [array $attributes = array()],
[mixed $script = null])
string $way: (optional) Progress Bar filled from left to right or reverse.
mixed $self: (optional) Progress Bar is integrated on HTML Page (current)
array $attributes: (optional) Associative array of HTML tag attributes
mixed $script: (optional) URL to the linked Progress JavaScript
See API documentation for more details.
HTML_Progress_Bar_Vertical class constructor
HTML_Progress_Bar_Vertical ([string $way = 'natural'], [mixed $self = null], [array $attributes = array()],
[mixed $script = null])
string $way: (optional) Progress Bar filled from down to up or reverse.
mixed $self: (optional) Progress Bar is integrated on HTML Page (current)
array $attributes: (optional) Associative array of HTML tag attributes
mixed $script: (optional) URL to the linked Progress JavaScript
See API documentation for more details.
[Top]
$text = array(
'width' => 100,
'size' => 14,
'text' => ' s. elapsed',
'color' => 'yellow',
'background-color' => '#444444',
'h-align' => 'center',
'v-align' => $_GET['align']
);
$bar->setText(true, $text);
To create this time-bar style we have also changed the default scale from 100 to 1.
$bar = new HTML_Progress_Bar_Horizontal('natural', $p, array('scale' => 1));
progress2.php
<?php
/**
* Display a horizontal loading bar with percent info,
* filled in natural order (left to right)
* from 0 to 100% increase by step of 10%
* with default colors.
*
* @version $Id: howto-part2.html,v 1.2 2003/08/27 22:52:37 Farell Exp $
* @author Laurent Laville <pear@laurent-laville.org>
* @package HTML_Progress
*/
require_once ('HTML/Progress/BarHorizontal.php');
$p = new HTML_Page();
$p->setTitle("PEAR::HTML_Progress - Example 2");
$p->setMetaData("author", "Laurent Laville");
$bar = new HTML_Progress_Bar_Horizontal('natural', $p, array('scale' => 1));
$text = array(
'width' => 100,
'size' => 14,
'text' => ' s. elapsed',
'color' => 'yellow',
'background-color' => '#444444',
'h-align' => 'center',
'v-align' => $_GET['align']
);
$bar->setText(true, $text);
$css = $bar->getStyle();
$css->setStyle('body', 'background-color', '#444444');
$css->setStyle('body', 'color', 'white');
$css->setStyle('body', 'font-family', 'Verdana, Arial');
$css->setStyle('a:link', 'color', 'yellow');
$css->setSameStyle('a:visited, a:active', 'a:link');
$css->setStyle('div.col1', 'float', 'left');
$css->setStyle('div.col1', 'width', '25%');
$css->setStyle('div.col2', 'margin-left', '30%');
$css->setStyle('div.col2', 'border', '3px solid silver');
$css->setStyle('div.col2', 'padding', '1em');
$css->setStyle('div.col2', 'height', '50%');
$p->addStyleDeclaration($css);
$p->addScriptDeclaration( $bar->getScript() );
$p->addBodyContent('<div class="col1">'.$bar->toHTML().'</div>');
$p->addBodyContent('<div class="col2">');
$p->addBodyContent('<h1>Example 2</h1>');
$p->addBodyContent('<p><i><b>Laurent Laville, August 2003</b></i></p>');
$note = <<< TEXT
<p>Usage of property <b>scale</b> of progress bar
and property <b>text</b> into attributes parameter of API setText.</p>
TEXT;
$p->addBodyContent($note);
$p->addBodyContent('<p><a href="progress2.php?align=left">Left</a></p>');
$p->addBodyContent('<p><a href="progress2.php?align=right">Right (default)</a></p>');
$p->addBodyContent('</div>');
$p->display();
for ($i=0; $i<10; $i++) {
/* You have to do something here */
$bar->display(1);
}
?>
This example will produce :
[Top]
$text = array(
'height' => '15',
'size' => '7',
'h-align' => 'center'
);
$bar->setText(true, $text);
progress10.php
<?php
/**
* Display a vertical loading bar from 0 to 100% step 10%
* filled in natural order, with default colors.
*
* @version $Id: howto-part2.html,v 1.2 2003/08/27 22:52:37 Farell Exp $
* @author Laurent Laville <pear@laurent-laville.org>
* @package HTML_Progress
*/
require_once 'HTML/Progress/BarVertical.php';
$p = new HTML_Page();
$p->setTitle("PEAR::HTML_Progress - Example 10n");
$p->setMetaData("author", "Laurent Laville");
$bar = new HTML_Progress_Bar_Vertical('natural', $p);
$text = array(
'height' => 15,
'size' => 7,
'h-align' => 'center'
);
$bar->setText(true, $text);
$css = $bar->getStyle();
$css->setStyle('body', 'background-color', '#c3c6c3');
$css->setStyle('body', 'font-family', 'Verdana, Arial');
$css->setStyle('a:link', 'color', '#006600');
$css->setSameStyle('a:visited, a:active', 'a:link');
$css->setStyle('div.col1', 'float', 'left');
$css->setStyle('div.col1', 'width', '25%');
$css->setStyle('div.col2', 'margin-left', '30%');
$css->setStyle('div.col2', 'border', '1px solid green');
$css->setStyle('div.col2', 'padding', '1em');
$css->setStyle('div.col2', 'height', '80%');
$p->addStyleDeclaration($css);
$p->addScriptDeclaration( $bar->getScript() );
$p->addBodyContent('<div class="col1">'.$bar->toHTML().'</div>');
$p->addBodyContent('<div class="col2">');
$p->addBodyContent('<h1>Example 10 natural</h1>');
$p->addBodyContent('<p><i><b>Laurent Laville, August 2003</b></i></p>');
$note = <<< TEXT
<p>Look and feel of text info legend inside progress bar background.</p>
TEXT;
$p->addBodyContent($note);
$p->addBodyContent('</div>');
$p->display();
for ($i=0; $i<10; $i++) {
/* You have to do something here */
$bar->display(10);
}
?>
This example will produce :
[Top]
back to main table of contents