Examples TOC examples

Blue Sand Plus

$Date: 2005/07/25 10:25:30 $

Table of contents

Introduction
Render options
Ouput
PHP source syntax highlight

Introduction

This example requires :

PEAR::HTML_Progress 1.2.2 or better.

This example will run a natural horizontal ProgressBar with blue skin. It will also show you how to print something inside cells with an external javascript (replaced internal code).

Percent text info is centered on a 60 pixels width area, on right side of the progress bar.

Render options

Here are options to build the progress bar cells :

active-color   = #3874B4
inactive-color = #EEEECC
width          = 10

HTML_Progress_UI::setCellAttributes()

Here are options to build the progress bar border :

width = 1
color = navy

HTML_Progress_UI::setBorderAttributes()

Here are options to build the progress bar string (percent text info):

width            = 60
font-size        = 14
background-color = #EEEEEE
align            = center

HTML_Progress_UI::setStringAttributes()

Here is the external javascript source-code which replace internal code :

var isDom = document.getElementById?true:false;
var isIE  = document.all?true:false;
var isNS4 = document.layers?true:false;
var cellCount = 10;

function setprogress(pIdent, pValue, pString, pDeterminate)
{
        if (isDom)
            prog = document.getElementById(pIdent+'installationProgress');
        if (isIE)
            prog = document.all[pIdent+'installationProgress'];
        if (isNS4)
            prog = document.layers[pIdent+'installationProgress'];
        if (prog != null)
            prog.innerHTML = pString;

        if (pValue == pDeterminate) {
            for (i=0; i < cellCount; i++) {
                showCell(i, pIdent, "hidden");
            }
        }
        if ((pDeterminate > 0) && (pValue > 0)) {
            i = (pValue-1) % cellCount;
            showCell(i, pIdent, "visible");
        } else {
            for (i=pValue-1; i >=0; i--) {
                showCell(i, pIdent, "visible");
                if (isDom)
                    document.getElementById(pIdent+'progressCell'+i+'A').innerHTML = i;
                if (isIE)
                    document.all[pIdent+'progressCell'+i+'A'].innerHTML = i;
                if (isNS4)
                    document.layers[pIdent+'progressCell'+i+'A'].innerHTML = i;
            }
    }
}

function showCell(pCell, pIdent, pVisibility)
{
    if (isDom)
        document.getElementById(pIdent+'progressCell'+pCell+'A').style.visibility = pVisibility;
    if (isIE)
        document.all[pIdent+'progressCell'+pCell+'A'].style.visibility = pVisibility;
    if (isNS4)
        document.layers[pIdent+'progressCell'+pCell+'A'].style.visibility = pVisibility;

}

href: ./progress_number.js

Output

Screenshot

PHP source syntax highlight

<?php
/**
 * Natural Horizontal ProgressBar example with JavaScript customization.
 * See also ProgressMaker usage with pre-set UI model 'BlueSandPlus'.
 *
 * @version    $Id: bluesandplus.php,v 1.2 2005/07/25 10:25:30 farell Exp $
 * @author     Laurent Laville <pear@laurent-laville.org>
 * @package    HTML_Progress
 * @subpackage Examples
 */
 
require_once 'HTML/Progress.php';
 
$bar = new HTML_Progress();
$bar->setAnimSpeed(100);
$bar->setIncrement(10);
$bar->setBorderPainted(true);
 
$ui =& $bar->getUI();
$ui->setTab('    ');
$ui->setCellAttributes('active-color=#3874B4 inactive-color=#EEEECC width=10');
$ui->setBorderAttributes('width=1 color=navy');
$ui->setStringAttributes('width=60 font-size=14 background-color=#EEEEEE align=center');
$ui->setScript('progress_number.js');
 
foreach (range(0,2) as $index) {
    $ui->setCellAttributes('color=silver', $index);
}
foreach (range(3,6) as $index) {
    $ui->setCellAttributes('color=yellow', $index);
}
foreach (range(7,9) as $index) {
    $ui->setCellAttributes('color=orange', $index);
}
?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>BlueSandPlus Progress example</title>
<style type="text/css">
<!--
<?php echo $bar->getStyle(); ?>
 
body {
    background-color: #EEEEEE;
    color: #000000;
    font-family: Verdana, Arial;
}
 
a:visited, a:active, a:link {
    color: navy;
}
// -->
</style>
<script type="text/javascript" src="<?php echo $bar->getScript(); ?>"></script>
</head>
<body>
 
<?php
echo $bar->toHtml();
$bar->run();
?>
 
</body>
</html>