Script.aculo.us 1.6.2 Released!

Mir.aculo.us has announced the release of Script.aculo.us v1.6.2! This is primarily a bug fix, which is always a good thing. Here’s the change log:

* Fix a problem in the drag and drop logic if an reverting/drag ending draggable was initialized for a new drag (for example by clicking repeatedly) for all cases where the default start/revert/end-effects are used, fixes #4706 [thx tecM0]
* Fix possible memory leaks with Draggables, fixes #3436 [thx aal]
* Throw nicer errors when requires script.aculo.us libraries are not loaded, fixes #5339
* Make slider handles work when not displayed initially by using CSS width/height, fixes #4011 [thx foysavas]
* Update sortable functional test with onUpdate counter
* Make more Element extensions unit tests work on Safari
* Add the assertMatch unit test assertion for asserts with RegExps [thx Ian Tyndall]
* Fix a problem with Effect.Move causing “jumping” elements because of very low float numbers in some situations
* Fix a missing semicolon in dragdrop.js, fixes #5569 [thx mackalicious]
* Fix a slight inaccuracy with Effect.Scale that could lead the scaling to be one pixel off
* Be more prototypish with Effect.Transitions.linear
* Make Effect.Scale recognize font sizes that use the pt unit, fixes #4136 [thx aljoscha]
* Fix IE hack in Effect.Opacity, fixes #5444 [thx nicholas]
* Fix IFRAME layout fix for IE and Autocompleter, fixes #5192 [thx tommy skaue]
* Fix only option in onEmptyHover, fiex #5348 [thx glenn nilsson]
* Fix Effect.BlindDown and SwitchOff handling of supplied callbacks, fixes #5089 [thx martinstrom]
* Fix a problem with field focus on Ajax.InPlaceEditor and loading external text, fixes #4988, #5244 [thx rob]
* Do not attempt to scroll if scrollspeed is 0/0, fixes #5035 [thx tomg]
* Fix a problem with Sortable Tree serialization, fixes #4939, #4688, #4767 [thx Sammi Williams]
* Fix an endless loop with sliders, fixes #3226, #4051, #4765 [thx jeff]
* Make autocompleter work with update DIVs that have scrollbars, fixes #4782 [thx Tommy Skaue]
* Corrected options parsing on switchoff effect, fixes #4710 [thx haldini]

Get the latest release over at Script.aculo.us!

Script.aculo.us v1.6 Released

Great news over at Mir.aculo.us. It appears as if version 1.6 of my favorite DOM manipulation library, Script.aculo.us has been released! Thankfully the new version of Script.aculo.us uses Prototype v1.5.

This is sexy because now I can revert to downloading both Prototype and Script.aculo.us right from the Script.aculo.us site. (Hooray for being lazy)

Here’s an excerpt from the original post:

script.aculo.us 1.6 marks the switch over to Prototype 1.5 (1.4 will no longer be supported), which has really great new features and has undergone some refactoring to take advantage of the Prototype 1.5 niceties.

Other new stuff includes window-scrolling while dragging, performance optimizations and various bug fixes.

They are urging people to test out 1.6. Get on it!

MasterWish – Practicing What I Preach

masterwish MasterWish, my labor of love (created with my friends Zach Tirrell and Jon Emmons) is my playground for Ajax and Web 2.0 experiments.

If you haven’t been acquainted with the site, its a wishlist site with a schlew of features. The high point is the ability to secure down lists and grant access to specific buddy groups. I’m pleased to say that we have gained a decent member base in the past 8 months and I am also happy to say that things are going to change around shortly!

MasterWish was built using SAJAX as the tool of choice for Ajax communication but as I’ve mentioned in the past, I am a Prototype convert. My knowledge of Ajax, JSON, and general application structure has been morphing so much in recent weeks that I have held off in completely revamping the wish list site.

Things are changing. I have begun the work to implement the following:

  • Creation of more “hackable” Web Service APIs using SOAP and REST
  • Representation of data using both XML and JSON
  • Ajax powered by Prototype
  • Sweet DOM manipulation powered by Script.aculo.us
  • Separation of Layout and Logic with event:Selectors
  • and of course, we’re already doing: Server-Side Templating for greater separation of Layout and Logic.

Sign up. Stay tuned. Get gifts.

Writing Your Server-Side Ajax Handler

[[innerindex]]In my recent post on ‘Ajax; Templating; and the Separation of Layout and Logic,’ I refer to an Ajax Handler that sits server side to handle Ajax calls. Some elaboration is in order.

