Walking into the Ocean

Nothing too crazy on the JavaScript side - just playing around with some stuff I hadn’t done before. I wrote about three quarters of this a few months ago and just finished it off this afternoon. I had to write a simple, but hopefully effective, image preloader that has nice callbacks and a decent api. The actual slideshow could be written better, but it works, and that’s all I was going for…

And yes, I’m probably about the 58th person to build a Yelp interface for the iPhone, but I was looking for something I’d actually use and learn from!

Yelp provides a REST search API that allows you to pass in a location and a search term and they return a JSON object with a list of matching businesses, their ratings, and the business info. I used the Zend Framework and the Prototype JavaScript library to put it together. I could have done a pure JavaScript implementation using script hacks, but figured it’d be better to have the PHP code serve as a basic proxy for the Yelp web service.

Try it out!

For those who don't know about Defensio, it is a web service for determining whether a comment on a blog or message in an application is spam. To use it, you must first register for an API key. Defensio is very similar to the venerable Akismet (see the article I wrote on Akismet) but they provide a couple other features such an indication of the 'spaminess' of an individual message. Akismet has worked out great for me (123,419 spam comments caught so far!), but I figured it would be good to try out something new as well.

The class is a PHP5 class and the public methods are reasonably well commented. The bottom of this post has a link to a test application and a download of the class/test application. So...the usage of this class is quite straightforward, as shown below:

A couple key points on usage:

• Each Gregphoto_Defensio object requires an Http adapter that it will use to make Http POST requests to the Defensio web service. I originally hardcoded it to use the Zend_Http_Client from the Zend Framework, but figured this could discourage people from using it. Then I wrote up a quick adapter to use PHP's Http Stream Wrappers, but realized that didn't work on my Dreamhost account, so I added in an extra one for the Curl extension. In theory I should have added a Gregphoto_Defensio_Adapter_Interface class, but I was lazy and didn't want to add in an extra file.
• Each Gregphoto_Defensio object can be used to make many requests
• All of the current Defensio API's are covered by the class. These are covered by the following methods in the Gregphoto_Defensio class:
  • validate_key
  • announce_article
  • audit_comment
  • report_false_negatives
  • report_false_positives
  • get_stats
• Each of these methods takes a single parameter, an associative array of options as defined by the Defensio API. Each API also returns an associative array of response parameters. Two static utility methods Gregphoto_Defensio::getActions (returns a list of defensio methods such as 'validate-key') and Gregphoto_Defensio::getActionDetails (returns a list of required parameters, optional parameters, and response parameters for a specific Defensio action) are provided in order to get the details of the input and output parameters.

I created a simple test application which can be used to test Gregphoto_Defensio and all of the APIs provided by Defensio.

Download the Gregphoto_Defensio class and the test application

Check out my pictures here: http://picasaweb.google.com/gneustaetter/SouthKoreaIndiaAndSingapore

The class has the following basic features:

• Ability to read JPEG, PNG, or GIF images
• Ability to output JPEG, PNG, or GIF images
• 4 modes of thumbnail creation
  • MAX_HEIGHT - you specify a maximum height and the dimensions are calculated based off of the height
  • MAX_WIDTH - you specify a maximum width and the dimensions are calculated based off of the width
  • BEST_FIT - you specify a maximum height and width and the dimensions are calculated so that the thumbnail
    is as large as possible without exceeding the maximum height or width
  • EXACT - you specify a maximum height and width and these are directly used. Causes distortion if the
    chosen aspect ratio is different from the aspect ratio of the image
• Renders/saves images in their input format by default, but allows changing the format. For example, input a GIF but output a PNG
• Fully documented object oriented code
• Fluent interface for creating thumbnails with a minimal amount of code

The class is licensed under the MIT license, which basically means it can be used and modified by anyone - for personal or commercial use.

You can Download it from the project page on Google Code. You can view examples of it running on my site - the examples are checked into SVN and can be viewed on the project site. You can also view the docs.

Example usage:

Enjoy!

See the example (note: example uses Scriptaculous 1.7 Beta 2)

The methodology behind this is quite simple:

