back to main table of contents

A tutorial/howto for HTML_Progress - Part 6

August 27, 2003

By Laurent Laville

Table of Contents


Template engine integration

Horizontal Bar

In this example, you will need to install HTML_QuickForm and HTML_Template_Sigma packages if it's not yet done!

Check if packages are installed. On command line enter :
pear list
should give something like,
INSTALLED PACKAGES:
===================
PACKAGE              VERSION STATE
...
HTML_CSS             0.2.0   stable
HTML_Common          1.2.1   stable
HTML_Page            2.0.0b5 beta
HTML_Progress        0.6.0   stable
HTML_QuickForm       3.1     stable
HTML_Template_Sigma  1.0.1   stable
...

If it's not, then enter both command lines below :
pear install HTML_QuickForm-3.1.tgz 
and,
pear install HTML_Template_Sigma-1.0.1.tgz 

There are only 3 main operations to do; Do not forget it or it won't work! progress6.php
<?php 
/**
 * Display a loading bar from 0 to 100% increase by step of 10%
 * with custom configuration with a Template Engine 
 * 
 * @version    $Id: howto-part6.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/QuickForm.php');
require_once ('HTML/QuickForm/Renderer/ITStatic.php');
require_once ('HTML/Template/Sigma.php');
require_once ('HTML/Progress/BarHorizontal.php');


$tpl = new HTML_Template_Sigma('.');
$tpl->loadTemplateFile('installing.html');
        
$vars = array (    
    "L_SETUP_APP_TITLE"    => "SW4P",
    "L_APPNAME"            => "My Template Sample",
    "L_APPCOPYRIGHT"       => "&copy 2003 SW4P Team "
);
$tpl->setVariable($vars);

$form = new HTML_QuickForm('form');
$form->addElement('submit', 'launch', 'Launch', 'style="width:100px;"');

$styles = array('none' => 'none',
  'solid'  => 'solid',
  'dashed' => 'dashed',
  'dotted' => 'dotted',
  'inset'  => 'inset',
  'outset' => 'outset'
);
$form->addElement('select','border','border style:',$styles);

$colors = array('#FFFFFF' => 'white', '#0000FF'=> 'blue', '#7B7B88' => '#7B7B88');
$form->addElement('select','color','border color:',$colors);

$defaultValues['border'] = 'solid';
$defaultValues['color']  = '#7B7B88';
$form->setDefaults($defaultValues);

if ($form->validate()) {
    $arr = $form->getElementValue('border');
    $border = $arr[0];
    $arr = $form->getElementValue('color');
    $color = $arr[0];
} else {
    $border = $defaultValues['border'];
    $color  = $defaultValues['color'];
}


$options = array(
    'border-width'     => 2,
    'border-color'     => $color,
    'border-style'     => $border,
    'cell-width'       => 10,
    '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_Bar_Horizontal('natural', $p, $options);

$text = array(
    'width' => 60, 
    'size'  => 14,
    'background-color' => '#d0d0d0' // make it transparent, see styles.css file (#MainWindow)
);
$bar->setText(true, $text);

$message = array(
    'width'   => 350,
    'font'    => 'Verdana, Arial', 
    'background-color' => '#d0d0d0',
    'h-align' => 'left',
    'v-align' => 'bottom'
);
$bar->setMessageLine(true, $message);

$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');
$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');

$p->addStyleDeclaration($css);
$p->addScriptDeclaration( $bar->getScript() );
$p->addBodyContent($tpl->get());
$p->display();

$bar->setMessage('Installation in progress ...');

for ($i=0; $i<10; $i++) {
/*  You have to do something here  */
    if ($bar->getProgress() > 25) {
        $bar->setMessage('step 1 - DB schema generated');
    }
    if ($bar->getProgress() > 50) {
        $bar->setMessage('step 2 - Config file created');
    }
    $bar->display(10);
}
$bar->setMessage('Installation terminated !');
$bar->display(100,"set");

?>
This example will produce :   

[Top]

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