We have been developing web applications using PHP and MySQL. But now we want to learn how to make our applications interactive in terms of usage, and build a community around them. In short, we want to build simple, yet powerful applications.
Now that we are ready to have some serious fun with script.aculo.us, it's important to quickly grab the latest version. We will require the Prototype library that comes with the latest version of script.aculo.us.
You can download the latest version of script.aculo.us from their official site at http://script.aculo.us/. Save the file in the web server's root directory,www, inside the specific project folder. The Getting Started URL explains this process in detail.
script.aculo.us 1.8 is the latest version that comes with Prototype 126.96.36.199 beta. Alternatively, if you have an older version such as 1.7 or 1.6, it should be fine. However, we highly recommend upgrading it to version 1.8, as it adds new features for multimedia support and incorporates many bug fixes which may be missing in the previous versions.
The best way to understand and visualize what script.aculo.us can do for us is by getting our code up and running − quickly! Yes, we mean it. Let's explore some features of script.aculo.us with examples and real-world scenarios before we move on to create the next big thing on the Web.
You want to impress your application users, don't you? Effects are all about adding interactivity to your applications, which in turn gives an appealing user interface to make users fall in love with your applications.
script.aculo.us comes with an effects engine, which provides various effects such as grow, slide, highlight, and many more. When applied in applications these effects add beauty to the functionality.
The HTML code, which we will use to add effects, is as follows:
<html> <body> <div id="effect-id"> </div> </body> </html>
Now let's add effects to this
You should be able to see the effects when the
<div> is selected. A simple real-world example of what you have done now is shown next. It's a WordPress application using the script.aculo.us effects.
After applying the fade effect to the
<div>, you should see the
<div> fading away slowly.
We will use many such effects in our applications throughout the book.
Drag and drop is another feature that is quite often seen in many web applications. Imagine a simple shopping cart where you can simply drag-and-drop the items you want to buy from a list of items. Isn't it simple for users? Yes, it indeed is. And even better, it is simple for developers too.
The complete drag and drop features of script.aculo.us will be explained in Chapter 5. For now, check out the Backpackit application from 37signals at www.backpackit.com and visualize what kind of application you want to create using drag and drop.
In the following screenshot we can drag notes and lists, and re-arrange the items on the page:
script.aculo.us uses the functions and power of Prototype, such as
Updater, to add AJAX functionality to web applications easily. For now, all you should understand is how it will help us in our applications.
In the previous screenshot we could add a List, Note, Divider, and Tag without moving to another page. Everything is done on the same page, but the data is sent to the server using AJAX. From the user's perspective, the application is easy, fast, and simple.
As we said before, we can add a Note, List, and Tag without moving to another page. This feature makes use of the power of XML features through AJAX techniques, which update the server at runtime and even fetch the data from the server without loading the whole page.
Our idea of building a project is also the same. We shall go through all these features step-by-step in Chapter 2.
It's only the beginning of the fun. We have just touched upon an overview of the library. There are many other features such as autocomplete, sliders, in-place editing, and multimedia. All these features are fun to work with and are covered in depth in the chapters to come.
Throughout the process of learning script.aculo.us, all you need to do is visualize the possibilities of how we can make our applications more interactive and engaging.
In this chapter we saw an overview of the script.aculo.us library. Real-world scenario of WordPress and Backpackit prove that script.aculo.us has been trusted with developing and deploying simple, yet powerful user-driven applications.