Enhance your Web application with scriptaculous

by Tony Patton | Jan 22, 2007 8:00:00 AM

Tags: Channel management, Web application, Tony Patton, Sortable, Web Development Zone Newsletter

Takeaway: In his previous Web Development Zone column, Tony Patton explained what scriptaculous is, described how to use it, and discussed why you should use it. Now he plays up some of the really cool features of this free JavaScript framework.

Last week I covered the basics of downloading and installing the freely available scriptaculous libraries for enhancing your Web user interfaces. This week I go a step further by utilizing some of the features of scriptaculous. This includes drag-and-drop functionality, sorting, and more. Let's get started with an example of adding drag-and-drop features to a basic Web page.

Drag-and-drop sorting

The three steps for using the scriptaculous library are:

Referencing the necessary script files in the header portion of the Web page.
Defining the appropriate items on the page.
Including the necessary script to utilize the functionality.

The first implementation of the scriptaculous library involves adding users to sort a list of items by simply dragging and dropping the individual items. For this example, an unsorted list is used for the elements.

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!

A note about adding JavaScript code to call scriptaculous functions: You should format the code via CDATA sections to avoid problems with special characters in the JavaScript conflicting with the HTML source.

Listing A utilizes the Sortable feature of scriptaculous that allows a user to sort a list of items by dragging and dropping with the mouse. The key aspect of the code listing is the Sortable.create line, which creates a new sortable element assigned to the specific item (with id value of group1). If you load the page, you can easily drag items up and down the list.

You can extend the example to utilize two lists that allow items to be dragged between the two lists. The key to using the two lists is creating a second Sortable object for the second list and telling the Sortable objects what objects to handle. The code in Listing B handles the task. Notice that the second example passes two lists to the containment value when the Sortable.create method is called. The id values assigned to both lists are used, so the lists may be sorted and list elements may be moved between the lists.

You may wish to save the results after the user has sorted items. The Sortable object provides the serialize function to serialize the object in a format suitable for HTTP GET or POST requests. It returns a string array of values resembling the results of an HTML form submitted via GET.

The tricky aspect of the serialize function is it returns a number corresponding to list elements, and it requires the naming convention for list items be a string value followed by an underscore (_) and a number (as the individual elements in the previous example are declared). Using this convention, the serialize method returns the number after the underscore for items in the list. With that said, the following results are returned when/if the serialize method is called on the first list in the previous example (upon initial loading of the page):

group1[]=1&group1[]=2&group1[]=3& group1[]=4&group1[]=5&group1[]=6&

group1[]=7&group1[]=8&group1[]=8&group1[]=10

Dragging items on the page

One of the cooler aspects of the scriptaculous library is how easy it is to make elements draggable across the page. That is, users can select an element on the page and drag it to another area of the page via their mouse. Listing C demonstrates how this is accomplished.

The key aspect of the previous example is the creation of Draggable objects at the end of the code. As with all aspects of scriptaculous, the code should be placed after all necessary page elements have been created (the end of the page works best).

So, making an element draggable across the page is as simple as creating a new instance of the Draggable object and passing the name of the object as the first parameter. The optional revert parameter allows you to specify whether the item returns to its original position when the user releases it (true) or moves to the new location (false). You can combine this with Droppable objects to define locations where items may be dropped. The Droppable object also allows you to access what has been moved or dropped.

Visual effects

Moving and sorting elements is great, but scriptaculous provides more fun by making it easy to utilize various visual effects on a page. There are numerous effects that you may apply to page elements, but the example in Listing D uses only a few.

The page contains three images and one text element. The first image fades from view via the Effects.Fade method. The second image flashes or pulsates on the screen via the Pulsate method of the Effects object. The third image shakes back-and-forth by using the Effects object's Shake method. Finally, the page's header text is highlighted in gray via the Effects.Highlight method. The script calls the Effects object and the various methods once the page and its elements are loaded via the onLoad event tied to the body element.

This is only a sampling of the many effects offered by the scriptaculous library. You can find more details about visual effects in the scriptaculous wiki.

Putting it to work

The scriptaculous library allows you to easily build exciting and full-featured Web user interfaces. It has reduced complex design elements to a few lines of script, so there is no excuse to avoid using such extras in your next (or existing) Web application. Download this powerful tool and learn more today.