PEAR Progress2 logo

HTML_Progress2 : The Definitive Guide

Reuse CSS
Prev  Chapter 14. New Features in HTML_Progress2  Next

Reuse CSS

Step 1 : Extract Javascript code
Step 2 : Extract CSS code
Step 3 : Remove HTML_Progress2 css properties
Step 4 : Adjust CSS class selector
Step 5 : play with new pattern

This section is intended to provide a HOWTO guide that you should follow step by step to discover the new feature of HTML_Progress2 version 2.2.0

Until now we should used HTML_Progress2 API to set all styles (color, size, font, ...) of our progress bars. We will discover now with HTML_Progress2::importStyle() method that it can be done in one step and PHP code is more reusable. We can change look and feel only on modify CSS data source.

Step 1 : Extract Javascript code

We will use the Ancestor example (included into the package distribution), all long of this demonstration.

Here are the original source code (without header).

Example 14.1. script: examples/horizontal/ancestor.php

  1. <?php
  2. require_once 'HTML/Progress2.php';
  3.  
  4. $pb = new HTML_Progress2();
  5. $pb->setAnimSpeed(200);
  6. $pb->setIncrement(10);
  7. $pb->setLabelAttributes('pct1', array(
  8.     'width' => 60,
  9.     'height' => 24,
  10.     'top' => 0,
  11.     'left' => 0,
  12.     'background-color' => '#FFFFFF',
  13.     'font-size' => 14,
  14.     'align' => 'center'
  15.     ));
  16. ?>
  17. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  18.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  19. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  20. <head>
  21. <title>Ancestor Progress2 example</title>
  22. <style type="text/css">
  23. <!--
  24. <?php echo $pb->getStyle(); ?>
  25.  
  26. body {
  27.     background-color: #444444;
  28. }
  29.  -->
  30. </style>
  31. <?php echo $pb->getScript(false); ?>
  32. </head>
  33. <body>
  34.  
  35. <?php
  36. $pb->display();
  37. $pb->run();
  38. ?>
  39.  
  40. </body>
  41. </html>
Line 31 :

Due to minor fix we have to do later in javascript code, lets begin by replace this line by a reference to an external JS file.

  1. <script type="text/javascript" src="progress2BasicHandler.js"></script>

What content is :

Example 14.2. script: progress2BasicHandler.js

  1. function setProgress(pIdent, pValue, pDeterminate, pCellCount)
  2. {
  3.     if (pValue == pDeterminate) {
  4.         for (var i = 0; i < pCellCount; i++) {
  5.             showCell(i, pIdent, 'I');
  6.         }
  7.     }
  8.     if ((pDeterminate > 0) && (pValue > 0)) {
  9.         var i = (pValue - 1) % pCellCount;
  10.         showCell(i, pIdent, 'A');
  11.     } else {
  12.         for (var i = pValue - 1; i >= 0; i--) {
  13.             showCell(i, pIdent, 'A');
  14.         }
  15.     }
  16. }
  17.  
  18. function showCell(pCell, pIdent, pVisibility)
  19. {
  20.     var name = 'pcel' + pCell + pIdent;
  21.     var cellElement = document.getElementById(name);
  22.     cellElement.className = 'cell' + pIdent + pVisibility;
  23. }
  24.  
  25. function hideProgress(pIdent)
  26. {
  27.     var name = 'tfrm' + pIdent;
  28.     var tfrm = document.getElementById(name);
  29.     tfrm.style.visibility = "hidden";
  30. }
  31.  
  32. function setLabelText(pIdent, pName, pText)
  33. {
  34.     var name = 'plbl' + pName + pIdent;
  35.     document.getElementById(name).firstChild.nodeValue = pText;
  36. }
  37.  
  38. function setElementStyle(pPrefix, pName, pIdent, pStyles)
  39. {
  40.     var name = pPrefix + pName + pIdent;
  41.     var styles = pStyles.split(';');
  42.     styles.pop();
  43.     for (var i = 0; i < styles.length; i++) {
  44.         var s = styles[i].split(':');
  45.         var c = 'document.getElementById(name).style.' + s[0] + '="' + s[1] + '"';
  46.         eval(c);
  47.     }
  48. }
  49.  
  50. function setRotaryCross(pIdent, pName)
  51. {
  52.     var name = 'plbl' + pName + pIdent;
  53.     var cross = document.getElementById(name).firstChild.nodeValue;
  54.     switch(cross) {
  55.         case "--": cross = "\\"; break;
  56.         case "\\": cross = "|"; break;
  57.         case "|": cross = "/"; break;
  58.         default: cross = "--"; break;
  59.     }
  60.     document.getElementById(name).firstChild.nodeValue = cross;
  61. }

Step 2 : Extract CSS code