As I have stated in the past, I’m a huge fan of Prototype AND I choose PHP as my language of choice…so my examples will be using both, but the idea is portable.

Set up your Functions

Before you create a handler, you need a set of functions that the handler can reference. Here’s an example:

< ?php
function world($params='')
{
  return 'Goodbye Cruel World.';
}//end world

function sweetWorldAction($params='')
{
  //we expect params to be an array or a string similar to a parameter string from a GET..i.e. "bork=asdf&cheese=yes please"
  //parse out the variables
  if(!is_array($params))
  {
    parse_str($params,$params);
  }//end if

  //do your logic here
}//end sweetWorldAction
?>

Now that we have the functions all set, we’ll set up a handler that receives Ajax calls and calls the appropriate functions.

The Eval Method – A Dynamic Handler

This method is one that I toyed around with for a while and I’ll admit that its pretty simple and clean but there are some drawbacks. We’re going to make a few assumptions: All requests will be GET (this is to keep things simple for this example) and we will keep the complexity of .htaccess sweetness out of these examples and assume that each call will be passing a function variable that specifies the function we are calling. I’ll get to those in a second…but first I’ll show you the handler code in this Eval Method:

< ?php
//if the user leaves the page or closes the browser prematurely, this will help prevent half completed statements
ignore_user_abort();

include('functions.php');

//list out your Ajax accessible functions
$valid_functions = array('world','sweetWorldAction');

if($_GET['function'] && in_array($_GET['function'],$valid_functions))
{
  //get the get parameters
  $params = $_GET;  
  //unset the function index from the params because we just don't need it there
  unset($params['function']);

  //build your parameter string:
  $param_string='';
  foreach($params as $key=>$param)
  {
    $param_string.=(($param_string)?'&':'').$key.'='.$param;
  }//end foreach

  //make your function call
  eval($_GET['function']."('$param_string');");
}//end if

?>

The Variable Variable Method – A Dynamic Handler

This method (compliments of PHPDeveloper) is simpler than the Eval Method and just as dynamic.

< ?php
//if the user leaves the page or closes the browser prematurely, this will help prevent half completed statements
ignore_user_abort();

include('functions.php');

//list out your Ajax accessible functions
$valid_functions = array('world','sweetWorldAction');

if($_GET['function'] && in_array($_GET['function'],$valid_functions))
{
  //get the get parameters
  $params = $_GET;  
  //unset the function index from the params because we just don't need it there
  unset($params['function']);
  //make your function call
  $_GET['function']($params);
}//end if

?>

The Switch Method – A Basic Handler

This method handles each call individually. The reason for using switch rather than if-elses is simply because your application will most likely possess a large number of Ajax-ified functions and those if-elses would be ghastly to read and decrease performance…the Switch statement is much cleaner.

< ?php
//if the user leaves the page or closes the browser prematurely, this will help prevent half completed statements
ignore_user_abort();

include('functions.php');

if($_GET['function'])
{
  switch $_GET['function']
  {
    case 'world':
      echo world();
      exit;
    break;
    case 'sweetWorldAction':
      echo sweetWorldAction();
      exit;
    break;
  }//end switch
}//end if

?>

Make a Choice

Which are you going to use? While the Eval and Variable Variable Methods contain very small amounts of code in the handlers, the logic has simply been shifted to the functions themselves. Increased Ajax-geared logic within the functions themselves reduces portability. However, in the Switch Method, logic is organized in a fairly easy to follow manner while making use of very generic functions that can be used in multiple fashions. Obviously, the Switch Method is my preferred choice :)

In Closing

Handler scripts make the Ajax magic happen and the separation of handler logic from your application logic is just as important for robust development and debugging as the need for separation of layout and logic. Play around with the above methods and see which works for you. If you have a method all your own, I’d be interested to hear it!

Prototype Cheat Sheets

prototype.gifThe guys over at Ajaxian alerted me to this sweet resource. Jonathan Snook has created a graphical (and quite attractive) Prototype cheat sheet.

As I have stated in the past, I develop web applications for Plymouth State using the Scriptaculous which is built on top of Prototype Javascript Framework. I often find myself referring back to the Scriptaculous Wiki to simply help me remember a function name of a Prototype object. Well, the cheat sheet that Jonathan has created will now live on my wall for those quick references! If you are an avid user of Prototype, check these suckers out.

Thomas Fuchs of Script.aculo.us: Ajaxian Podcast

