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.