First, identify the progress bar with a static identifier, for example PB1. (see line 5), rather than used the default identifier that change on each run.

  1. <?php
  2. require_once 'HTML/Progress2.php';
  3.  
  4. $pb = new HTML_Progress2();
  5. $pb->setIdent('PB1');
  6. //...
  7. ?>
  8. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  9.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  10. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  11. <head>
  12. <title>Ancestor Progress2 example</title>
  13. <style type="text/css">
  14. <!--
  15. <?php echo $pb->getStyle(); ?>
  16.  
  17. body {
  18.     background-color: #444444;
  19. }
  20.  -->
  21. </style>
  22. <?php echo $pb->getScript(false); ?>
  23. </head>
Line 15 :

Replace dynamic reference HTML_Progress2::getStyle() to inline stylesheet by a reference to a static file ancestor.css.

  1. <link rel="stylesheet" type="text/css" href="ancestor.css" />

What content is :

Example 14.3. ancestor.css

  1. .cellPB1I, .cellPB1A {
  2.   width: 15px;
  3.   height: 20px;
  4.   font-family: Courier, Verdana;
  5.   font-size: 8px;
  6.   float: left;
  7. }
  8.  
  9. .progressBorderPB1 {
  10.   width: 172px;
  11.   height: 24px;
  12.   background-color: #FFFFFF;
  13. }
  14.  
  15. .progressPercentLabelpct1PB1 {
  16.   width: 60px;
  17.   height: 24px;
  18.   text-align: center;
  19.   background-color: #FFFFFF;
  20.   font-size: 14px;
  21.   font-family: Verdana, Tahoma, Arial;
  22.   font-weight: normal;
  23.   color: #000000;
  24. }
  25.  
  26. .cellPB1I {
  27.   background-color: #CCCCCC;
  28. }
  29.  
  30. .cellPB1A {
  31.   background-color: #006600;
  32. }

And don't forget to add the new method HTML_Progress2::importStyle() to your PHP script, with url of your external stylesheet.

  1. <?php
  2. // ...
  3.  
  4. $pb->importStyle('ancestor.css');
  5. ?>
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  7.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  8. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  9. <head>
  10.  
  11. <!--  ... -->
  12.  
  13. </html>

Step 3 : Remove HTML_Progress2 css properties

If you have followed all previous explains, your code should be something like this one :

  1. <?php
  2. require_once 'HTML/Progress2.php';
  3.  
  4. $pb = new HTML_Progress2();
  5. $pb->setIdent('PB1');
  6. $pb->setAnimSpeed(200);
  7. $pb->setIncrement(10);
  8.  
  9. $pb->setLabelAttributes('pct1', array(
  10.     'width' => 60,
  11.     'height' => 24,
  12.     'top' => 0,
  13.     'left' => 0,
  14.     'background-color' => '#FFFFFF',
  15.     'font-size' => 14,
  16.     'align' => 'center'
  17.     ));
  18.  
  19. $pb->importStyle('ancestor.css');
  20. ?>
  21. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  22.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  23. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  24. <head>
  25. <title>Ancestor Progress2 example</title>
  26. <link rel="stylesheet" type="text/css" href="ancestor.css" />
  27. <style type="text/css">
  28. <!--
  29. body {
  30.     background-color: #444444;
  31. }
  32.  -->
  33. </style>
  34. <script type="text/javascript" src="progress2BasicHandler.js"></script>
  35. </head>
  36. <body>
  37.  
  38. <?php
  39. $pb->display();
  40. $pb->run();
  41. ?>
  42.  
  43. </body>
  44. </html>
Lines 10-11, 14-15 :

These lines corresponding to same CSS properties from .progressPercentLabelpct1PB1 class selector.

Lines 12-13 :

Defines the progress bar position (relative) into browser frame.

Line 16 :

Give percent text label alignment. There is no CSS property equivalence.

[Important] Important
Don't forget to remove lines 10-11, 14-15 to get PHP code without CSS references.

Step 4 : Adjust CSS class selector

To get possibility to handle all your progress bar look and feel (style) with only a stylesheet, we still need to modify the PHP script and a little line in JS script.

Begin with PHP source code :

  1. <?php
  2. require_once 'HTML/Progress2.php';
  3.  
  4. $pb = new HTML_Progress2();
  5. $pb->setIdent('PB1');
  6. $pb->setAnimSpeed(200);
  7. $pb->setIncrement(10);
  8.  
  9. $pb->setBorderAttributes('class=progressBorder');
  10. $pb->setCellAttributes('class=cell');
  11. $pb->setLabelAttributes('pct1', array(
  12.     'class' => 'progressPercentLabel',
  13.     'top' => 0,
  14.     'left' => 0,
  15.     'align' => 'center'
  16.     ));
  17.  
  18. $pb->importStyle('ancestor.css');
  19. ?>
  20. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  21.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  22. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  23. <head>
  24. <title>Ancestor Progress2 example</title>
  25. <link rel="stylesheet" type="text/css" href="ancestor.css" />
  26. <style type="text/css">
  27. <!--
  28. body {
  29.     background-color: #444444;
  30. }
  31.  -->
  32. </style>
  33. <script type="text/javascript" src="progress2BasicHandler.js"></script>
  34. </head>
  35. <body>
  36.  
  37. <?php
  38. $pb->display();
  39. $pb->run();
  40. ?>
  41.  
  42. </body>
  43. </html>
