back to main table of contents

A tutorial/howto for HTML_Progress - Part 1

August 6, 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
    -  padding                   2px
    -  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 :
    -  font                  Verdana, Arial, Helvetica, sans-serif
    -  size                     12px
    -  color                   black

Horizontal Bar :
    -  width                   180px
    -  height                   22px
    -  cell-width               15px
    -  cell-height              20px

Vertical Bar :
    -  width                    22px
    -  height                  180px
    -  cell-width               20px
    -  cell-height              15px
 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

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 default colors.
 * 
 * @version    $Id: howto-part1.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');

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

$bar = new HTML_Progress_Bar_Horizontal();

for ($i=0; $i<11; $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.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';

$bar = new HTML_Progress_Bar_Vertical();
$bar->setText(true);
$bar->display(20,"set");

?>
This example will produce :   

[Top]

back to main table of contents
$Id: howto-part1.html,v 1.1 2003/08/06 15:59:12 Farell Exp $