Benjamin Bercovitz, Seng Keat Teh
Our analysis provides an assessment of the facilities provided by the Scriptaculous libraries in view of developing interactive web applications. The first section will focus on the facilities provided by the libraries. The second section will cover its use and integration into web applications. The last section is a discussion of the strengths and weaknesses of Scriptaculous.
Scriptaculous Facilities Edit
reducing the opacity by 5. Then, he will set a timer to call the function every thirty miliseconds or so until opacity reaches 0. To further complicate his program, it will have to deal with different browsers having different attribute names and conventions. For instance, mozilla uses
to express the same state; CSS3 supported by some new browsers specifies
Finally, the element should probably be taken out of the flow after fading by setting
If the DOM element is a Prototype extended object, the interaction is even simpler:
will do the job. The modularity of these effects is demonstrated by the fact that a number of Scriptaculous effects are themselves actually compositions of less complex Scriptaculous effects called "core effects". For example,
Effect.Fade itself is built on top of the basic core effect
Effect.Opacity. Scriptaculous currently provides 7 core effects (
Effect.Tween) which serve as "building blocks" that can be combined and/or extended to create even more complex effects known as combination effects.
Effect.Fade is one such example and Scriptaculous currently provides 15 other combination effects including
In addition to animation effects that enhance uneditable page components, Scriptaculous also provides a quick way to utilize interesting input field controls via controls.js. Specifically, Scriptaculous provides three increasingly popular but complicated-to-implement controls: an
Autocompleter widget, an
InPlaceEditor widget and a Slider widget. The InPlaceEditor widget simply replaces a page element with an input box containing the same text content. This is useful to let users switch between preview and edit modes in web applications. Next, the Autocompleter widget provides an easy way to incorporate auto-completion functionality into an input box element for purposes such as a suggest box. This has proven to be a useful interaction in many web applications that do lookups or search such as Google Suggest. Scriptaculous provides two versions of the Autocompleter widget:
Autocompleter.Local keeps the list of suggestions in memory while
Ajax.Autocompleter queries the server through an AJAX call to dynamically obtain suggestions.
Finally, Scriptaculous also supports a drag and drop style interaction through the dragdrop.js library. To make a page element draggable, the developer need only only line of code:
new Draggable('elem_id', [options]);
Elements can optionally "snap back" to the position they were dragged from, or even work with window scrolling, which is a tricky event case. Other elements can be defined as "Dropable" containers that can hold Draggable elements. These optionally support limiting which Draggables can be dropped. Both also support adding callbacks that fire when high-level events happen, such as "user dragged a box from region 1 to region 2," allowing the backend model to reflect those changes if necessary.
Integrating Scriptaculous into Web Applications Edit
Figure 1. Scriptaculous in an MVC framework
Figure 2. Scriptaculous in a lightweight development environment
What is Unique about Scriptaculous Edit
The Scriptaculous effects library is also tightly integrated in comparison to other web frameworks and libraries. The out-of-the-box "core effects" from its effects library are used as basic building blocks to create the more complex "combination effects" and are reused to support the UI visual effects seen in its "drag-and-drop" interaction and advanced UI controls. This extensibility gives framework users the ability to customize and extend existing widgets to suit their needs.
Besides providing “core effects” as reusable building blocks that is used to build more complicated “combination effects”, Scriptaculous also provides two other mechanisms unique to the framework in developing complex animations: “Effect Callbacks” and “Effect Queues”. “Effect Callbacks” are callback functions that can respond to certain milestones or events during the animation of an effect. “Effect Queues” is a timeline-style construct in which a series of effects can be ordered to create one smooth running animation, very similar to how movie scenes are ordered to create one continuously running movie clip.
In comparison to other frameworks like the YUI Library, Scriptaculous-provided UI widgets are conceptually simpler and easier to use. YUI’s implementation of the Autocompleter widget, for example, requires the framework user to be also knowledgeable of the DataSource object, another layer of indirection that abstracts the data retrieval from a variety of sources but possibly adds more coding complexity for the user. Scriptaculous on the other hand just simplifies the Autocompleter implementation to two choices for the framework user:
Autocompleter.Local for local data and
Ajax.Autocompleter for server data obtained using AJAX. There is no need for a Scriptaculous user to be knowledgeable of additional external classes in order to directly use a particular UI widget.
Finally, unlike Google Web Toolkit which favors a Java-based approach or ASP.NET AJAX which uses an ASP.NET-based backend, Scriptaculous works well across different back-end implementations, regardless of the server-side’s chosen programming language or framework. Scriptaculous can also be easily embedded within another larger web framework such as Ruby-on-Rails.
Strengths and Weaknesses of Scriptaculous Edit
Scriptaculous maintains the same design philosophy as Ruby-on-Rails, being very focused on the problem (UI visual effects) the framework is trying to solve, being very simple and easy to use, being well-scoped and concise in focus, scope and code, and not being a very large or complicated framework that could overwhelm a framework user. This should not be surprising since its creator, Thomas Fuchs, was one of the major developers of the Ruby-on-Rails framework, hence the similar framework design philosophy between Scriptaculous and Ruby-on-Rails.
new ScriptaculousObjectName(elementId, required-params, [options]);
This programming form is consistent across all UI objects provided by Scriptaculous.
elementId refers to the HTML DOM element the Scriptaculous object will act on.
required-params depend on the particular Scriptaculous object being created. For example, most Scriptaculous objects from the “Effects” module do not have
required-params. Finally, all Scriptaculous objects accept an
options parameter that is a hash of additional customization parameters, such as setting up callback functions to respond to a certain event, or changing the size, color and display text of an instantiated Scriptaculous object.
Because Scriptaculous is built upon the Prototype framework, its syntax and coding conventions provide better support for the traditional object-oriented programming model. Scriptaculous also has excellent integration with the Ruby on Rails framework, where Scriptaculous is also included. However, Scriptaculous remains a server technology agnostic framework; as a solely client-side framework, it is able to work across any chosen back-end implementation on the server side.
As mentioned earlier, Scriptaculous compact framework and concise code helps make the framework less complex and easier to use for a beginner. However, this perceived strength could be a weakness for the framework; due to its concise design, Scriptaculous provides only a limited number of out-of-the-box UI visual effect objects. Scriptaculous accounts for this weakness with another unique strength of its framework; Scriptaculous is designed to be an easily extensible framework. Each of its out-of-the-box widget can be easily customized, and if needed, extended to suit a user’s needs. It has the nice abstraction of “core effects” as building blocks that can be used together with Scriptaculous mechanisms such as “Effect Callbacks” and “Effect Queues” to assemble very sophisticated and powerful UI visual effects. Not happy with the UI visual effect of a Scriptaculous “Draggable” object as it is moved around on screen? Then change the
starteffect property of the “Draggable” object from the default
Effect.Opacity to any of the out-of-box visual effect such as
Effect.Pulsate or even a custom created “effect” object.
Among the strengths mentioned of Scriptaculous are its compact code and very specific focus. As a result of its concise design, the framework only provides a small set of out-of-the-box UI visual effect objects, a noted weakness for a user looking for a far more comprehensive framework that can provide more powerful and complex UI visual effects. Scriptaculous, as we noted, attempts to compensate for this weakness by making its provided widgets very extensible; “core effects” for example are used as the foundation to build more complex “combination effects”. But it is certainly of note that should there not be an available out-of-box “combination effect” provided by Scriptaculous, a user has to put in some amount of effort to develop the custom UI visual effect solution he/she needs.
This leads to the second weakness with Scriptaculous, the lack of documentation, written materials and discussion avenues about developing these custom UI solutions by extending parts of the framework. This may be alleviated as time goes by when more might be written on this topic, but as of now, there are few tutorials, if any, on how to create your own custom “combination effects” using the current set of “core effects” and pre-existing “combination effects”. There is also weak and few documentation on how the currently provided out-of-box "combination effects" were built upon the current “core effects”. Such documentation would have been helpful for users to extrapolate from in developing their own custom Scriptaculous visual effects.
Another weakness with Scriptaculous is that its UI widgets, such as the Autocompleter and InPlaceEditor, do not provide any support for themes and skinning unlike that of widgets from other frameworks such as the Yahoo User Interface Library.