ITX static

Overview

This example will run a progress bar into a window of a pseudo-wizard.
You may change the look and feel (border style) of the progress bar, and launch it again to see modifications in action.

Screenshot

sample screenshot

Demonstration

Give it a try

Dependencies

This example requires mandatory resources :

And also but optional :

Explains step by step

The progress meter wait 200ms (line 85) between each step of 5% (line 86).

There are 10 cells 20x20 (line 87) with:

Property Value Default
active-color #7B7B88 #006600
inactive-color #D0D0D0 #CCCCCC
width 20 15
height   20
spacing   2
See also :

Surrounded by a 2 pixels border (lines 88-93):

Property Value Default
class   progressBorder%s
width 2 0
style solid solid
color #7B7B88 #000000
See also :

And the progress bar string is left aligned on bottom side (lines 96-102):

Property Value Default
left 0 5
top   5
width 320 0
height   0
align   left
valign bottom top
background-color   
font-size 10 11
font-family  Verdana, Tahoma, Arial
font-weight  normal
color  #000000
class  progressTextLabel%s
See also :

Source Code

  1. <?php
  2. /**
  3. * Display horizontal progress meter into html page
  4. * built with ITX template system file.
  5. *
  6. * @version    $Id: itxstatic.php,v 1.1 2005/06/12 21:09:09 farell Exp $
  7. * @author     Laurent Laville <pear@laurent-laville.org>
  8. * @package    HTML_Progress2
  9. * @subpackage Examples
  10. * @access     public
  11. */
  12. require_once 'HTML/QuickForm.php';
  13. require_once 'HTML/QuickForm/Renderer/ITStatic.php';
  14. require_once 'HTML/Template/ITX.php';
  15. require_once 'HTML/Progress2.php';
  16.  
  17. /**
  18. *  The progress bar display messages
  19. *  of a software installation simulation.
  20. *
  21. *  @param int     $pValue   current value of the progress bar
  22. *  @param object  $pBar     the progress bar itself
  23. */
  24. function myFunctionHandler($pValue, &$pBar)
  25. {
  26.     $pBar->sleep();
  27.     $str = ' ';
  28.  
  29.     if ($pValue > 25) {
  30.         $str = ' - DB schema generated';
  31.     }
  32.     if ($pValue > 50) {
  33.         $str = ' - Config file created';
  34.     }
  35.     if ($pValue == 100) {
  36.         $str = ' - All done !';
  37.     }
  38.     $caption = sprintf('Installation in progress ... %01s%s %s',
  39.                        $pValue,
  40.                        '%',
  41.                        $str);
  42.     $pBar->setLabelAttributes('txt1', array('value' => $caption));
  43. }
  44.  
  45. $tpl = new HTML_Template_ITX('.');
  46. $tpl->loadTemplateFile('itxstatic.html');
  47.  
  48. $vars = array (
  49.     'setup_title_label'   => 'SW4P',
  50.     'app_copyright_label' => '&copy; 2003 SW4P Team ',
  51. );
  52. $tpl->setVariable($vars);
  53.  
  54. $form = new HTML_QuickForm('form');
  55. $form->addElement('submit', 'launch', 'Launch', 'style="width:100px;"');
  56.  
  57. $styles = array(
  58.   'none'   => 'none',
  59.   'solid'  => 'solid',
  60.   'dashed' => 'dashed',
  61.   'dotted' => 'dotted',
  62.   'inset'  => 'inset',
  63.   'outset' => 'outset'
  64. );
  65. $form->addElement('select', 'border', 'border style:', $styles);
  66.  
  67. $colors = array('#FFFFFF' => 'white', '#0000FF'=> 'blue', '#7B7B88' => '#7B7B88');
  68. $form->addElement('select', 'color', 'border color:', $colors);
  69.  
  70. $defaultValues['border'] = 'solid';
  71. $defaultValues['color']  = '#7B7B88';
  72. $form->setDefaults($defaultValues);
  73.  
  74. if ($form->validate()) {
  75.     $arr = $form->getElementValue('border');
  76.     $border = $arr[0];
  77.     $arr = $form->getElementValue('color');
  78.     $color = $arr[0];
  79. } else {
  80.     $border = $defaultValues['border'];
  81.     $color  = $defaultValues['color'];
  82. }
  83.  
  84. $pb = new HTML_Progress2(null, HTML_PROGRESS2_BAR_HORIZONTAL, 0, 100, false);
  85. $pb->setAnimSpeed(200);
  86. $pb->setIncrement(5);
  87. $pb->setCellAttributes('active-color=#7B7B88 inactive-color=#D0D0D0 width=20');
  88. $pb->setBorderPainted(true);
  89. $pb->setBorderAttributes(array(
  90.     'width' => 2,
  91.     'color' => $color,
  92.     'style' => $border
  93. ));
  94.  
  95. // Adds additional text label
  96. $pb->addLabel(HTML_PROGRESS2_LABEL_TEXT, 'txt1');
  97. $pb->setLabelAttributes('txt1', array(
  98.     'font-size' => 10,
  99.     'width' => 320,
  100.     'left' => 0,
  101.     'valign' => 'bottom'
  102. ));
  103. $pb->setProgressHandler('myFunctionHandler');
  104.  
  105. $tpl->setVariable('stylesheet_html', $pb->getStyle());
  106. $tpl->setVariable('javascript_html', $pb->getScript());
  107. $tpl->setVariable('progress_bar_html', $pb->toHtml());
  108.  
  109. $renderer = new HTML_QuickForm_Renderer_ITStatic($tpl);
  110. $form->accept($renderer);
  111. $tpl->show();
  112.  
  113. if ($form->validate()) {
  114.     $pb->run();
  115. }
  116. ?>