back to main table of contents

A tutorial/howto for HTML_Progress - Part 2

August 27, 2003

By Laurent Laville

Table of Contents


Add text percent info on bar 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.

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)
See examples progress2 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

In following example (time-bar style), we have decided to show a text info " s. elapsed" different from default "%", and in same way, to give a new font-size (2px larger than default), a new font-color, new size and alignment.
$text = array(
    'width' => 100, 
    'size'  => 14,
    'text'  => ' s. elapsed',
    'color' => 'yellow',
    'background-color' => '#444444',
    'h-align' => 'center',
    'v-align' => $_GET['align']   
);
$bar->setText(true, $text);
To create this time-bar style we have also changed the default scale from 100 to 1.
$bar = new HTML_Progress_Bar_Horizontal('natural', $p, array('scale' => 1));
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.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 2");
$p->setMetaData("author", "Laurent Laville");

$bar = new HTML_Progress_Bar_Horizontal('natural', $p, array('scale' => 1));

$text = array(
    'width' => 100, 
    'size'  => 14,
    'text'  => ' s. elapsed',
    'color' => 'yellow',
    'background-color' => '#444444',
    'h-align' => 'center',
    'v-align' => $_GET['align']   
);
$bar->setText(true, $text);

$css = $bar->getStyle();
$css->setStyle('body', 'background-color', '#444444');
$css->setStyle('body', 'color', 'white');
$css->setStyle('body', 'font-family', 'Verdana, Arial');
$css->setStyle('a:link', 'color', 'yellow');
$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', '3px solid silver');
$css->setStyle('div.col2', 'padding', '1em');
$css->setStyle('div.col2', 'height', '50%');

$p->addStyleDeclaration($css);
$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><i><b>Laurent Laville, August 2003</b></i></p>');

$note = <<< TEXT
<p>Usage of property <b>scale</b> of progress bar 
and property <b>text</b> into attributes parameter of API setText.</p>
TEXT;

$p->addBodyContent($note);
$p->addBodyContent('<p><a href="progress2.php?align=left">Left</a></p>');
$p->addBodyContent('<p><a href="progress2.php?align=right">Right (default)</a></p>');
$p->addBodyContent('</div>');
$p->display();

for ($i=0; $i<10; $i++) {
/*  You have to do something here  */
    $bar->display(1);
}

?>
This example will produce :   

[Top]

Vertical Bar

In this example, we have decided to show the percent text info, and in same way, to give a new font-size (5px less than default).
$text = array(
    'height' => '15',
    'size' => '7',
    'h-align' => 'center'
);
$bar->setText(true, $text);
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.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 10n");
$p->setMetaData("author", "Laurent Laville");

$bar = new HTML_Progress_Bar_Vertical('natural', $p);
$text = array(
    'height'  => 15,
    'size'    => 7,
    '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', '#006600');
$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 green');
$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 natural</h1>');
$p->addBodyContent('<p><i><b>Laurent Laville, August 2003</b></i></p>');

$note = <<< TEXT
<p>Look and feel of text info legend inside progress bar background.</p>
TEXT;

$p->addBodyContent($note);
$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-part2.html,v 1.2 2003/08/27 22:52:37 Farell Exp $