back to main table of contents

A tutorial/howto for HTML_Progress - Part 5

August 27, 2003

By Laurent Laville

Table of Contents


Plain bar

Default values

To give a look of ten cells, $attributes parameter of HTML_Progress_Bar_Horizontal or HTML_Progress_Bar_Vertical classes constructors should have as cell-spacing contents a number greater than 0.

Common:
    -  cell-spacing              2px

In the otherside, when you want to have a plain bar, you've just to set cell-spacing to 0.

$bar = new HTML_Progress_Bar_Horizontal('natural', $p, array('cell-spacing' => 0));
See examples progress5 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]

Horizontal Bar

progress5.php
<?php 
/**
 * Display a horizontal loading bar setting at different steps
 * in natural order with custom colors.
 * 
 * @version    $Id: howto-part5.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 5");
$p->setMetaData("author", "Laurent Laville");

$options = array(
    'background-color'  => '#EBEBEB',
    'border-width'      => 1,
    'border-style'      => 'inset',
    'border-color'      => 'white',
    'cell-width'        => 20,
    'cell-spacing'      => 0,
    'active-color'      => '#000084',
    'inactive-color'    => '#3A6EA5'
);

$bar = new HTML_Progress_Bar_Horizontal('natural', $p, $options);

$text = array(
    'size' => 14,
    'background-color' => '#c3c6c3',  // same color as body background, make it transparent
    'v-align' => 'top'
);
$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', 'navy');
$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 navy');
$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 5</h1>');
$p->addBodyContent('<p><i><b>Laurent Laville, August 2003</b></i></p>');

$note = <<< TEXT
<p><i>plain bar</i><br />
Display horizontal loading bar setting at 3 different steps (25%, 50% 75%)
TEXT;

$p->addBodyContent($note);
$p->addBodyContent('</div>');
$p->display();

/*  Progress Start */
$bar->display(0,"set");
/*  You have to do something here at 25% */
sleep(1);
$bar->display(25,"set");
/*  You have to do something here at 50% */
sleep(1);
$bar->display(50,"set");
/*  You have to do something here at 75% */
sleep(1);
$bar->display(75,"set");
/*  Progress End */
sleep(1);
$bar->display(100,"set");

?>
This example will produce :   

[Top]

Vertical Bar

progress10r.php
<?php
/**
 * Display a vertical loading bar from 0 to 100% step 10% 
 * filled in reverse order, with custom colors.
 * 
 * @version    $Id: howto-part5.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 10r");
$p->setMetaData("author", "Laurent Laville");

$options = array(
    'height'            => 160,
    'background-color'  => '#EBEBEB',
    'cell-width'        => 40,
    'cell-spacing'      => 0,
    'active-color'      => '#000084',
    'inactive-color'    => '#3A6EA5'
);

$bar = new HTML_Progress_Bar_Vertical('reverse', $p, $options);
$text = array(
    'height' => 20,
    'size'   => 10,
    'background-color'  => '#EBEBEB',
    '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', 'navy');
$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 navy');
$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 reverse</h1>');
$p->addBodyContent('<p><i><b>Laurent Laville, August 2003</b></i></p>');
$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
$Id: howto-part5.html,v 1.2 2003/08/27 22:52:37 Farell Exp $