back to main table of contents
August 27, 2003
By Laurent Laville
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]
$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]
$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