back to main table of contents

A tutorial/howto for HTML_Progress - Part 1

August 27, 2003

By Laurent Laville

Table of Contents

The most simple example

Default values

Values below, are used only when you call HTML_Progress_Bar_Horizontal or HTML_Progress_Bar_Vertical classes constructors without any parameters.
See examples progress1 and progress9. 

Common:
    -  background-color        white
    -  border-width              0px
    -  border-style            solid
    -  border-color            black
    -  cell-spacing              2px
    -  active-color          #006600
    -  inactive-color        #CCCCCC
    -  percent text info is   hidden

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)

Horizontal Bar :
    -  width                         10 * (cell-width + cell-spacing) + cell-spacing
    -  height                        cell-height + (2 * cell-spacing)
    -  cell-width               15px (min 8px)
    -  cell-height              20px (min 13px)
    -  way                   natural (left to right) 

Vertical Bar :
    -  width                         cell-width + (2 * cell-spacing)
    -  height                        10 * (cell-height + cell-spacing) + cell-spacing
    -  cell-width               20px (min 8px)
    -  cell-height              15px (min 13px)
    -  way                   natural (down to up)
 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

Let's start with the most simple example. No configuration, use default values.

progress1.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 all default attributes (color, size, ...)
 * 
 * @version    $Id: howto-part1.html,v 1.2 2003/08/27 22:52:36 Farell Exp $
 * @author     Laurent Laville <pear@laurent-laville.org>
 * @package    HTML_Progress
 */

require_once ('HTML/Progress/BarHorizontal.php');

$pkg = array('PEAR', 'Archive_Tar', 'Config', 
    'HTML_QuickForm', 'HTML_CSS', 'HTML_Page', 'HTML_Template_Sigma', 
    'Log', 'MDB', 'PHPUnit');

$bar = new HTML_Progress_Bar_Horizontal();

for ($i=0; $i<10; $i++) {
    $bar->display(10);
    echo "installing package ... : ". $pkg[$i] ."<br /> \n";
}

?>
This example will produce :   

[Top]

Vertical Bar

You may notice in this example, that default colors are used, but we also show the percent text info, then it is hidden by default.
Only one line of code is necessary : 
$bar->setText(true);
You may also notice that this example is static, because we use no loop and increment method, see below : 
$bar->display(20,"set");
The method used here "set", is useful when you want to give exact value to progress bar. Default method is "add" and is optional in call. This code ... 
$bar->display(10,"add");
or this one are similar. 
$bar->display(10);
It will increment current progress bar value by 10.

progress9.php 
<?php
/**
 * Display a vertical loading bar set to 20% 
 * filled in natural order, with default colors.
 * 
 * @version    $Id: howto-part1.html,v 1.2 2003/08/27 22:52:36 Farell Exp $
 * @author     Laurent Laville <pear@laurent-laville.org>
 * @package    HTML_Progress
 */

require_once 'HTML/Progress/BarVertical.php';

$bar = new HTML_Progress_Bar_Vertical();
$text = array(
    'width' => 60,
    'height' => 10,
    'h-align' => 'left',
);
$bar->setText(true, $text);
$bar->display(20,"set");

echo '<h1>Example 9</h1>';
echo '<p><i><b>Laurent Laville, August 2003</b></i></p>';
echo '<br /><hr noshade />';

?>
This example will produce :   

[Top]

back to main table of contents
$Id: howto-part1.html,v 1.2 2003/08/27 22:52:36 Farell Exp $