Adobe AIR development (from a rusty developer)


Platforms such as Adobe AIR are making the Operating System less important; as I articulated previously in "Operating Systems are becoming less important to Consumers". I decided to have a bit of a play to see how easy it was to build an Adobe AIR application.

Getting the basics going

My first stop was the very useful Adobe AIR Developer Center, which contains lots of really good information (docs, videos, downloads, ...). I had already noted from a previous search that Aptana Studio (which I had installed) had an Adobe AIR plugin, so I installed that directly from the tool. That was nice and easy and I therefore had a working IDE up and running in minutes.

Information about the features of the Adobe AIR plugin for Aptana Studio can be found here.

I simply started a new Project, went with all the standard defaults, including the incorporation of a Sandbox application. Once the Project was created, I clicked the Play button in Aptana and it worked fine. It was just too easy.

I then decided that I would like this mini app to run stand-alone in Adobe AIR, so simply chosen the Export to Adobe AIR package menu item which then packaged up the application into a .AIR installation file. I then ran the .AIR file and it installed without a problem, prompting where to install and where to put Shortcut links. Nice, and it worked too!

I was not honestly expecting for it to work so easily, without having to tinker around with the IDE a bit or find a missing library. It was a pleasant surprise.

Now for something a little bit more useful

Once I had the absolute basics under control, I decided I would try and pull a JSON (JavaScript Object Notation) feed from the Blogger Data API and format it nicely. I found some code for this very task here (also snippets included below). The URL I invoked was of the form:
http://blogname.blogspot.com/feeds/posts/default?alt=json-in-script&callback=myFunc

where blogname is the blog you want to retrieve, and myFunc is the name of your callback function that is passed the JSON object.
I copied the code into my main HTML page from the Adobe AIR sample, and found that whilst I could populate information into a tag and display it on the screen (see the "Loading" part below), that for some reason I could not display the resulting feed that was returned through invoking the API (see "Retrieve" part below). I don't know whether there is some limitation of Adobe AIR I don't know about or whether it was due to the way I was trying to do it. For some reason the callback of listEntries was not being called. Using callback functions allows you get around some of the cross-domain security issues you might encounter in typical client side JavaScript, hence I was keen to get this working.
// Show a "Loading..." indicator.
var div = document.getElementById('data');
var p = document.createElement('p');
p.appendChild(document.createTextNode('Loading...'));
div.appendChild(p);

// Retrieve the JSON feed.
var script = document.createElement('script');
script.setAttribute('src', 'http://' + query + '.blogspot.com/feeds/posts' +
'/default?alt=json-in-script&callback=listEntries');
script.setAttribute('id', 'jsonScript');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
On the positive side, this did however give me the opportunity to use some of the debugging capabilities built into Adobe AIR. By simply adding the following line to my main HTML file, this enabled me to hit F12 when the application was running to bring up the introspector:
The Introspector is a very useful tool for seeing the value of DOM properties and functions in a tree view, running console commands, changing values, and lots of other stuff. Through this I was able to manually invoke the listEntries callback and it worked nicely.

This example also demonstrated the use of a dropdown list, and this functionality worked exactly as per standard HTML.

Summary

Adobe AIR appears fairly simple to develop for and to create installation packages, and if you know how to do JavaScript you're 95% there. There may be a few quirky bits that you need to learn of what doesn't work, but this may simply be due to me doing something wrong. Aptana Studio also seems to be a suitable IDE to use for Adobe AIR development. All in all, it is definitely a platform I am considering playing around with a lot more.

Comments

  1. Hi Simon,

    I'm glad you liked Adobe AIR and the quick start-up time using Aptana.

    The issue you pointed out is in fact a security restriction applied to what Adobe calls "Application Sandbox" - that's content from the installed application directory. You cannot import scripts that are coming from remote servers into the application sandbox content. Given that this is a desktop application you cannot allow remote javascript to execute on your desktop, giving access to file system and other resources.
    You can read more on this chapter3 from "AIR JavaScript Pocket Guide" http://www.tostring.org/books/adobe-air-for-javascript-developers-pocketguide/1.0/en/working-with-javascript-and-html-within-adobe-air/ - check Security Model section.

    However, as lots of services are JSON based we allow you to pull in only pure JSON strings, like http://blogname.blogspot.com/feeds/posts/default?alt=json

    As AIR Application Sandbox allows cross domain XHR, you can do a XHR call to that JSON url, get the string and have an eval on it (eval only works with JSON strings), then get the resulted object and populate your list with it.

    I hope this helps you,
    Best regards,
    Dragos Georgita | Adobe AIR Engineering

    ReplyDelete
  2. Thanks Dragos for your very useful comments and great customer service!

    ReplyDelete

Post a Comment

Popular posts from this blog

IT & Enterprise Architecture Conference 2015 - Day 2

Using Raspberry Pi as a Time Capsule to backup a Mac

Considerations when responding to an RFI or RFP (a view from the receiving end)