Username/Email:  Password: 
TwitterFacebookFlickrRSS
Home ›

At the Forge - Scriptaculous

Issue 154

From Issue #154
February 2007

Feb 01, 2007  By Reuven M. Lerner
 in
Scriptaculous is a spectaculous set of libraries for Ajax.

Ajax is the hot new Web development paradigm that uses JavaScript to send and then handle asynchronous HTTP requests. The past few months, this column has looked into different ways to spawn and handle Ajax calls. The most complicated way was to do it ourselves, creating an XMLHttpRequest object, and then using it to send a request to the user's browser as well as to specify which JavaScript function will handle the response. Last month, we showed that we can simplify our lives greatly by using Prototype, a JavaScript library that includes many of the shortcuts and utility functions that are of use to JavaScript programmers.

The good news is that Prototype does indeed make JavaScript programming easier and more straightforward. But, one of the things people most want to do with JavaScript is create more flexible GUIs. This is especially true now that Web applications are becoming more desktop-like; users expect to have the same sense of feedback and control that they have with their nonbrowser applications.

Just as we saw with Ajax, there are ways to create and re-use these behaviors on your own. But why would you do that, when there are libraries that handle such tasks for you? Several of these are Scriptaculous, MoochiKit and Dojo. (Dojo is actually a complete top-to-bottom JavaScript library; I expect to look at it in a future installment of this column.) This month, we look at Scriptaculous, an open-source library written by Thomas Fuchs. Scriptaculous makes it easy to spruce up our HTML files without having to delve into the low-level JavaScript.

Basics of Scriptaculous

Installing Scriptaculous couldn't be easier. Download the latest version of Scriptaculous (script.aculo.us), and install the six included JavaScript files (in the src directory) somewhere in your Web server's document root.

Actually, installing Scriptaculous could be even easier than this. If you use a recent version of Ruby on Rails, Scriptaculous and Prototype are already installed. See the Rails documentation for a description of how to use these libraries directly, as well as from Ruby code.

Note that Scriptaculous 1.6.5, which I use in this article, requires Prototype 1.5 or above. Although Prototype 1.5 likely will be released by the time this column sees print, I currently am relying on Prototype 1.5 RC1. Thus, there might be some differences between the functionality I describe here and the final distribution.

In order to use Scriptaculous, you need to include two script tags in your HTML page to load Prototype and then Scriptaculous:

<script src="/javascripts/prototype.js"
type="text/javascript"></script>
<script src="/javascripts/scriptaculous.js"
type="text/javascript"></script>
Simple Effects

So, what might you want to do with Scriptaculous? One of its most common uses is in the creation of visual effects. Each effect is defined as a method within the Effect object. You can create an effect by saying:

new Effect.EffectName('id')

where EffectName is the name of the effect that you want, and id is the ID of the HTML element on which the effect will take place. For example, if we have the following headline:

<h2 id="headline">The headline</h2>

we can make it fade by invoking:

new Effect.Fade('headline');

Of course, it makes sense for such things to happen only when particular events occur. Listing 1 contains a simple HTML file, effects.html, with two buttons labeled appear headline and fade headline. Clicking on the first button invokes Effect.Appear on the node with an ID of headline. Note that we don't pass the node itself to Effect.Fade, but rather the ID. Effect.Fade uses Prototype's $() function to retrieve the node with that ID.

Listing 1. effects.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head><title>Special effects</title>

    <script src="/javascripts/prototype.js"
type="text/javascript"></script>
    <script src="/javascripts/scriptaculous.js"
type="text/javascript"></script>
  </head>

  <body>
    <h2 id="headline">Welcome</h2>
    <p>Welcome to the page of effects!</p>
    <p><input type="button" value="Fade headline" onclick="new
Effect.Fade('headline')" /></p>
    <p><input type="button" value="Appear headline" onclick="new
Effect.Appear('headline')" /></p>

  </body>
</html>

To make the headline fade, we set the following event handler:

onclick="new Effect.Fade('headline')"

Each of the effects has a number of settings, each of which is given a default value by Scriptaculous. To override one or more of these defaults, pass one or more of them in the invocation:

onclick="new Effect.Fade('headline', {delay: 2, duration: 10})"

In some cases, such as the appear/fade duo in Listing 1, it seems a bit silly to have two buttons. After all, what happens if I click on fade twice? It would be more reasonable to have a single button that turns the headline on when it's off and vice versa. Scriptaculous supports this with the toggle effect. For example, we can remove one button and give the second one an event handler that looks like this:

onclick="new Effect.toggle('headline', 'appear')"

Now, clicking on that button toggles the visibility of the headline, using appear and fade to turn the headline on and off. We can do the same thing with the blind (BlindUp and BlindDown) and slide (SlideUp and SlideDown) effects as well. We also can combine a toggle with the parameters shown earlier:

onclick="new Effect.toggle('headline', 'appear',
{delay: 2, duration: 10})"

Only a few effects come in pairs. Several are useful only for removing text, as in the following:

new Effect.Fold("headline")

Others are made to get the user's attention. For example, we can highlight our headline by doing this:

new Effect.Highlight("headline")
______________________

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Line length

Randy Kramer's picture
Submitted by Randy Kramer (not verified) on Wed, 03/28/2007 - 15:39.

The first line of this article is 108 characters long, is too wide for my 21" screen (admittedly at the font size that I've selected), and will not wrap to a narrower width.

=
[rhk@s14 askRhk]$ echo "Ajax is the hot new Web development paradigm that uses JavaScript to send and then handle asynchronous HTTP" | wc
1 18 108
=

Surely you can do better!

so many articles that say

Anonymous's picture
Submitted by Anonymous (not verified) on Sun, 08/26/2007 - 21:13.

so many articles that say the same thing. Link scriptaculous page and prevent duplicity of information.
u didnt give nothing new. just repeat.