id="info"

Developer

Build powerful Web interfaces with a free JavaScript framework

Scriptaculous allows you to easily add powerful AJAX-based user interface features to Web 2.0 applications. Web developer Tony Patton explains why you should use it and describes how to use it.

The days of building Web applications from the ground up are over as the Web is overflowing with free tools, code, and so forth. These resources have been developed and tested, so you can quickly add application features. A good example is the script.aculo.us (or scriptaculous) site, which offers JavaScript libraries for building powerful applications—the best part is they are freely available. This week, I'll take a closer look at the site and its offerings.

What is it?

Scriptaculous is a framework for building dynamic Web 2.0 interfaces. It utilizes another freely available framework called prototype. Scriptaculous simplifies the ins and outs of implementing an AJAX-based Web interface. It allows you to easily add animation and custom data controls, as well as utilities for working with the DOM and JavaScript testing.

Why use it?

AJAX is a great marriage of technologies, but it can be confusing and time-consuming to build AJAX-powered applications from scratch. The scriptaculous framework makes it easy to include AJAX-based features in your applications, plus all of the development and testing has been done, so you can devote your time to more important tasks.

Getting started

The first step in utilizing the scriptaculous framework is downloading and installation. The download is basically a zip file with JavaScript files along with various HTML files for testing and demonstration. The JavaScript source files are the most important. The following list contains an overview:

Weekly development tips in your inbox
Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday.
Automatically sign up today!
  • lib\prototype.js: The source for the prototype JavaScript framework.
  • scr\bulder.js: Allows you to easily create DOM elements dynamically.
  • src\controls.js; Includes the core components for working with the custom data controls.
  • src\dragdrop.js: Provides the code for utilizing the custom data controls for drag-and-drop related functions.
  • src\effects.js: The Visual Effects library includes all you need to add advanced JavaScript animation to your Web application.
  • src\scriptaculous.js: The base code library for utilizing the scriptaculous framework.
  • src\slider.js: Provides the code for utilizing the slider data control.

The previous list includes the default directory where each file is installed. You can place these JavaScript files anywhere on the Web server, but using the default directories makes it easier to work with the examples.

You may be wondering about the overhead of including these files in a Web page. The complete library (all files in the list) consumes approximately 150KB. The two core files—prototype.js and scriptaculous.js—add up to 50KB. So, all other combinations will be between 50 and 150KB depending on the files used.

By default, scriptaculous.js loads all of the other JavaScript files necessary for effects, drag-and-drop, sliders, and all of the other scriptaculous features. You can limit the additional scripts that get loaded by specifying them in a comma-separated list (via the load command) when loading the scriptaculous JavaScript file.

Using it

Once you have downloaded and installed the framework, it is easy to use it within a Web page. The first step is linking to the JavaScript source files within the head portion of the Web page. See Listing A.

The various functions available are accessed via HTML script tags. You can gain a better understanding by examining one of the test files installed with the framework (or an online example). As an example, I loaded the slider_test.html file located in the test\functional directory of a default installation. The complete contents of the file are too much to list here, but I can examine one portion that loads the first slider control on the page—a standard horizontal slider:

<script type="text/javascript">
// <![CDATA[
new Control.Slider('handle1','track1',{
sliderValue:0.5,
onSlide:function(v){$('debug1').innerHTML='slide: '+v},
onChange:function(v){$('debug1').innerHTML='changed! '+v}});
// ]]>
</script>

Using the CDATA section sidesteps issues encountered when using characters like < and > in your JavaScript. The code creates a new Slider control (via the Control class) and sets its initial position to the middle of the control (0.5) and adds handlers for the slide and change events. Also, framework functionality is easily used via onClick events.

Documentation

A drawback of many freely available (and some commercial) tools is a lack of documentation and examples. The scriptaculous framework includes extensive example code and basic documentation via its Wiki. In addition, a quick Google search yields more help. A good example is the various cheat sheets available that provide a quick reference sheet for using the framework.

The framework includes an extensive set of examples that are included in the functional subdirectory of the test directory. You can dive into the test files to get a good idea of how to use framework functions within your application. In addition, the demos section of the scriptaculous Web site provides great examples.

License issues

Another issue with using free or third-party tools is utilizing them in commercial products. There are usually licensing issues, but this is not an issue with this tool. Basically, you can use the scriptaculous framework, free of charge, for anything you like as long as the copyright remarks are not removed from the JavaScript source code files. Also, you can extend and override the code by following these instructions.

Who uses it?

There are plenty of freely available tools and libraries on the Web, but you can get an idea of a tool's acceptance by examining who uses it and how they use it. The scriptaculous framework is currently being used by various Web sites in one form or another. The sites include Apple, The Globe and Mail newspaper, NBC News, and Basecamp. A more comprehensive list is available on the site.

Starting point

Project timelines continue to shrink as user expectations rise, but free tools and frameworks make it easy to add features to an application. Scriptaculous is a good example of a framework that allows you to easily add powerful AJAX-based user interface features to Web 2.0 applications. I'll offer more examples of framework usage in next week's article.

Miss a column?

Check out the Web Development Zone archive, and catch up on the most recent editions of Tony Patton's column.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

Editor's Picks