October 1, 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 »

It's a Bird. It's a Plane. No, it's Script.aculo.us

Script.aculo.us (and the underlining Prototype library) not only introduces useful shortcuts but it also gives developers brand new JavaScript objects and new extensions on the existing objects. This creates an entirely new coding style, in many cases simpler and more robust.

For instance, to iterate over an array in JavaScript a "for" loop is usually used, such as this:

for(i=0;i< someArray.length;i++){
   alert(someArray [i]);
}

However, the Script.aculo.us iteration is more powerful and requires less coding:

someArray.each( function(current){ alert(current); });

Some new objects introduced with Prototype are Hash, Form, Try, Enumerable, and of course Ajax. The effects and controls introduced with Script.aculo.us are part of the objects, called Effect and Control, respectively. The core or combination effects can be added simply by calling Effect.effectName and passing the element's DOM id. If you have loaded the effects module, you can start adding various effects such as glowing, puffing, scaling, blinds, shrinking, and morphing to any element on the page.

For example, here are some effects on the onClick event:

<div onclick="new Effect.SwitchOff(this)">
   Click here to switch off.
</div>

<div onclick="new Effect.BlindUp(this, {duration: 5})">
   Click here to see blind up effect.
</div>

The new morphing feature can be called on the element without using the Effect object. For example, passing a CSS style name or definition will create a morphing effect in JavaScript.

style='font-family:Verdana;color:#333399'><style>
   .warning {
      font-size: 15px;
      color: #f00;
      border: 4px soild #f00;
   }
</style>

<script>
   $('mydiv').morph({fontSize:'20px',color:'#abcdef'});
   $('myWdiv').morph('warning');
</script>

<div id="myDiv">
   Hello world
</div>

<div id="myWDiv">
   Warning!
</div>

The five core effects—Effect.Opacity, Effect.Scale, Effect.MoveBy, Effect.Highlight, and Effect.Parallel—are the foundation of the Script.aculo.us Visual Effects JavaScript library. All other combination effects are based on core effects. Developers also can write their own effects.

For more information on the available effects, please see the reference section and a great cheat sheet by Amy Hoy.

Script.aculo.us AJAX

The power of the Script.aculo.us framework lays with the amalgamation of the all of the effects, coding shortcuts, new powerful objects, extension of existing objects, and most importantly AJAX. The Script.aculo.us framework wound not be a true Web 2.0 framework without AJAX support. The Ajax JavaScript Object is actually part of the Prototype library, but many controls and widgets in the Script.aculo.us framework are AJAX-enabled. For instance, the Auto-completion module is AJAX enabled.

The Ajax Object hides the multi platform instantiation logic for the XMLHttpRequest object and also provides a lot of powerful wrapper methods (and other extended objects) to simplify working with the asynchronous server communication.

For instance, here are some of the AJAX objects:

  • Ajax.getTransport(): Returns a new XMLHttpRequest
  • Ajax.Request: Encapsulates AJAX operations
  • Ajax.Updater: Returns HTML to inject directly in a specific element of the page or to return script blocks to be evaluated
  • Ajax.PeriodicalUpdater: Repeatedly instantiates an Ajax.Updater object to refresh an element on the page multiple times

Please see the Script.aculo.us online documentation for more Objects and APIs relating to AJAX.

Conclusion

In this article, I have covered some of the basics of the Script.aculo.us framework. This framework may not provide all the bells and whistles of the other commercial frameworks, but it is server technology agnostic and provides essential tools for any web developer. Some of the features that come with the Script.aculo.us JavaScript libraries—such as animation framework, drag and drop, AJAX controls, DOM utilities, and unit testing—are truly time savers. If used right, the framwrok can add fantastic usability features to the site with the resulting cross-browser compatible code.

Given the fact that there is practically no configuration, a small learning curve, and lots of benefits, you practically owe it to yourself to at least take a look at this client-side framework. And, if you are already looking for a quick way to add some interesting visual effects and AJAX-enable you existing web pages, Script.aculo.us can be a great solution.

Source Code (Includes Script.aculo.us 1.7)

Download the Source Code here.

References

About the Author

Vlad Kofman works on enterprise-scale projects for the major Wall Street firms. He has also worked on the defense contracts for the U.S. government. His main interests are object-oriented programming methodologies, UI, and design patterns.





Page 2 of 2



Comment and Contribute

 


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

 

 


Sitemap | Contact Us

Rocket Fuel