1. Load the list values from the DB and show them on the screen
2. Using JavaScript, setup the sortables
3. Add a JavaScript callback to the drag/drop that points to a function that serializes the list and sends an Ajax request to the server
4. On the server, loop through the list and update the database with the proper order

To do this I created three main files:

• index.php - the UI that shows the list and has the JavaScript
• ajax.php - the page that processes the Ajax request
• db.php - a simple database class included in both index.php and ajax.php that makes the connection to the DB and has methods to get the current list and to update the list

Reviewing Index.php

Index.php looks like this:

Let's look at this in reverse order. At the bottom of the file there is a div with id 'containerDiv' (line 36). This is the container for our list. Within this is a small snippet of PHP that loops through an associative array and prints out each list item as a div with id 'item_12' where 12 is the ID for that record in the database (line 40). Lines 2-4 contain the PHP code that include the db.php file and use it's class to get the associative array that is used here.

Underneath the container div is another div that has the text 'Updating database...' - this div is hidden by default and will be shown while Ajax calls are in progress (line 45).

Now to the JavaScript...it starts off on line 14 with a call to Event.observe that tells the browser to call the init function after the page loads. The init function (line 15) creates a new sortable list on the listContainer element, setting all divs within it to be sortable and setting the updateList function as a callback whenever the list is updated. This means that when the order of items in the list change, this function will be called with the list element passed as an argument. This function will perform the Ajax request to update the database.

The updateList function (line 18) first sets a simple variable for the url used for the Ajax request. Next (line 20) it calls Sortable.serialize, passing the id of the container as an argument, which serializes the list to a format such as listContainer[]=5,listContainer[]=7,listContainer[]=2 - here, the first three items of the list would be the items 5, 7, and 2 and the divs representing these items would have the following id values: item_5, item_7, and item_2. This serialized list is set in the variable 'params'. Next, on line 21, an Ajax request is opened with Prototype's Ajax.Request class. It is called with two arguments, the url and an object with various options. The options include the type of request (POST in this example, parameters to pass (the params variable constructed on line 20), and two functions (onLoading/onLoaded) that handle the showing and hiding of the 'Updating database...' div. Normally in an Ajax request I'd also add a callback for onComplete to handle the response from the server, but in this case the Ajax response doesn't really matter to me because it is really only a one way communication in this demo - in a real application I'd have more error handling and would need to handle error conditions.

That's about it for the index page...not too bad, right?

Reviewing ajax.php

The file ajax.php is a simple file that is designed to receive the Ajax request and call the appropriate methods defined in db.php to update the list. Its contents are shown below:

Yup, that's it. Basically it starts off by calling session_start() - I typically call session_start() at the top of pages like this because starting the session sends the right http headers to prevent the file from being cached and I'm too lazy to look up what the right headers are! Next it requires the db.php file, instantiates an object, and calls the updateList method of the object, passing the listContainer variable from the POST request (containing our serialized list). That's it for the ajax.php page.

Reviewing db.php

The file db.php is a simple database class that connects to the database and has methods to get the list and to update the order of the list. In a 'real' application I would definitely have a much cleaner implementation of the database access and would use other DB libraries to connect to the db - I used the simple mysql db functions to minimize on the number of lines needed here. Here are the contents of the file:

Important note - this file uses PHP 5 syntax in this object...you'd need some changes to get this to run in PHP 4. I'll skip talking about the constructor (which connects to the database) and the getList function (which...gets the list) in order to focus on the last method, 'updateList'. This function takes in an array of items, i.e. array(5,7,2), that come from the serialized list. It loops through the list and generates SQL UPDATE queries for each item. Each time it increments $orderid so that the first item has an orderid of 1, the 2nd an orderid of 2, etc. This means that whenever we get the list, as long as the SQL 'ORDER BY orderid' clause is used the list will show in the correct order.

Summary

