back to main table of contents

A tutorial/howto for HTML_Progress - Part 5

August 6, 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 value a number greater than 0. 

Common:
    -  padding                   2px

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

$bar = new HTML_Progress_Bar_Horizontal('natural', &$p, array('padding' => '0px'));
See examples progress5 and progress10.
 HTML_Progress_Bar_Horizontal class constructor
HTML_Progress_Bar_Horizontal ([string $way = 'natural'], [mixed $self = false], [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 = false], [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.1 2003/08/06 15:59:12 Farell Exp $
 * @author     Laurent Laville <laurent.laville@worldonline.fr>
 * @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");

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

$bar = new HTML_Progress_Bar_Horizontal('natural', &$p, $layout);
$bar->setText(true);

$css = $bar->getStyle();
$css->setStyle('body', 'background-color', '#c3c6c3');
$css->setStyle('body', 'font-family', 'Verdana, Arial');
$p->addStyleDeclaration(&$css);
$css->setStyle('div.col1', 'float', 'left');
$css->setStyle('div.col1', 'width', '40%');
$css->setStyle('div.col2', 'margin-left', '50%');
$css->setStyle('div.col2', 'border', '1px solid navy');
$css->setStyle('div.col2', 'padding', '1em');
$css->setStyle('div.col2', 'height', '50%');
$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>Laurent Laville, August 2003 </p>');
$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.1 2003/08/06 15:59:12 Farell Exp $
 * @author     Laurent Laville <laurent.laville@worldonline.fr>
 * @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");

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

$bar = new HTML_Progress_Bar_Vertical('reverse', &$p, $layout);
$bar->setText(true, array('size' => '10px'));

$css = $bar->getStyle();
$css->setStyle('body', 'background-color', '#c3c6c3');
$css->setStyle('body', 'font-family', 'Verdana, Arial');
$p->addStyleDeclaration(&$css);
$css->setStyle('div.col1', 'float', 'left');
$css->setStyle('div.col1', 'width', '15%');
$css->setStyle('div.col2', 'margin-left', '20%');
$css->setStyle('div.col2', 'border', '1px solid navy');
$css->setStyle('div.col2', 'padding', '1em');
$css->setStyle('div.col2', 'height', '50%');
$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>Laurent Laville, August 2003 </p>');
$p->addBodyContent('</div>');
$p->display();

for ($i=0; $i<11; $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.1 2003/08/06 15:59:12 Farell Exp $