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

sample 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

  1. <?php
  2. /**
  3. * Custom AJAX example that used Scriptaculous effect at end of user-task process.
  4. * Alternative to scriptaculous1.php that seems to be break (HTML_AJAX bug ?)
  5. *
  6. * @version    $Id: scriptaculous2.php,v 1.1 2007/01/23 08:48:03 farell Exp $
  7. * @author     Laurent Laville <pear@laurent-laville.org>
  8. * @package    HTML_Progress2
  9. * @subpackage Examples
  10. * @access     public
  11. */
  12.  
  13. require_once 'HTML/Progress2.php';
  14.  
  15. $pb = new HTML_Progress2();
  16. $pb->addLabel(HTML_PROGRESS2_LABEL_TEXT, 'txt1', 'Scriptaculous AJAX Progress2 example 2');
  17. $pb->addLabel(HTML_PROGRESS2_LABEL_TEXT, 'txt2', 'caption ...');
  18. $pb->setLabelAttributes('txt2', array('valign' => 'bottom'));
  19. $pb->setIdent('PB1');
  20. $pb->setCellCount(20);
  21. $pb->setCellAttributes(array(
  22.     'active-color' => '#000084',
  23.     'inactive-color' => '#3A6EA5',
  24.     'width' => 25,
  25.     'spacing' => 0,
  26.     'background-image' => 'download.gif'
  27. ));
  28. $pb->setBorderPainted(true);
  29. $pb->setBorderAttributes('width=1 style=inset color=white');
  30. $pb->setLabelAttributes('pct1', array(
  31.     'width' => 60,
  32.     'font-size' => 10,
  33.     'align' => 'center',
  34.     'valign' => 'left'
  35. ));
  36. $pb->registerAJAX('phpcb_server2.php', array('getPercentage'), array('all', 'scriptaculous'));
  37. ?>
  38. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  39.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  40. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  41. <head>
  42. <title>Scriptaculous Ajax Progress2 example 2</title>
  43. <style type="text/css">
  44. <!--
  45. <?php echo $pb->getStyle(); ?>
  46.  
  47. body {background-color: #EEEEEE; }
  48.  -->
  49. </style>
  50. <script type="text/javascript" src="HTML_Progress2.js"></script>
  51. <?php
  52. echo $pb->setupAJAX();
  53. ?>
  54. <script type="text/javascript">
  55. //<![CDATA[
  56. HTML_Progress2.serverCallback = 'getPercentage';
  57. HTML_Progress2.onComplete = 'fadeIn';
  58.  
  59. function fadeIn()
  60. {
  61.     new Effect.Opacity(HTML_Progress2.widgetId, {duration:0.5, from:1.0, to:0.4});
  62. }
  63. //]]>
  64. </script>
  65. </head>
  66. <body>
  67.  
  68. <a href="javascript:HTML_Progress2.start('<?php echo $pb->getIdent(); ?>');">Start</a>
  69. <?php $pb->display(); ?>
  70.  
  71. </body>
  72. </html>

phpcb_server2.php

  1. <?php
  2. /**
  3. * Simple server with PHP callback function, that will serve user task script responder
  4. * and used scriptaculous effects libraries
  5. *
  6. * @version    $Id: phpcb_server2.php,v 1.1 2007/01/23 08:48:03 farell Exp $
  7. * @author     Laurent Laville <pear@laurent-laville.org>
  8. * @package    HTML_Progress2
  9. * @subpackage Examples
  10. * @access     public
  11. */
  12. session_start();
  13.  
  14. function getPercentage()
  15. {
  16.     $newVal = $_SESSION['progressPercentage'] + mt_rand(1, 25);
  17.     $_SESSION['progressPercentage'] = min(100, $newVal);
  18.  
  19.     // should return at least an array with one key ('percentage') and its value
  20.     $status = array('percentage' => $_SESSION['progressPercentage']);
  21.     return $status;
  22. }
  23.  
  24. require_once 'HTML/AJAX/Server.php';
  25.  
  26. // register normal function
  27. $callback = 'getPercentage';
  28.  
  29. $server = new HTML_AJAX_Server();
  30. $server->registerPhpCallback($callback);
  31. $server->registerJsLibrary('scriptaculous',
  32.     array('prototype.js', 'scriptaculous.js', 'effects.js'),
  33.     dirname(__FILE__) . DIRECTORY_SEPARATOR. 'scriptaculous-js-1.7.0' . DIRECTORY_SEPARATOR);
  34. $server->handleRequest();
  35. ?>