Notes: Ajax Development with ColdFusion Frameworks
Presented by Joe Rinehart.
What’s Ajax?
Classically, it means “Asynchronous JavaScript and XML”, although also used with JSON a lot. For today, it will mean “using JavaScript to update a portion of an already displayed page without reloading.”
So, for an example: Deleting a single record is so server-heavy. Make the request, delete the record, then reget the list, and rerender the entire list page. In Ajax, we now make the request, the server just deletes the record and sends a small token indicating that it did it.
So we balance the load between the client and the server more efficiently. It also doesn’t interrupt the experience for the user. And the experience is just richer in general.
“Unstructured Ajax”. Calls made to the server don’t return data, they return pre-rendered HTML. Very easy to implement, doesn’t require major changes in architecture towards service layers. All we need are some scripts that generate HTML!
But you have now bound your data and presentation together. Isn’t flexible for changing. Similarly, Ajax request “handlers” on the server side tend to be very single-purpose. They are used for that specific Ajax call and can’t do much else.
“Structured Ajax”. Not just replacing regions of screen with the response. Instead, you’re taking XML, JSON, or even perhaps delimited lists of strings and using the pure data. No intermingling with presentation. Thus, it will work better with service layers that are focused on data, not presentation. What if you want to update two regions of the page, for instance? Unstructured Ajax would get messy that way, but when returning just data, you can do this.
This is more difficult to implement though. Need extensive knowledge of JavaScript and DOM. And what do you use for your structured data? XML? SOAP? JSON?
When it comes right down to it though, both types use the same technology, the XmlHttpRequest. Just creating this object is troublesome. Very different from one browser to the other. This is where nice JavaScript libraries come in. CFAjax, Spry, Dojo, AjaxCFC, Prototype + Scriptaculous. But there are others! Zoop, Plex, Rico, sajax, MochiKit, Taco, MagicAjax, Microsoft Atlas, yada, yada, yada.
So we will use Prototype and Scriptaculous in this example.
Implementing Ajax with Model-Glue
For today, we’ll just do unstructured Ajax. Not the best, but a great way to get started in this demo. Will be faster for demoing.
Prototype. Great, and easy for unstructured Ajax, all on its own. Wraps around the XmlHttpRequest calls. It does have structured Ajax features, but it’s custom to Prototype.
Scriptaculous. An “add-on” to Prototype. Provides effects, drag-and-drop, unit testing.
Model-Glue. Framework for developing HTML-based apps that use CFCs for business logic.
Model-Glue can work seamlessly with these Ajax frameworks. Can return some HTML which Prototype will put in a region via unstructured Ajax.
The example app is a list of tasks. You can create, edit, complete, and delete tasks.
What can we Ajaxify? Delete existing items. Add more tasks. Inline item editing.
Ajax Delete. Create an event handler that deletes a task but returns nothing. Then, include our Ajax frameworks and add some JavaScript to call the event handler in an asynchronous manner. Third, use scriptaculous to make the row fade out. Finally, a few more visual clues.
With a two-line delete function in JavaScript, you make the Ajax request and then fade the row with Scriptaculous. The Ajax request will just call a Model-Glue event that uses the built-in Model-Glue generic database management to delete the record in the database.
First create the MG event, then write the Prototype code to make the Ajax.request(), then write the Scriptaculous code to give visual feedback.
A big problem with Ajax is that it is harder to debug. Use cfcUnit for testing the CFCs. You should do this anyway. It’s a lot easier to run unit tests than to put fake data in your forms and seeing what happens, over and over again. On the client side, debug with FireBug! But beyond that, do your client-side testing, even testing DOM results, with Selenium. With cfcUnit and Selenium, you can walk your way up the tiers to see where the errors occurred.
ColdSpring. With it, you can expose existing components as they are to be services for Ajax. Google “Remote Proxy ColdSpring” to read some articles by Chris Scott on this. ColdSpring will effectively generate the facades for you! Very service-oriented approach and requires no extra code.
