Loading up Google Reader tonight, I noticed a new link that read "Read Offline". What was this I wondered, so of course I clicked the link. It turns out that Google's been working on a new open source project called Google Gears that allows web applications to run offline. Very cool. I can see myself using this when I travel to read my RSS feeds on the plane, or in airports that don't have free wi-fi (why pay $10 just to read my feeds for an hour).

Gears is a browser extension that Google describes as adding "... just enough to AJAX to make current web applications work offline."

It's certainly an interesting approach. I doubt, though, that the approach will be as flexible as Adobe's Apollo platform, but it does offer another approach for allowing offline access. For Google Reader, it's a natural fit.

Google is also working with Adobe, Mozilla, and Opera (and other companies) on the project to ensure that the project has broad industry support.

You can read more about Google Gears on the Google Gears site.

Sitting in on the Spry presentation with Kelly Brown right now. He starts off by asking who attended Steve's CFAjax presentation, then making the point that Spry is (in his opinion) much easier to use. Next up is a general intro to Ajax.

The goals of Spry are open access, easy to use, and innovation enablement. Spry capabilities include loading and displaying data, filtering data using XPath, UI widgets, and visual effects. It's currently in beta, with new features still being onboarded.

Beyond the capabilities, there are some limitations. It requires JavaScript (as do all Ajax frameworks), performance (think large data sets), accessibility, and browser limitations (FireFox 1.5, Netscape 7.2, IE 6, and Safari 2.0.3), uses the Google XPath library, only supports XML data, and doesn't degrade well.

Despite limitations, Spry is pretty simple to use. You simply include a couple of JavaScript libraries, depending on what functionality you want to use. From there, you load data by creating a Spry XMLDataSet containing the URL of the data source and an XPath statement to select the data (in JavaScript). To display the data, you create a Spry region using standard HTML tags such as DIV. You use binding notation similar to Flex to do the actual display of the data:


<div spry:region="mydata">
{firstname} {lastname}
</div>

Looping is also available, similar to how it's done in ColdFusion.

Spry also has a mechanism for handling master/detail records. You can select an item from a list and have more information about that item displayed.

Kelly is moving along kinda slow, and so far the examples haven't been too dynamic. He's displaying data, but we aren't seeing much as far as dynamic data goes. So far, it doesn't look any different than just pulling data using CF and displaying on the page.

I've taken a look at one of the previous beta versions of Spry, and I do have to admit that it does seem simple to use. I still haven't gotten a good feel for everything Spry can do, and unfortunately, I'm leaving this session not much further ahead than where I started. It's nothing against Kelly - he seems pretty knowledgeable about Spry - it's just that I was expecting a slightly faster pace and a little more depth out of the presentation.

I'm sitting in Steve Rittler's CFAjax session right now. Steve's giving some background on Ajax as well as showing the process flow. Basically, "how it works". (x)HTML uses JavaScript to talk to an Ajax object. Ajax object makes an http request to a back end system, in this case ColdFusion. ColdFusion returns xml to the ajax object, which again uses JavaScript to deal with the returned data on the client.

Besides CFAJax, there's also ajaxCFC (by Rob Gonda). It uses a slightly different approach. There are also several non-CF specific Ajax frameworks which can be used.

CFAjax works with CF 6.0 and above. Requires JavaScript. The client must also support the XMLHttp object. CFAjax can return Structs, Query's and Arrays in addition to XML.

Steve's moving into some simple examples now. It's a speaker search where you start typing a last name in a form field and Ajax is used to send the info as you type, updating the form field with possible matches. This is basically the way Google Suggest works.

Cross browser support in Ajax can be really difficult. One of the big issues Steve faced is the way most Ajax libraries require you to embed all sorts of HTML within your JavaScript. It's verbose at best. It requires DOM manipulation, which is also a huge pain for cross browser support. His solution is to use "templates". He cautions this isn't for everyone, but in their case, it works well and has a lot of real world deployments.

Pros of the templating system include returning HTML - there's no hard coded DOM work. It's also, in Steve's words "very, very, very easy". The cons are that it feels a bit dirty, and may rub purists the wrong way. Again, there's a cost benefits analysis to be done. He shows the simple example again, this time using the templating system.

Steve's mentioning upcoming Ajax trends include Ajax/Flex integration (they actually complement each other) as well as mobile Ajax.

Lots and lots of "how do I do..." questions coming from the audience. There's obviously a lot of interest in this topic. Steve's doing a good job of answering them. This presentation could definitely span multiple sessions.

Steve looks to be wrapping up with an example of how to integrate CFAjax within the Mach-II framework. It's very similar in ModelGlue as well. He's showing the demonstration from within an application his company created called RecruitWeb. It's a pretty slick application for use by athletic recruiting departments. The application is completely written in ColdFusion using Mach-II as the framework and AjaxCFC. If you are interested in the mechanics of the integration, I believe Steve is making the techniques available on his company's website, I'm sure he'd be glad to give a fuller explanation.

I saw this one over on the Playfool blog. Apparently, Yahoo has a new Design Pattern Library over on their Developer Network website. JavaScript Source code and examples are available for several common UI design patterns including the following:

Autocomplete
Breadcrumbs
Drag and Drop Modules
Module Tabs
Navigation Tabs
Object Pagination
Search Pagination
Rating an Object
Writing a Review

Some of these are really cool. I especially like the drag and drop module as this is something I've been looking to do in a portal application we have. It will be interesting to see how the library develops as more people start contributing.




Copyright 1995-2010 Rob Brooks-Bilson. All rights reserved.
Aura skin for Raymond Camden's BlogCFC inspired by Joe Rinehart & Steven Erat. This blog is running version 5.9.004.