Line 9 :

Add this line to change the progress border CSS class selector. Remember, default is : progressBorder%s, where %s is the placeholder to include progress bar identifier (return by HTML_Progress2::getIdent()).

Line 10 :

Add this line to change the cell CSS class selector. Remember, default is : cell%s, where %s is the placeholder to include progress bar identifier (return by HTML_Progress2::getIdent()).

Line 12 :

Add this line to change the progress percent label CSS class selector. Remember, default is : progressPercentLabel%s, where %s is the placeholder to include label and progress bar identifiers.

Last, to finish our modifications, we need to remove the progress bar identifier placeholder into JS script: progress2BasicHandler.js at line 22. From :

  1. cellElement.className = 'cell' + pIdent + pVisibility;

To :

  1. cellElement.className = 'cell' + pVisibility;

Step 5 : play with new pattern

Modify again the stylesheet to identify by another way the progress bar identifier that was removed from CSS class selector, in previous step.

Example 14.4. New content of ancestor.css

  1. #pbarPB1 .cellI, #pbarPB1 .cellA {
  2.   width: 15px;
  3.   height: 20px;
  4.   font-family: Courier, Verdana;
  5.   font-size: 8px;
  6.   float: left;
  7. }
  8.  
  9. #pbrdPB1.progressBorder {
  10.   width: 172px;
  11.   height: 24px;
  12.   background-color: #FFFFFF;
  13. }
  14.  
  15. #plblpct1PB1.progressPercentLabel {
  16.   width: 60px;
  17.   height: 24px;
  18.   text-align: center;
  19.   background-color: #FFFFFF;
  20.   font-size: 14px;
  21.   font-family: Verdana, Tahoma, Arial;
  22.   font-weight: normal;
  23.   color: #000000;
  24. }
  25.  
  26. #pbarPB1 .cellI {
  27.   background-color: #CCCCCC;
  28. }
  29.  
  30. #pbarPB1 .cellA {
  31.   background-color: #006600;
  32. }
Lines 1, 26, 30 :

Remove reference to progress bar identifier PB1, and add the <div> identifier #pbarPB1 for each cell class selector (active, inactive).

[Caution] Caution
Don't forget to add a blank between #pbarPB1 and .cellI (or .cellA)
Line 9 :

Remove reference to progress bar identifier PB1, and add the <div> identifier #pbrdPB1.

Line 15 :

Remove reference to progress bar identifier PB1, percent label pct1, and add the <div> identifier #plblpct1PB1.

All components (PHP script and CSS file) are ready to play with them and change color, size, ... Almost what you want.

[Tip] Tip
To switch from a skin to another, you just have to change progress bar identifier in PHP script.
  1. <?php
  2. require_once 'HTML/Progress2.php';
  3.  
  4. $pb = new HTML_Progress2();
  5. $pb->setIdent('PB1');
  6. // $pb->setIdent('PB2');
  7. // ...
  8. ?>

Example 14.5. ancestor.css with two skins

  1. #pbarPB1 .cellI, #pbarPB1 .cellA, #pbarPB2 .cellI, #pbarPB2 .cellA {
  2.   width: 15px;
  3.   height: 20px;
  4.   font-family: Courier, Verdana;
  5.   font-size: 8px;
  6.   float: left;
  7. }
  8. #pbarPB2 .cellI, #pbarPB2 .cellA {
  9.   width: 10px;
  10. }
  11.  
  12. #pbrdPB1.progressBorder, #pbrdPB2.progressBorder {
  13.   width: 172px;
  14.   height: 24px;
  15.   background-color: #FFFFFF;
  16. }
  17. #pbrdPB2.progressBorder {
  18.   width: 122px;
  19.   border-width: 1px;
  20.   border-style: solid;
  21.   border-color: navy;
  22. }
  23.  
  24. #plblpct1PB1.progressPercentLabel {
  25.   width: 60px;
  26.   height: 24px;
  27.   text-align: center;
  28.   background-color: #FFFFFF;
  29.   font-size: 14px;
  30.   font-family: Verdana, Tahoma, Arial;
  31.   font-weight: normal;
  32.   color: #000000;
  33. }
  34. #plblpct1PB2.progressPercentLabel {
  35.   width: 60px;
  36.   text-align: center;
  37.   background-color: transparent;
  38.   font-size: 14px;
  39.   font-family: Verdana, Tahoma, Arial;
  40.   font-weight: normal;
  41.   color: white;
  42. }
  43.  
  44. #pbarPB1 .cellI {
  45.   background-color: #CCCCCC;
  46. }
  47. #pbarPB1 .cellA {
  48.   background-color: #006600;
  49. }
  50.  
  51. #pbarPB2 .cellI {
  52.   background-color: #EEEECC;
  53. }
  54. #pbarPB2 .cellA {
  55.   background-color: #3874B4;
  56. }
HTML_Progress2 : The Definitive Guide v 2.4.0 : April 20, 2007
Prev  Up  Next
Error Handling  Home  Part IV. Reference Guide