That's it...hope you enjoyed it. The hopeful moral of the story is...Ajax is easy, and so is drag and drop....especially if you're using a good library. Personally I think that Prototype is incredibly useful for JavaScript development and Scriptaculous is a good sidekick for effects and drag/drop. I've also used the Yahoo YUI widgets at work where we needed to do some more dynamic widgets such as trees - it worked really well. Jack Slocum's YUI extension is incredibly well done too...though it's a heavy one in terms of file size! In the end, it comes down to finding the right tool for the job...

Download the sample application if you want to take a closer look....

The following is an example of a simple reusable widget created using the Prototype JavaScript library. The widget is an 'accordian' - a widget composed of multiple sections, of which only one is open at a time. This type of widget is available in all sorts of applications, from Microsoft Outlook (circa Outlook 2000), to web applications, and more. In addition to showing off this simple widget, I'd like to walk through it to explain how it works and how to write something like this with Prototype. For all of Prototype's greatness, there is certainly a lack of documentation that makes it a little bit difficult to get into.

Example

Take a look at the example page I put together showing a few examples of accordians and their capabilities. This article will explain how to put together the class that does this.

Explaination: Creating Reusable Classes

I'll skip with going through the HTML - you can see that on the example page if you're interested - it would be helpful in understanding the javaScript here. In this example I've used version 1.5.0_rc0 of Prototype. The first line of the accordian.js file has the following:

Prototype's Class.create() sets up Accordian as an object that can be instantiated. When the object is instantiated the 'initialize' method, its constructor, will be automatically called. You setup all of the methods within the object by defining its prototype - an object with properties and methods. This could be done in the following way:

This object could be instantiated in the following way:

Explanation: Writing the Constructor

The constructor needs to take two arguments - the ID of the element that contains the accordian and the type of entry that is used for the header of each section. The constructors main job is getting a list of all of the sections within the accordian and adds onClick event handlers to the headers so that clicking them will open the section. The constructor is shown below:

Now to explain what's going on in the constructor:

• The first line defines the function that expects two variables - the ID of the element that holds the accordian and the type of element that will serve as the header for a section.
• The second line sets a class property, 'container', to the element passed in with variable 'elem'. It uses Prototype's $() function, which in this case is equivalent to document.getElementById()
• The third line uses the very powerful $$() function that returns an array of all elements that match a given css query. In this case, the query might look like '#myAccordian .section h3', which would return all h3 elements under an element with class 'section' under the element with ID 'myAccordian'.
• Lines 4-6 setup the event handlers that will be used when the user clicks the headers. This uses the each() function that Prototype adds to arrays in order to quickly loop through an array without using a for loop or creating a bunch of temporary variables. This function takes a function as an argument that will be applied as an iterator over the array. This use of this technique is similar to the foreach concept in PHP (foreach($headers as $header)) and other languages. Because functions are objects in JavaScript, we need to add a trick at the end of the each function defined within 'each' - we need to add 'bind(this)'. This means that within the new function, the 'this' keyword will be bound to the Accordian object, not to the function itself.
• Line 5 uses Prototype's Event class to setup the observer - in this case it will bind the classes sectionClicked method to any click on the header elements. Similar to the binding needed on the function, the reference to the sectionClicked function is follwed by 'bindAsEventListener(this)', which means that inside the event handler, 'this' will refer to the Accordian object, not to the clicked header element.

Explanation: Writing the Event Handler

The function referenced as the event handler in the constructor is shown below:

Functions called as an event always get passed an event object. This function takes this event and uses the Prototype 'Event' class to get a handle on the parent node of the element that was clicked, the section itself. It then passes this as an argument to another method in this class - openSection.

Explanation: Opening a Section

This function if fairly straightfoward - it checks to see if the section being opened is already open, and if not, calls a function to close the open section, and finally opens the new section. It is shown below:

• The function takes one argument, the section that is to be opened
• The second line uses the $() function to get the DOM element. It is important to note that this function can either take the section ID as an argument or the actual section DOM node. The $() function adds this extra flexibility
• The third line checks to see whether the ID of the section is the same as the currently open section. If it is, no other logic is performed. If it isn't, the next few lines will open that section.
• After line 4 calls a function to close the existing section, line 5 sets a class property 'currentSection' to the new section
• Line 6 uses Prototype's getElementsByClassName, passing the class (contents) and the element under which it should look (the new section). This returns an array of elements
• Line 7 takes the first element with class contents (their should only be one), and uses Prototype's show() function to show the element

