Simple AIR Demo - Yahoo Traffic

Don't ask me why I'm so obsessed with Yahoo's APIs - maybe because they are so darn easy when compared to Google or UPS. It's almost as if Google went out of their way to make an API that would be a pain in the rear to use - whereas Yahoo's services are a model of simplicity. Well, most of the time anyway.

Today I worked on a new HTML based AIR demo that works with Yahoo's Traffic service API. It is rather simple. Enter a zip code and it will give you a traffic report. Yahoo's data isn't too intensive, but any major city should have data. (-sigh-, not good old Lafayette, LA) The code is rather simple. The form calls loadData which does this:

function loadData() { var zipfield = document.getElementById('zip'); var zip = zipfield.value; zipfield.disabled=true; Spry.Utils.loadURL("GET", baseurl + "&zip="+zip, true, trafficHandler, {errorCallback:errorHandler});

As you can see - I'm using Spry. Handling the result is really simply a matter of working with the XML. Spry provides a nice documentToObject function which lets me translate the XML response into an object:

var xmlresult = Spry.XML.documentToObject(Spry.Utils.stringToXMLDoc(result));

I then grabbed the results:

var trafficResults = xmlresult.ResultSet._getPropertyAsArray("Result");

And looped over them. Here is the main code used to process the results:

if(trafficResults.length > 0) { resultHTML = "<table border=1><tr><th>Type</th><th>Problem</th></tr>"; for(var i=0; i < trafficResults.length; i++) { var resultOb = trafficResults[i]; var type = resultOb["@type"]; var title= resultOb.Title["#text"]; var description = resultOb.Description["#text"]; var imgurl = resultOb.ImageUrl["#text"]; resultHTML+= "<tr><td>" + type + "</td><td>" + title + "</td></tr>"; //resultHTML += "<tr><td colspan=2>" + description + " <a href='" + imgurl + "' target='_new'>[Map]</a></td></tr>"; resultHTML += "<tr><td colspan=2>" + description + "</td></tr>"; } resultHTML += "</table>"; } else { resultHTML = "Sorry, but no results were returned for your zip code."; }

The result isn't terribly pretty. But it works. Here are some issues I ran into that I'd love to get some advice on.

  • First off - it is really difficult to debug JavaScript errors. I'm used to Firebug and having a nice UI to view my JavaScript errors. When I tested with AIR, I never saw an error. I'm assuming the embedded browser just swallowed them. I know JavaScript allows for a global error handler, so in the future I'll have to look into that. I could have also built a prototype that did not hit Yahoo and simply loaded the XML locally.
  • For some reason, I couldn't open a new window and point it to the image URL returned from Yahoo. When I tried, I got a popup window with the remote image spit out as text. I'm assuming this is a dumb error on my side.

Lastly - I can't recommend Aptana enough. The AIR Eclipse plugin I reviewed here made the development very easy. My only problem was the JavaScript issues described above. The actual build process (edit/run/etc) was incredibly simple.

Source and AIR file included in the zip attached to the blog entry.

Download attached file.

Like This?

If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can also subscribe to the email feed to get notified of new posts.