back to main table of contents

A tutorial/howto for HTML_Progress - Part 7

August 27, 2003

By Laurent Laville

Table of Contents


Message line status

Default values

Message line:
    -  width                         bar_width
    -  font                 Verdana, Arial, Helvetica, sans-serif
    -  size                     12px
    -  color                   black
    -  background-color        white
    -  v-align                bottom (top, bottom)
    -  h-align                  left (left, right, center)
By default, message line is as wide as progress bar. If you want to display long message, you will have to change width property as follow :
$bar->setMessageLine(true, array('width' => 300, 'font' => 'Arial, Helvetica'));

[Top]

Horizontal Bar

To display a simple line my message, you need to code:
$bar->setMessage("my message");
progress1m.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, ...)
 * and a message line.
 * 
 * @version    $Id: howto-part7.html,v 1.1 2003/08/27 22:52:37 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();

$bar->setMessageLine(true, array('width' => 300, 'font' => 'Arial, Helvetica'));

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

?>
This example will produce :   

[Top]

Vertical Bar

Before using message feature, you would perharps change the look and feel of the line. You can do this, with API setMessageLine(). Depending of first parameter, the message line will be shown (true) or hidden (false).
$message = array(
    'width' => 100,
    'font'  => 'Arial, Helvetica', 
    'size'  => 10, 
    'color' => 'lightyellow', 
    'background-color' => '#444444',
    'h-align' => 'left',
    'v-align' => 'bottom'
);
$bar->setMessageLine(true, $message);
progress12.php
<?php 
/**
 * Display a vertical loading bar with percent info, 
 * filled in natural order (down to up)
 * from 0 to 100% increase by step of 10%
 * with default colors
 * and with message line of progress bar filled
 * on different steps.
 * 
 * @version    $Id: howto-part7.html,v 1.1 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 12");
$p->setMetaData("author", "Laurent Laville");


$bar = new HTML_Progress_Bar_Vertical('natural', $p);

$text = array(
    'size'    => 14, 
    'width'   => 60,
    'height'  => 30, 
    'color'   => 'white', 
    'background-color' => '#444444',
    'h-align' => 'left',
    'v-align' => 'bottom'
);
$bar->setText(true, $text);

$message = array(
    'width' => 100,
    'font'  => 'Arial, Helvetica', 
    'size'  => 10, 
    'color' => 'lightyellow', 
    'background-color' => '#444444',
    'h-align' => 'left',
    'v-align' => $_GET['align']
);
$bar->setMessageLine(true, $message);

$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', '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 12</h1>');
$p->addBodyContent('<p><i>Laurent Laville, August 2003</i></p>');

$note = <<< TEXT
<p>Different messages may be display during progress, see API <b>SetMessage</b> in action.</p>
TEXT;

$p->addBodyContent($note);
$p->addBodyContent('<p><a href="progress12.php?align=top">Top</a></p>');
$p->addBodyContent('<p><a href="progress12.php?align=bottom">Bottom (default)</a></p>');
$p->addBodyContent('</div>');
$p->display();


$bar->setMessage('running ...');

for ($i=0; $i<10; $i++) {
/*  You have to do something here  */
    $bar->display(10);
    if ($bar->getProgress() >= 50) {
        $bar->setMessage('half done');
    }
}
$bar->setMessage('done!');
$bar->display(100,"set");

?>
This example will produce :   

[Top]

back to main table of contents
$Id: howto-part7.html,v 1.1 2003/08/27 22:52:37 Farell Exp $