Scriptaculous Effect usage
Overview
This example will run a clone of example 15.1, in asynchronous mode, with a final
fade in effect.
Use a simple (HTML_)AJAX server with only a PHP function as callback, and
Scriptaculous Effects JS libraries.
Screenshot
Demonstration
Give it a try
Dependencies
And also but optional :
Explains step by step
Lines 15-35 :
Level design with all API to define look and feel of your progress bar.
Line 36 :
function HTML_Progress2::registerAJAX, allow to identify components of (HTML_)AJAX
server and JS client libraries used. Here we don't use the default server name ('server.php')
but script 'phpcb_server2.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).
scriptaculous term used in parameter #3 of HTML_Progress2::registerAJAX is an alias
to reference all JavaScript libraries by Scriptaculous AJAX framework. We can use any other
word; choice is free !
See phpcb_server2.php lines 31-33.
Line 52:
Do all job to initialize references to AJAX server and JS client librairies used.
Will print these lines:
<script type='text/javascript' src='phpcb_server2.php?client=all,scriptaculous'></script>
<script type='text/javascript' src='phpcb_server2.php?stub=getPercentage'></script>
<script type="text/javascript">HTML_AJAX.defaultServerUrl = 'phpcb_server2.php'</script>
Line 57:
We change here the default behavior (reload page when task is over) by a call to JS function
fadeIn that will produce a scriptaculous opacity effect to the progress meter widget
(identified by HTML_Progress2::widgetId, see also line 19)
Source Code
scriptaculous2.php
<?php
/**
* Custom AJAX example that used Scriptaculous effect at end of user-task process.
* Alternative to scriptaculous1.php that seems to be break (HTML_AJAX bug ?)
*
* @version $Id: scriptaculous2.php,v 1.1 2007/01/23 08:48:03 farell Exp $
* @author Laurent Laville <pear@laurent-laville.org>
* @package HTML_Progress2
* @subpackage Examples
* @access public
*/
require_once 'HTML/Progress2.php';
$pb = new HTML_Progress2();
$pb->addLabel(HTML_PROGRESS2_LABEL_TEXT, 'txt1', 'Scriptaculous AJAX Progress2 example 2');
$pb->addLabel(HTML_PROGRESS2_LABEL_TEXT, 'txt2', 'caption ...');
$pb->setLabelAttributes('txt2', array('valign' => 'bottom'));
$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_server2.php', array('getPercentage'), array('all', 'scriptaculous'));
?>
<!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>Scriptaculous Ajax Progress2 example 2</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';
HTML_Progress2.onComplete = 'fadeIn';
function fadeIn()
{
new Effect.Opacity(HTML_Progress2.widgetId, {duration:0.5, from:1.0, to:0.4});
}
//]]>
</script>
</head>
<body>
<a href="javascript:HTML_Progress2.start('<?php echo $pb->getIdent(); ?>');">Start</a>
<?php $pb->display(); ?>
</body>
</html>
phpcb_server2.php
<?php
/**
* Simple server with PHP callback function, that will serve user task script responder
* and used scriptaculous effects libraries
*
* @version $Id: phpcb_server2.php,v 1.1 2007/01/23 08:48:03 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->registerJsLibrary('scriptaculous',
array('prototype.js', 'scriptaculous.js', 'effects.js'),
dirname(__FILE__) . DIRECTORY_SEPARATOR. 'scriptaculous-js-1.7.0' . DIRECTORY_SEPARATOR);
$server->handleRequest();
?>