Looking for a quick and easy way to add a little eye candy to your website? Look no further than Google Maps. Developers comfortable working with basic JavaScript will have no trouble using Google Maps to visualize their geospatial data.

I came across a quick and easy solution to making HTML tables sortable. A single file javascript lib. Its open source and available under an X11 license, so it can be used for private and commercial apps.

3 simple steps to use it:

Prototype window is a javascript class based on the Prototype framework, and inspired by script.aculo.us. Its purpose is to allow the programmer to add a window to their web page that looks, works, and feels the same across many of the major web browsers.

Installing

1. Download the package.

So, your application gets deployed in a week. It has gone through system, integration, and user acceptance testing and has passed all three. However, the final phase (in our case, a few weeks before deployment) is that actual end-users (a much larger group than those who perform UAT) go through a 'business transition' phase where they are all trained on the new system so that they will be good-to-go when your pride and joy gets deployed to production.

We received a call a week before the production deployment that popups weren't working on some of our end-user's machines

My personal email goes through a domain that I own, and I use a spam filtering service to keep the amount of junk I have to download to a minimum. At $12 per quarter it's a good deal, but I'm off topic.

The service (onlymyemail.com) sent out an email today offering their JavaScript generator to mask email addresses posted on web pages from search bots.

Web development using Internet Explorer is often a more painful endeavour than developing with Firefox due to the lack of development tools in IE compared to Firefox.  If requirements dictate Internet Explorer, the Fiddler add-on for IE provides valuable capabilities for inspecting the details of HTTP connections.  From the website, "Fiddler is a HTTP Debugging Proxy which logs all HTTP traffic between your computer and the Internet. Fiddler allows you to inspect all HTTP Traffic, set breakpoints, and "fiddle" with incoming or outgoing data."

Over the last few weeks, I’ve been playing with two of the latest web framework offerings. Of course both advertise to dramatically increase the ease of web application development (while shouting the obligatory, "AJAX!"), yet they are quite different.

Adobe Spry framework for Ajax
Although I found the Adobe Spry demo applications to be compelling, they ran a bit slow for me (yes, running locally). I also didn’t see much new here; just a combination of things that had wowed me previously. For example, the transitions between images in the Photo Gallery were a bit rougher than LightBox. The RSS Reader was well put together, although I can’t see myself using (and maintaining) something like this when so may other (integrated) options exist. The Product Table seemed a lot like the Accordian example found on the Rico web site.

JSON (JavaScript Object Notation) is a light weight data interchange format alternative to using xml with Ajax.  It is a subset of the JavaScript object literal notation that which is basically made of 2 object types.  The first being a collection of name value pairs similar to a hash table.  An ordered list of values is the other, basically representing an array.  The following shows how to write a JSON object in JavaScript and access it.

    var company = {
        name: "Software Inc.",
        employees: [
        {
            name: "Mike",
            skill: "Java"
        },
        {
            name: "Joe",
            skill: "HTML"
         },
        {
            name: "Betty",
            skill: "C++"
        }
        ]
    };

    // Access the data
    var employee2 = company.employees[1];

In a recent project, we have decided to incorporate and AJAX functionality to create a dynamic and interactive user experience in the browser.  With information learned from Stuart Halloway's presentation at one of Platinum Solutions' training events, I decided to utilize Prototype (http://prototype.conio.net/) as a helper library for implementing AJAX functionality and making the Javascript cleaner.  

AJAX

My primary goal for utilizing Prototype was to assist with AJAX.  Although the creating AJAX requests in the browser is not complex, Prototype hides browser variations in the process and makes implementation extremely simple.  To implement the loading of data upon click, I utilized Prototype’s Ajax.Request object.

    new Ajax.Request(this.getDataUrl, {
            method: 'post',
            postBody: 'fromDate=' + fromDate + ‘&toDate=’ + toDate,
            onSuccess: this.processDataJSON.bind(this),
            onFailure: this.ajaxError.bind(this),
            asynchronous: true
        });

This simple AJAX call just requires the url and an associative array of self explanatory parameters.  The only unintuitive part of this call to developers of other languages is the bind call.  This is covered later in the discussion on classes.  This AJAX call gets initiated in a ‘click’ event handler, and the processDataJSON and ajaxError callback functions were written to process the success or failure of the AJAX call.

This request calls a URL which could be implemented in any server-side language such as Java, PHP, or Perl.  For this project, we implemented the server as a Java Servlet and chose JavaScript Object Notation (JSON) as the data protocol.  JSON is a very simple, yet effective way to deliver data to the client in the form of JavaScript objects.  This eliminates any conversion or translation on the client side.  However, a small amount of work is performed on the server side to create the objects.

Once the client receives the AJAX response, the JSON is parsed to create a standard JavaScript object.  You can use a standard JavaScript eval to create the objects, but it is recommended to use JSON.org’s JSON parser available at http://www.json.org/js.html.  This parser will only process and create JavaScript objects from the JSON response as opposed to eval which will run any JavaScript code.  Here is the processDataJSON callback function:

    processDateJSON: function(response) {
        // create collect array from JSON text returned
        var newData = JSON.parse(response.responseText);
        
        // process new data here...
    }

There is no translation or conversion necessary.  The JSON parse function simply returns a JavaScript object for use.

Classes

Another purpose for using Prototype was to use basic object oriented programming.  Prototype offers a Class object for creating and defining classes.  Use Class.create() to create a Class object, then define the class functions by assigning an associative array of functions to class_name.prototype.  A special function called initialize is used to act as the object’s constructor.

    var CalendarData = Class.create();

CalendarData.prototype = {
        initialize: function(year, month, day) {
        },

        processDataJSON: function(request) {
        ...
        }
    };

To harness the power of inheritance, use Class.extend to create an object oriented hierarchy of objects.  My primary complaint of JavaScript objects is the notion of context.  Object oriented programmers are used to calling functions on objects with the assumption that the target object is executing its own function.  In other words, car.explode() called from a class called Person might not cause the car object to explode.  Instead, the car.explode function would be executed in the context of Person, thus causing the Person to explode.  This is likely not the intended result.  To solve this issue, Prototype offers the bind function.  In the car example, the Person would call car.explode.bind(car)().  This notation is definitely less clean but necessary.  Bind causes the function to be executed in the context of car.  When the function uses the ‘this’ keyword, ‘this’ will refer to car and NOT the Person object calling the function.  This issue of context may be simple to fix, however it can waste much time debugging function calls missing binds.

Iterators