Develop AJAX applications like professionals, part 2nd

Using scriptaculous JavaScript libraries and script.aculo.us

This article is part 2nd of a three-part series that discusses the popular JavaScript libraries that can be used to create Ajax applications. In part 1th, you learned how to use the Prototype library to create a WEB application that manages songs. In this article, you will use the Scriptaculous library to build a WEB application to manage your photos.

This article uses the latest version of Scriptaculous 1.8.1 (see Resources for a link). Scriptaculous uses Prototype 1.6 library. You must be familiar with JavaScript, HTML, and CSS. This article demonstrates the application of scriptaculous in Ajax. On the back end, combine Ruby on Rails 2.0 and MySQL 5.0.4 (see Resources). With a little tweaking, you can switch to other back-end technologies.

Scriptaculous Introduction

The Scriptaculous JavaScript Library is one of the most popular libraries at the moment. It is used to add rich interactivity to an html-based Web site. It provides many visual effects and behaviors that help developers add interactivity to a WEB application. The scriptaculous is built on the base of the Prototype library.

Figure 1. The relationship between Scriptaculous and Prototype

If you read the 1th part, you should have seen the Ajax abstraction examples provided by Prototype. Instead of creating similar functionality on its own, Scriptaculous uses Prototype and adds effects and behavior to it. Scriptaculous provides a number of controls, such as drag-and-drop elements. It also provides excellent visual effects that can be used in conjunction with controls.

Drag and Drop controls

One of the most useful and visually appealing scriptaculous features is drag-and-drop. Drag-and-drop attributes are common in desktop applications, but are not common in Web applications. Adding this feature to a WEB application can provide a rich user experience. The task looked very difficult, but scriptaculous greatly simplified it. To demonstrate this feature, we'll build a sample application that understands the benefits of using scriptaculous by analyzing it.