Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


The Productivity Perks Behind Prototype's Popularity : Page 4

Learn how to leverage the popular Prototype JavaScript framework to speed up your AJAX-based development. You'll see how to use JavaScript in an object-oriented way.

Useful Functions You May Need While Doing AJAX
Basically, AJAX involves sending a request to the server and receiving the response. In this scenario, along with the request you often need to send parameters in the form of a query string (i.e., param1=value1&param2=value…). Prototype provides some useful functionalities to build your query string very easily. For example, if you have a form and want to collect all its fields as a query string, you can use the Form.serialize method. Here is an example:

<!-- HTML --> <form id="myForm" name="myForm"> First Name: <input type="text" name="firstName" id="firstName" /> <br /> Last Name: <input type="text" name="lastName" id="lastName" /> <br /> Gender: <br /> <input type="radio" name="gender" id="gender" value="M" checked="true"/> Male <br /> <input type="radio" name="gender" id="gender" value="F" /> Female <br /> <select id="state" name="state" multiple> <option value="ALA">Alabama</option> <option value="CAL">California</option> <option value="FLO">Florida</option> </select> <br /> <input type="button" name="clickButton" id="clickButton" value="Click Me"
onclick="displayQueryString()" /> </form> // JavaScript function displayQueryString() { var qs = Form.serialize($("myForm")); alert(qs); }

I tried this code with my personal info and California as the state. Figure 1 shows what I got back.

Click to enlarge

Figure 1. Form.serialize Function

Easy and clean, isn't it? Notice that you can also use the multiple selection and Prototype will take care of composing the correct query string for you. For example, if I use my data and select California and Florida from the form above, I get the following query string:


Keep two things in mind when working with Form.serialize:

  1. It ignores image and button inputs.
  2. It includes the submit button in the query string. For example, if instead of type="button" I had used type="submit" in the preceding example, I would have gotten clickButton=Click Me in the query string.

At this point you might say, 'This is interesting, but what if I want to serialiaze an object instead of a form?' Well, Prototype thought of that too. Look at this:

// create the object var obj = { firstName : "Alessandro", lastName : "Lacava", gender : "M", state : "CAL" }; // get a query string from it var qs = $H(obj).toQueryString(); alert(qs);

The result of this code is the same as that in Figure 1. The magic involved in this lies in the $H function. It transforms the object parameter into a hash (i.e., a set of key-value pairs where the keys are represented by the object's property names while the values are the object's property values).

So far you've learned about many nice features of Prototype, but don't forget that you can modify the source code to meet your needs. For example, you saw that Form.serialize includes the submit button in the query string by default. If you want to change this behavior, you can change the source code. Open the prototype.js file and find the following code block:

Form.Element.Serializers = { input: function(element) { switch (element.type.toLowerCase()) { case 'submit': case 'hidden': case 'password': case 'text': return Form.Element.Serializers.textarea(element); case 'checkbox': case 'radio': return Form.Element.Serializers.inputSelector(element); } return false; }, ...

Comment out (or if you prefer, delete) the line case 'submit':, and save the file. The result will be that the submit input type will no longer be taken into account when you use Form.serialize.

Prototype as a Foundation for Higher-Level Libraries
The proof that Prototype is a good framework is the existence of higher-level libraries built upon it. The two most famous are Scriptaculous and Rico. Both are for user interface development and they offer full AJAX support.

To get a little taste of these libraries, first go to the Scriptaculous Download Page and get the latest version. (At the time of writing it was version 1.6.5 and it used the 1.5.0_rc1 version of Prototype, which is included in the archive.) The files you need are prototype.js, scriptaculous.js, builder.js, effects.js, dragdrop.js, slider.js, and controls.js. Put them in a directory (e.g., scripts).

In order to use Scriptaculous, you need to include just the first two files:

<script src="./scripts/prototype.js" type="text/javascript"></script> <script src="./scripts/scriptaculous.js" type="text/javascript"></script>

The others are automatically imported by scriptaculous.js. Scriptaculous offers a rich UI library, including animation effects, drag and drop, AJAX controls, and DOM utilities. For example, here are some animation effects:

<!-- Pulsate Effect --> <div id="pulsateTest" style="border: 1px solid #0000ff; width: 100px;"
onclick="new Effect.Pulsate($('elemToShow'))"> Click to see the pulsate effect </div> <br /><br /> <!-- Puff Effect --> <div id="puffTest" style="border: 1px solid #0000ff; width: 100px;"
onclick="new Effect.Puff($('elemToShow'))"> Click to see the puff effect </div> <br /><br /> <div id="elemToShow" style="width: 200px; border: 1px solid red;"> This element was created to show some of the Scriptaculous animation effects. </div>

If you try this code, you'll appreciate the cool animation effects on the elemToShow <div> as soon as you click on the other <div> elements. Notice that to create an effect you need to write just one line of code, the general syntax of which is new Effect.EffectName(element);. In this syntax example, element is the element you wish to apply the effect on, and EffectName is the name of the effect to use. You will find a lot of effects in Scriptaculous: Appear, Fade, Puff, BlindDown, BlindUp, SwitchOff, and many others. You can also customize the effects using different options. Check out the Scriptaculous Demos Page for all the animation effects and the other functionalities of the library.

Rico is another useful UI library. At the time of writing, the latest version was 1.1.2, based on Prototype 1.4.0. You can get it here. As with Scriptaculous, you need the following two includes in your Web pages to use Rico, supposing you put them under the scripts folder:

<script type="text/javascript" src="./scripts/prototype.js"></script> <script type="text/javascript" src="./scripts/rico.js"></script>

Apart from AJAX, drag-and-drop, and other cool functionalities, Rico offers very interesting cinematic effects. For example, have you ever had the need to display some content within a rounded box? Well, Rico makes it very easy. Here is an example:

<!-- Round Effect --> <div id="roundTest" style="border: 1px solid #0000ff; width: 100px;"
onclick="Rico.Corner.round($('elemToRound'))"> Click to round the div </div> <br /><br /> <div id="elemToRound" style="background-color: #0000ff; color: #ffffff; width: 200px;"> This element was created to round its corners using the Rico.Corner.round method. </div>

Figure 2 shows what you get when you click on "Click to round the div."

Click to enlarge

Figure 2. Rounded Corners

Of course, Rico has many options you can use to customize all the effects. Have a look at the Rico Demos Page for more examples of this library.

Prototype Power
Now you know how powerful the Prototype framework is. It is so good that it serves as the foundation for very cool UI libraries such as Scriptaculous and Rico. With all the fantastic Prototype tools under your belt, only your imagination separates you from next-generation Web 2.0 applications.

Alessandro Lacava is a software developer and technical writer based in Italy. He is mainly interested in Java and .NET technologies, Web applications and telecommunication systems. Alessandro holds a degree in telecommunications engineering. You can reach him via his Web site.
Comment and Contribute






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