At the Forge - Scriptaculous

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:

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.

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:

As Linux continues to play an ever increasing role in corporate data centers and institutions, ensuring the integrity and protection of these systems must be a priority. With 60% of the world's websites and an increasing share of organization's mission-critical workloads running on Linux, failing to stop malware and other advanced threats on Linux can increasingly impact an organization's reputation and bottom line.

Most companies incorporate backup procedures for critical data, which can be restored quickly if a loss occurs. However, fewer companies are prepared for catastrophic system failures, in which they lose all data, the entire operating system, applications, settings, patches and more, reducing their system(s) to “bare metal.” After all, before data can be restored to a system, there must be a system to restore it to.

In this one hour webinar, learn how to enhance your existing backup strategies for better disaster recovery preparedness using Storix System Backup Administrator (SBAdmin), a highly flexible bare-metal recovery solution for UNIX and Linux systems.