Explanation: Closing a Section

This last function is the simplest of all - it checks to see whether there is an open section, and if so, it hides it.

• The second line checks if the currentSection exists - it is only set after the first section has been opened
• The third line uses the same technique as in the previous function - it uses getElementsByClassName to get the elements with class 'section'
• Finally, the hide function will hide this element so that the section is collapsed

The Final Script

Conclusion

Though this is a fairly simple example, I hope it helped to explain some of the features of the Prototype library and can get people kickstarted to writing classes with JavaScript. Most of it is very simple...if only there were some real documentation. The best source right now is probably Developer notes for prototype.js, which covers features up to Prototype 1.4. Another site with a compilation of links is http://www.prototypedoc.com/.

Go forth and rid the world of nasty IE5 style, unreadable, browser-sniffing, hackish, global-scope JavaScript!

• Allows you to perform complex validation, such as verifying the uniqueness of a username, or checking something in the database...all without reloading the page
• Allows you to use the same validation routine for both client-side validation and server-side validation
• Reduces the amount of client-side code needed for validation

The JavaScript used in my example requires the Prototype library. My example uses PHP to perform the validation - more specifically, I've used several components of the Zend Framework (PHP5 only). The example uses:

• Zend_Controller_* classes including the new RewriteRouter to handle the routing within the application
• Zend_View to handle the output
• Zend_View_Helper_* classes to build form elements
• Zend_Config to read in configuration options
• Zend_Filter to perform several field validations
• Zend_Json to serialize PHP variables/objects to JSON objects

Did I need all of this stuff on the server-side to put together a simple form validation example? Heck no, but when I'm experimenting with new stuff I like to use a lot of new components so I can learn more about them and be prepared for when I actually do need to use all of this fire power. I've been following the Zend Framework carefully, so I wanted to use some of the stuff I hadn't used yet - particularly the controller architecture.

The HTML and JavaScript

Ok, back to how this JavaScript is used. It's actually really quite simple. First, you need to include the JavaScript files for both Prototype and AjaxFormValidator in the head of your HTML document:

Next, you add an 'onSubmit' handler to the form you'd like to validate - in this case, mine looks like this:

The form action is set to the page I'd like the script to go to if the validation is successful. The onSubmit calls a custom function that we still need to define. It passes 'this' as an argument - the 'this' refers to the form element itself.

Now we define the submitForm() function that the onSubmit of the form will call - it looks like the following:

This function first creates a new AjaxFormValidator object, passing it the form element (or the form id) and the url the validation request should be sent to. The next two lines setup the type of error display that should happen. The following error display types are supported:

• alert: The default option. Displays all errors in a JavaScript alert box.
• inline: Displays errors within an element that is defined on the page. You need to set the element name with validator.inlineElem. In this example, errors will be shown in a div with id="errorDiv".
• none: errors won't be shown to the user. The will be available as an array of errors in the errors property of the validator (i.e. validator.errors). If there are no errors the property will be set to false. Once you have the errors you can perform more advanced error handling/display to the user.

Lastly, validator.validate() will send the values in the form, in an HTTP POST, to the validation url you've provided (/ajaxValidate/index/validate in this case). If there are no errors the form will be submitted, if there are errors the will be shown (or not shown if you've chosen 'none' as the errorDisplay).

The PHP

Once the request is sent it will eventually arrive at the server for processing - in this case, through the magic of routing, it is going to end up in my IndexController in the validateAction method. This function is shown below:

This function calls another method within the IndexController class called getErrors, passing in the entire array of POST arguments (values in the form). It receives back an array full of error strings. If there are no errors, it changes the value of the $error variable to false. Lastly, it uses Zend_Json to convert the PHP array/Boolean into the equivalent JavaScript array/Boolean. This string is printed and sent back to the client.

The getErrors function itself is very straightforward - it just does a couple validations and returns back an array of the errors.