back to main table of contents

A tutorial/howto for HTML_Progress - Part 2

August 6, 2003

By Laurent Laville

Table of Contents

Add text percent info on right side

Default values

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 (font, size, color). 

Percent text info :
    -  font                  Verdana, Arial, Helvetica, sans-serif
    -  size                     12px
    -  color                   black
See examples progress2 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

In following example, we have decided to show the percent text info, and in same way, to give a new font-size (2px larger than default). 
$bar->setText(true, array('size' => '14px'));
And at last but not least, to get a better render, bar width should be enlarge (+50px). 
$bar = new HTML_Progress_Bar_Horizontal('natural', &$p, array('width' => '230px'));
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.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 2");
$p->setMetaData("author", "Laurent Laville");

$bar = new HTML_Progress_Bar_Horizontal('natural', &$p, array('width' => '230px'));
$bar->setText(true, array('size' => '14px'));

$css = $bar->getStyle();
$css->setStyle('body', 'background-color', '#444444');
$css->setStyle('body', 'color', 'white');
$p->addStyleDeclaration(&$css);
$css->setStyle('div.col1', 'float', 'left');
$css->setStyle('div.col1', 'width', '30%');
$css->setStyle('div.col2', 'margin-left', '35%');
$css->setStyle('div.col2', 'border', '3px solid silver');
$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 2</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]

Vertical Bar

As in previous example (horizontal bar), we have decided to show the percent text info, and in same way, to give a new font-size (4px less than default). 
$bar->setText(true, array('size' => '8px'));
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.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 10n");
$p->setMetaData("author", "Laurent Laville");

$bar = new HTML_Progress_Bar_Vertical('natural', &$p);
$bar->setText(true, array('size' => '8px'));

$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 green');
$css->setStyle('div.col2', 'padding', '1em');
$css->setStyle('div.col2', 'height', '80%');
$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>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-part2.html,v 1.1 2003/08/06 15:59:12 Farell Exp $