Section A.2. 2: script.aculo.us and other UI libraries

A.2. #2: script.aculo.us and other UI libraries

In addition to several Ajax toolkits, there are some great JavaScript libraries you can use to build really slick user interfaces (UIs). These libraries are just external JavaScript files that you can include and use in your applications, whether those apps are asynchronous or not.

script.aculo.us

 Where to get it: http://script.aculo.us/ How to use it: <head> <title>The New and Improved Break Neck Pizza</title> <link rel="stylesheet" type="text/css" href="breakneck.css" /> <script type="text/javascript" src="/books/2/850/1/html/2/prototype.js">Nothing new here... these are just more JavaScript libraries to add to your HTML. script.aculo.us has several JavaScript libraries, and tons of cool effects. To learn more, check out their demos page at:  </script> <script type="text/javascript" src="/books/2/850/1/html/2/scriptaculous.js"> </script> <script type="text/javascript" src="/books/2/850/1/html/2/pizza.js"> </script> </head>script.aculo.us uses the Prototype library for its server interaction, and some lower-level JavaScript functions.

Rico

Where to get it: http://openrico.org/

How to use it:

 <head>     <title>The New and Improved Break Neck Pizza</title>     <link rel="stylesheet" type="text/css" href="breakneck.css" /> Like script.aculo.us, Rico uses Prototype, as well as a utility library.     <script type="text/javascript" src="/books/2/850/1/html/2/prototype.js"> </script>     <script type="text/javascript" src="/books/2/850/1/html/2/rico.js"> </script>     <script type="text/javascript" src="/books/2/850/1/html/2/util.js"> </script> <script type="text/javascript" src="/books/2/850/1/html/2/pizza.js"> </script> </head>

Like script.aculo.us, Rico has lots of great UI features, notably some really cool drag and- drop functionality.

Here, I'm dragging text from the list of names into the graphical boxes on the bottom of the page... all without page reloading or server interaction!