Section 14.4. Sabre s Rico | Learning JavaScript, 2nd Edition

14.4. Sabre's Rico

Rico is a rather interesting Ajax library. For one thing, unlike many other Ajax libraries, which are the inspiration of an individual or small group of individuals, Rico was created by a development team at Sabre Airline Solution. Developed by company personnel, it was released for general use via the Apache license.

Rico, like other libraries we'll examine, is dependent on Prototype. At the time this was written, Rico was at Version 1.1.2 and was dependent on Prototype 1.4.0. I tried the examples with the Prototype 1.5 release candidate.

After installing Prototype, access Rico from the library's web site at http://openrico.org/rico/home.page. Once downloaded, include both libraries in your page using the following in the head section of your document, before any JS that uses the libraries:

<script type="text/javascript"      src="/books/4/327/1/html/2//pathto/prototype.js"> </script> <script type="text/javascript"      src="/books/4/327/1/html/2//pathto/rico.js"> </script>

What I especially like about Rico is the very easy-to-use cinematic effects. Among these are animators that position elements, fade colors, and especially, round corners, which I thought was rather unusual, but not surprising, with an Ajax library.

We'll take a couple of these effects out for a test drive, starting with that rounded-corner library.

14.4.1. Rounded Corners

The difficulty with the Rico library is that not all of the functionality provided is documented. However, the JavaScript library is simple to read (if you're familiar with Prototype), and the site provides a nicely organized set of demos.

The Rico rounded-corner effects are dependent on a one-off object, the Rico.Corner.round. You invoke it through the external interface object, Rico.Effect.Round class, passing in options to create the different effects:

new Rico.Effect.Round(tagname,classname,options);

It's interesting to look through the code for Rico (which is very readable). When the Rico.Effect.Round class is instantiated, the elements to modify are accessed using a function Rico adds to the document object:

document.getElementsByTagAndClassName = function...

The function takes a class and tag name and returns one or more nodes that match both constraints. Each element is then passed to the one-off object to actually create the effect.

Returning to the demonstration, Example 14-4 is a web page that rounds the corners of three DIV elements using the Rico API in combination with different options: ordinary rounding, rounding with border, and rounding only the bottom corners.

Example 14-4. Working with Rico's rounded-corner effects

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>PrettyPretty</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .roundme { width:250px;background-color:#0f0;margin: 20px; } .contents { padding: 10px } </style> <script type="text/javascript"      src="/books/4/327/1/html/2/prototype.js"> </script> <script type="text/javascript"      src="/books/4/327/1/html/2/rico.js"> </script> <script type="text/javascript"> //<![CDATA[ document.onclick=roundMe;    rounded = false;    function roundMe(  ) {       if ( !rounded ) {          Rico.Corner.round($('div'));                                               Rico.Corner.round($('div2'), {border: '#ff0000'});          Rico.Corner.round($('div3'), {corners:"bottom"});       }       rounded = true;    } </script> </head> <body> <div   > <div > A div element with rounded corners. </div> </div> <div  > <div > Another div element with rounded corners. </div> </div> <div  > <div > Another div </div> </div> </body> </html>

Clicking on the page calls the function that does the rounding. Figure 14-1 shows the page after the Rico effect has been applied.

Figure 14-1. Three DIV elements with rounding applied by Rico library functions

The rounding effect can be applied as soon as a page loads. To make it less obvious, hide the elements until the page is finished loading, so that when they show, they show rounded.