July 23,2003
By Laurent Laville
pear install HTML_Progress-0.4.1.tgz(the pear installer should be installed by default with PHP 4.3) But you can also get the class directly from my website (http://farell.free.fr/en/pear/bin/HTML_Progress-0.4.1.tgz)
Even if it's still in beta state (2.0.0b5 on 2003-07-29)
you can get the HTML_Page's class directly from the pear website
(http://pear.php.net/package-info.php?package=HTML_Page).
You can get the HTML_CSS's class directly from the pear website
(http://pear.php.net/package-info.php?package=HTML_CSS).
* width 180px * height 22px * background-color white * padding 2px * border-width 0px * border-style solid * border-color black * cell-width 15px * cell-height 20px * cell-spacing 2px * active-color #006600 * inactive-color #cccccc
This example will produce :
<?php
require_once ('HTML/Progress.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();
for ($i=0; $i<11; $i++) {
$bar->display(10);
echo "installing package ... : ". $pkg[$i] ."<br /> \n";
}
?>
$bar->setText(true, array('size' => '14px'));
This example will produce :
<?php
require_once ('HTML/Progress.php');
$p = new HTML_Page();
$p->setTitle("PEAR::HTML_Progress - Example 2");
$p->setMetaData("author", "Laurent Laville");
$bar = new HTML_Progress(&$p, array('width' => '230px'));
$bar->setText(true, array('size' => '14px'));
$css =& $bar->getStyle();
$css->setStyle('body', 'background-color', '#444444');
$p->addStyleDeclaration(&$css);
$p->addBodyContent($bar->toHTML());
$p->display();
for ($i=0; $i<11; $i++) {
/* You have to do something here */
$bar->display(10);
}
?>
This example will produce :
<?php
require_once ('HTML/Progress.php');
$p = new HTML_Page();
$p->setTitle("PEAR::HTML_Progress - Example 3");
$p->setMetaData("author", "Laurent Laville");
$layout = array(
'width' => '200px',
'border-width' => '1px',
'border-color' => 'navy',
'cell-width' => '10px',
'active-color' => '#3874B4',
'inactive-color'=> '#EEEECC'
);
$bar = new HTML_Progress(&$p, $layout);
$bar->setText(true, array('size' => '14px'));
$css =& $bar->getStyle();
$css->setStyle('body', 'background-color', '#eeeeee');
$p->addStyleDeclaration(&$css);
$p->addBodyContent($bar->toHTML());
$p->display();
for ($i=0; $i<11; $i++) {
/* You have to do something here */
$bar->display(16);
}
?>
$bar->setText(true, array('size' => '14px', 'color' => 'red'));
This example will produce :
<?php
require_once ('HTML/Progress.php');
$layout = array(
'width' => '300px',
'border-width' => '1px',
'cell-width' => '20px',
'active-color' => '#970038',
'inactive-color'=> '#FFDDAA'
);
$bar = new HTML_Progress(false, $layout);
$bar->setText(true, array('size' => '14px', 'color' => 'red'));
for ($i=0; $i<11; $i++) {
/* You have to do something here */
$bar->display(10);
}
?>
'padding' => '0px',Default 2px make a 10 cells look and feel !
This example will produce :
<?php
require_once ('HTML/Progress.php');
$p = new HTML_Page();
$p->setTitle("PEAR::HTML_Progress - Example 5");
$p->setMetaData("author", "Laurent Laville");
$layout = array(
'width' => '300px',
'background-color' => '#EBEBEB',
'padding' => '0px',
'border-width' => '1px',
'border-style' => 'inset',
'border-color' => 'white',
'cell-width' => '20px',
'cell-spacing' => '0px',
'active-color' => '#000084',
'inactive-color' => '#3A6EA5'
);
$bar = new HTML_Progress(&$p, $layout);
$bar->setText(true);
$css =& $bar->getStyle();
$css->setStyle('body', 'background-color', '#c3c6c3');
$css->setStyle('body', 'font-family', 'Verdana, Arial');
$p->addStyleDeclaration(&$css);
$p->addBodyContent($bar->toHTML());
$p->display();
/* Progress Start */
echo "task to do at start ... <br /> \n";
$bar->display(0,"set");
/* You have to do something here at 25% */
echo "task to do at 25% ... <br /> \n";
sleep(1);
$bar->display(25,"set");
/* You have to do something here at 50% */
echo "task to do at 50% ... <br /> \n";
sleep(1);
$bar->display(50,"set");
/* You have to do something here at 75% */
echo "task to do at 75% ... <br /> \n";
sleep(1);
$bar->display(75,"set");
/* Progress End */
echo "it's finished: hope you've enjoy it ! ";
sleep(1);
$bar->display(100,"set");
?>
This example will produce :
<?php
require_once ('HTML/QuickForm.php');
require_once ('HTML/QuickForm/Renderer/ITStatic.php');
require_once ('HTML/Template/Sigma.php');
require_once ('HTML/Progress.php');
$tpl = new HTML_Template_Sigma('.');
$tpl->loadTemplateFile('installing.html');
$vars = array (
"L_SETUP_APP_TITLE" => "SW4P",
"L_APPNAME" => "My Template Sample",
"L_APPCOPYRIGHT" => "© 2003 SW4P Team "
);
$tpl->setVariable($vars);
$form = new HTML_QuickForm('form');
$form->addElement('button', 'cancel', 'Cancel', 'style="width:100px;" disabled="true"');
$layout = array(
'width' => '200px',
'border-width' => '2px',
'border-color' => '#7B7B88',
'cell-width' => '10px',
'active-color' => '#7B7B88',
'inactive-color' => '#D0D0D0'
);
$p = new HTML_Page();
$p->setTitle("PEAR::HTML_Progress - Example 6");
$p->setMetaData("author", "Laurent Laville");
$p->addStyleSheet("./styles.css");
$bar = new HTML_Progress(&$p, $layout);
$bar->setText(true);
$tpl->setVariable("L_PROGRESS_BAR", $bar->toHTML());
$renderer =& new HTML_QuickForm_Renderer_ITStatic($tpl);
$form->accept($renderer);
$css =& $bar->getStyle();
$css->setStyle('body', 'background-color', '#444444');
$p->addStyleDeclaration(&$css);
$p->addBodyContent($tpl->get());
$p->display();
for ($i=0; $i<11; $i++) {
/* You have to do something here */
$bar->display(10);
}
?>
$layout = array( 'width' => '200px', 'border-width' => '2px', 'border-color' => '#7B7B88', 'cell-width' => '10px', 'active-color' => '#7B7B88', 'inactive-color' => '#D0D0D0' );Replace line:
$bar = new HTML_Progress(&$p, $layout);By line:
$bar = new HTML_Progress(&$p);Replace also line:
$css =& $bar->getStyle();By line:
$css =& new HTML_CSS();And add after line:
$p->addStyleSheet("./styles.css");a new line like this one:
$p->addStyleSheet("./progress.css");Where you'll find all color and presentation declarations related to progress bar. StyleSheet progress.css could be look like:
#progressBar { background-color: white; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; border: 2px solid #7B7B88; width: 200px; padding: 2px; } #installationProgress { text-align: right; } #progressCell0,#progressCell1,#progressCell2,#progressCell3,#progressCell4, #progressCell5,#progressCell6,#progressCell7,#progressCell8,#progressCell9 { float: left; width: 10px; height: 20px; margin-right: 2px; } .cell0 { background-color: #d0d0d0; } .cell1 { background-color: #7B7B88; }
![]() |
Article URL: | http://farell.free.fr/en/pear/sources/HTML_Progress/docs/index.html |
Article publication: | July 23, 2003 | |
Article author: | Laurent Laville |