September 2, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Make Your Site Script.aculo.us

  • January 3, 2007
  • By Vlad Kofman
  • Send Email »
  • More Articles »

In my previous article, I introduced a lot of different AJAX frameworks. In this article, I will look in more detail at the Script.aculo.us framework and discuss why you may want to use it in your web applications. Script.aculo.us is purely a client-side framework that gives developers a new way to code in JavaScript by providing new shortcut functions, new powerful objects including Form, Effect, Control and Ajax, and some custom widgets. Script.aculo.us is really not an independent product, but an add-on to the Prototype.js JavaScript library developed and maintained by Sam Stephenson. Prototype by itself is a very well thought out and implemented library of JavaScript methods that helps a great deal with creating rich, highly interactive, and dynamic web pages. Script.aculo.us builds on the existing Prototype implementation. It enhances Prototype by adding effects and controls, morphing, and custom UI widgets such as a Slider.

Among different AJAX and JavaScript frameworks, Script.aculo.us (and Prototype) has been on the forefront of the Web 2.0 movement. Even though it is not a "one-stop-shop" AJAX commercial framework such as Backbase or IceFaces, it still delivers a lot of functionality, time-saving features, and amazing effects with a MIT license. This means that you can use it free of charge for anything you like (which includes commercial applications), but cannot remove the copyright remarks. As of this writing, the Script.aculo.us stable version is 1.6.5, but a beta 1.7 with new morphing effects has just been released. If you are a web developer, dealing with a lot of JavaScript code, and wondering how to add effect to your site, or want to join the Web 2.0 and AJAX movement, you need to give the Script.aculo.us framework a good look.

The framework is standards-compliant, and behind the scenes takes care of the browser compatibility issues for major supported browsers, which are Internet Explorer, Firefox, and Apple's Safari. It is server technology agnostic and can easily integrate with these server technologies: Ruby On Rails, Perl, Nitro, PHP, Java, Plone, Pylons, DotNet, Symfony, Seaside, and OpenACS.

Installing Script.aculo.us Files

Because Script.aculo.us only consists of several JavaScript files, it has a very small footprint. The files need to be placed somewhere on the web server in the visible directory and then referenced in your code. I have installed the 1.7 version, under js/ext/s17 directory; therefore, my reference looks like this:

<script language="JavaScript"
        type="text/javascript"
        src="js/ext/s17/prototype.js"></script>
<script language="JavaScript"
        type="text/javascript"
        src="js/ext/s17/scriptaculous.js"></script>

By default, Script.aculo.us loads all of the other JavaScript files necessary for effects, drag-and-drop, sliders, and all of the other Script.aculo.us features. If you don't need all of the features, you can limit the additional scripts that get loaded by specifying them in a comma-separated list. Ex:

<script src="scriptaculous.js?load=effects,dragdrop"
        type=...></script>

The scripts that can be specified (to be loaded) are: builder, effects, dragdrop, controls and slider.

This is really all you need to start harnessing the power hidden in this library. So, start coding!

Script.aculo.us Functions

The Prototype library included with the framework is a collection of JavaScript functions and objects that greatly simplify working with the DOM manipulation and JavaScript in general. New functions for working with AJAX, DHTML effects, a module for drag-and-drop functionality, a module for various custom controls, and a custom widget such as a Slider have been added in Script.aculo.us on top of the Prototype library. In other words, the functions that simplify working with the Document Object Model (DOM) are part of the Prototype library and all of the custom widgets and controls are part of the Script.aculo.us framework.

The big problem with modern web development is existence of the choice of many web browsers. For the casual web user, it is great because competition among browser vendors ultimately creates better a product. However, for web developers it is a nightmare. Different vendors implement JavaScript in many ways. On top of that, CSS styles are interpreted in different ways and even HTML tags may exist in one browser but be a novelty in another. The problem can also affect the various release versions from the same vendor. Microsoft, for example, is known to introduce new non-standard methods with each browser release.

Therefore, very often developers run into compatibility issues with their code with various browser versions and platforms. Instead of concentrating on writing solid logic, they start concentrating on detecting browser versions and writing different versions of code to tailor a specific platform. Additionally, developers who want to control events or add effects to their pages often end up creating their own (multi-browser) implementation. Many limitations in JavaScript itself force developers to create lofts of code to do simple things; for instance, traversing all elements with the same CSS style (class name).

The Script.aculo.us framework (or rather Prototype) introduces a lot of many shorthand notations and shortcuts into the JavaScript way of writing code and under the hood takes care of the cross-browser compatibility. In general, JavaScript in Web 2.0 sites is used to accessing and manipulating Document Object Model of elements loaded on the page. For instance, if I have a <div> element, I may want to populate it with the response of an asynchronous AJAX call to the server. For that, I need to access the object and set its innerHTML to the response text. To locate the div element, I need to start with the root of the DOM, or document object, and then get the element I am interested by its DOM id. For example:

// somewhere on the page
<div id='vlad'><div>

// In my JS callback function
myElement = document.getElementById("vlad");
myElement.innerHTML = xmlHttp.responseText;

One of the many useful shorthand notations that Script.aculo.us has is the dollar $() function. This is a Prototype shortcut to reference to DOM elements by their id. The same code now looks like this:

myElement = $("vlad");
myElement.innerHTML = xmlHttp.responseText;

You may be saying now, okay less typing, not a big deal. But, this little shortcut is also very powerful—it can take multiple ids and return an array or elements.

nodes = $("vlad", "mariya");
for(i = 0; i < nodes.length; i++) {
   alert(nodes[i].innerHTML);
}

Other Shorthand Dollar Functions

Other shorthand dollar functions with existing and new functionalities are:

$F(), $A(), $H(), and $R()

$F() returns a reference to a field input control from the form—very easy and very useful. For example:

<form>
   <input type="text" id="name" value="Vlad">
   ..
</form>

<script>
   alert( $F('name') );
</script>

$A() converts any argument passed into it as an array—yet another greatly useful shortcut.

<script>
function someFunc(){
var someNodeList = $('someElement').getElementsByTagName('option');
var nodes = $A(someNodeList);
   for(i = 0; i < nodes.length; i++) {
   alert(node.innerHTML);
   }
}
</script>

$H() converts objects into enumerable Hash objects that resemble associative arrays.

The $R() function is a shorthand to writing new ObjectRange(lowerBound, upperBound, excludeBounds), but more on the objects later.

Here is a great chart by Jonathan Snook, showing functions and object available in the Prototype library.



Click here for a larger image.





Page 1 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel