BgImages with AJAX

Overview

This example will run a natural horizontal progress bar with background pictures, in asynchronous mode.
Use a simple (HTML_)AJAX server with only a PHP function as callback.

Screenshot

sample screenshot

Demonstration

Give it a try

Dependencies

PHP >= 4.3.0
PEAR::HTML_Progress2 >= 2.3.0a2
PEAR::HTML_Common >= 1.2.1
PEAR::HTML_CSS >= 1.1.2
PEAR::PHP_Compat >= 1.4.1
PEAR::Event_Dispatcher >= 0.9.1
PEAR::HTML_AJAX >= 0.5.0

And also but optional :

PEAR >= 1.3.5

Explains step by step

Lines 12-17: clean-up session data when user-task is over (progress meter at 100%). The default behavior of AJAX progress bar is to reload the same page when task is complete. Use QueryString "reload=true". To change this behavior, you have to modify content of HTML_Progress2.onComplete JavaScript variable (See example 15.4 with usage of Scriptaculous AJAX framework).

Lines 21-39: Level design with all API to define look and feel of your progress bar.

Line 40: function HTML_Progress2::registerAJAX, allow to identify components of (HTML_)AJAX server. Here we don't use the default server name ('server.php') but script 'phpcb_server1.php' that will handle through a simple PHP function getPercentage the simulation of a user-task that take many cycles to complete, and return new status of the progress bar (percentage key-value pair).

Line 49: We don't reuse CSS external file, so we put inline all styles required to display the progress bar (as defined by level design : lines 21-39).

Line 54: We include the necessary JavaScript backend to handle normal and AJAX progress bar.
Other possibilities are :

get inline JS code with:

echo $pb->getScript(false);  // standard PEAR install

get inline JS code with:

echo $pb->getScript(false, dirname(__FILE__));  retrieve local copy of HTML_Progress2.js

set and get new location of HTML_Progress2.js or alternative JS backend with:

$pb->setScript('/path/to/myHTMLProgress2.js');  // and line below ...
echo $pb->getScript(false);  // give HTML reference to JS resource as below
<script type="text/javascript" src="/path/to/myHTMLProgress2.js"></script>

Line 56: Do all job to initialize references to AJAX server and JS client librairies used. Will print these lines:

<script type='text/javascript' src='phpcb_server1.php?client=all'></script>
<script type='text/javascript' src='phpcb_server1.php?stub=getpercentage'></script>
<script type="text/javascript">HTML_AJAX.defaultServerUrl = 'phpcb_server1.php'</script>

Line 60: We identify for HTML_Progress2/HTML_AJAX JS backend what remote function to call.

Line 66: Very simple User Interface to start the remote task (simulation) and update the progress bar

Line 67: Produces only HTML tags to show the progress bar.

warning If you want to use this pattern, you have to change only content of getPercentage function in phpcb_server1.php script (lines 15-16) and put a real user-task rather than a simulation.

Source Code

default1.php

<?php
/**
* Basic AJAX example that used a PHP callback function
* to handle progress bar responses
*
* @author Laurent Laville <pear@laurent-laville.org>
* @package HTML_Progress2
* @subpackage Examples
* @access public
*/
if (isset($_GET['reload'])) {
session_start();
unset($_SESSION['progressPercentage']);
session_destroy();
die('Job is over !');
}
require_once 'HTML/Progress2.php';
$pb = new HTML_Progress2();
$pb->addLabel(HTML_PROGRESS2_LABEL_TEXT, 'txt1', 'Basic AJAX Progress2 example 1');
$pb->setIdent('PB1');
$pb->setCellCount(20);
$pb->setCellAttributes(array(
'active-color' => '#000084',
'inactive-color' => '#3A6EA5',
'width' => 25,
'spacing' => 0,
'background-image' => 'download.gif'
));
$pb->setBorderPainted(true);
$pb->setBorderAttributes('width=1 style=inset color=white');
$pb->setLabelAttributes('pct1', array(
'width' => 60,
'font-size' => 10,
'align' => 'center',
'valign' => 'left'
));
$pb->registerAJAX('phpcb_server1.php', array('getpercentage'));
?>
<!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>Basic Ajax Progress2 example 1</title>
<style type="text/css">
<!--
<?php echo $pb->getStyle(); ?>
body {background-color: #EEEEEE; }
-->
</style>
<script type="text/javascript" src="HTML_Progress2.js"></script>
<?php
echo $pb->setupAJAX();
?>
<script type="text/javascript">
//<![CDATA[
HTML_Progress2.serverCallback = 'getPercentage';
//]]>
</script>
</head>
<body>
<a href="javascript:HTML_Progress2.start('<?php echo $pb->getIdent(); ?>');">Start</a>
<?php $pb->display(); ?>
</body>
</html>

phpcb_server1.php

<?php
/**
* Simple server with PHP callback function, that will serve user task script responder
*
* @version $Id: phpcb_server1.php,v 1.1 2007/01/22 18:04:51 farell Exp $
* @author Laurent Laville <pear@laurent-laville.org>
* @package HTML_Progress2
* @subpackage Examples
* @access public
*/
session_start();
function getPercentage()
{
$newVal = $_SESSION['progressPercentage'] + mt_rand(1, 25);
$_SESSION['progressPercentage'] = min(100, $newVal);
// should return at least an array with one key ('percentage') and its value
$status = array('percentage' => $_SESSION['progressPercentage']);
return $status;
}
require_once 'HTML/AJAX/Server.php';
// register normal function
$callback = 'getPercentage';
$server = new HTML_AJAX_Server();
$server->registerPhpCallback($callback);
$server->handleRequest();
?>

Laurent-Laville.org