Ajaxian has posted a podcast of their interview with Thomas Fuchs, the creator of Script.aculo.us. Ajaxian summarizes the content that is discussed:

  • How script.acuo.us was born out of a real project
  • Why Rails was chosen for Fluxiom
  • Where Rails shines with Ajax
  • The new RJS templates feature that makes Ajax even easier
  • The difference between Prototype and Script.aculo.us
  • How Script.aculo.us is available in Rails 1.0
  • Future plans for Script.aculo.us
  • When you should use the cool effects, and when you should not
  • About drag and drop and web usability
  • Challenges that Thomas has faced with his Ajax projects
  • Why you would choose an Ajax application versus using other technologies such as Flash
  • How hard it is to build a very rich Ajax application
  • How to handle browser differences
  • Experiences with DOM manipulation and innerHTML
  • How naming collisions are not as much of an issue in recent builds of Prototype

Here’s two tidbits of information that I’ll share with you that really stood out for me:

  • Fuchs summed up the reason for using Ajax over Flash nicely. Flash isn’t for developers…(and I hold that Flash isn’t very maintainable)
  • XML wrappers for objects passed from the server via Ajax is MUCH slower than simply passing JSON. It seems Zimbra has actially completely re-architected their product to utilize JSON over XML wrappers solely based on parsing performance! Regarding the use of XML wrappers, Fuchs says: “…its dog slow. Don’t do it.”

Its good to see someone whose work I respect have the same opinions as myself. Makes me feel like I’m doing something right.

Here’s the podcast.

Script.aculo.us Is My New Best Friend

Ajax is great. DOM manipulation is sexy. I’m fairly new to the Ajax world having only developed with with it since July. MasterWish was my guinea pig and continues to be my playground for all things Web 2.0. Luckily, my manager Ken is pumped up about this whole Web 2.0/Ajax thing which has allowed me to experiment with my projects at work as well and PSU should expect to see some sweet apps roll out over the next year!

Since July, I’ve been developing my Ajax applications and examples using SAJAX (Simple Ajax), a PHP/Javascript framework for Ajax development. It was great at first glance…a lot easier than building Asynchronous Javascript transactions from scratch. But despite its ease, it was a bit clunky. Last week I was stumbling around the web looking for anything new to suck up and found a beauty of a tool. Script.aculo.us.

Script.aculo.us is a Javascript Effects and Control framework developed by Thomas Fuchs, a software architect living in Vienna, Austria who, like me, was disappointed by current web application frameworks that made no sense to him. His framework is 3 things: Easy to Use, Simple, and Easy to Use. His libraries – built off of the Ajax framework, Prototype – blow SAJAX out of the water! Let me give you an example to, say, update a news title on an article (I won’t include the HTML markup as that is trivial):

Here’s what needs to be done to build a SAJAX call:

Step 1: Create a SAJAX Call Function

function x_updateTitle()
{
	sajax_do_call('/process_ajax.php',"x_updateTitle", x_updateTitle.arguments);
}

Step 2: Create a server side function to handle the update

< ?php
function x_updateTitle($news_id,$news_title)
{
	//do some database calls to update the title;
}
?>

Step 3: Edit the server side SAJAX file (process_ajax.php) and add x_updateTitle to the list of valid call functions

< ?php
include('sajax.php');
addFunctions('x_updateTitle');
handleClientRequest();
?>

Step 4: Call the SAJAX Javascript function from somewhere (in an onClick, onSubmit or something)

<a onClick="x_updateTitle(1, document.getElementById('news_title').value, 'callbackFunction');">asdfdf</a>

Here’s the equivalent in Script.aculo.us
Step 1: Create a server side function to handle the update

< ?php
function x_updateTitle($news_id,$news_title)
{
	//do some database calls to update the title;
}
?>

Step 2: Call the Script.aculo.us Javascript function from somewhere (in an onClick, onSubmit or something)

<a onClick="new Ajax.Request('/process_ajax.php', { asynchronous:true, parameters:'news_id=1&news_title=$(\'news_title\')', onSuccess:callbackFunction });">asdf</a>

Thats it! Its a big difference. Thats just the tip of the iceberg. Script.aculo.us has many features for implementing Drag and Drop with one line of Javascript code; fancy display/hide functions; dynamic DOM Element creation/deletion; field autocompletion; and various other visual effects. It slick. And to top it off, the Script.aculo.us website is pretty sweet! Luckily the documentation is excellent and is in wiki format. As Plymouth State moves into the Web 2.0 world, I’ll be pushing for Script.aculo.us/Prototype to be our Ajax standard. I have seen the light and it is good.