Spurred on by some recent news and by the big push that Adobe is trying to make for PHP developers to get into Flex, I decided to try my hand at their newer (new to me anyway) offering, AIR the Adobe Integrated Runtime environment. The basic idea behind it is to allow web developers, without much more than the skills they already have, to make full desktop applications any user with the AIR runtime installed can use.
First, we’ll look at the configuration file:
< ?xml version="1.0" encoding="UTF-8"?> <application appId="samples.feedReader" xmlns="http://ns.adobe.com/air/application/1.0.M4" version="1.0"> <name>My Simple Feed Reader</name> <rootcontent systemChrome="standard" visible="true" width="400" height="200">feedReader.html</rootcontent> </application>
The XML Configuration File
The XML here is pretty simple but lets go through each line. The application container holds all of the settings for our simple app, both in the attributes and in the inner tags. The appId (capitalization is important here, as I found out later) parameter lets us give the application a unique name. In my case, I just gave it something simple that applied to the project. It doesn’t have to match up with anything else in the project. The next two parameters define the namespace and the version for the application. Inside of that, you can define a name for the application, something a bit more user-friendly and the look/feel of the app’s window (in rootContent – Note: for some reason the code highlighting plugin I’m using makes rootContent all lower case, but it needs to be mixed case for things to work). Ours just uses the standard “chrome” for whatever OS it’s on and defines the window as visible with a height/width of 400/200. Inside of the rootContent tag is the filename for the HTML file we’re linking this XML data to, the one that we’ll look at next:
The HTML Document
Styling with CSS
Because the application is more or less a glorified HTML document, we can use CSS to style it. You’ll see that we styled things simply – the div up top to look like a header and some font styles and padding to make things look a little cleaner.
Building and Launching the Application
Having all the files is all well and good, but to make use of them we need two more steps – packaging the application and running it. Of course, you’ll need to have the AIR runtime installed to make the execution work, but you’ll also need the Adobe AIR SDK to compile the application into something usable.
Download the ZIP file and unpack it someplace useful so that we can get started. First, we’re going to test the application with a utility that’s a part of the SDK – adl:
When that’s all well and good and passing tests with flying colors, we’re off to the last step of our little sample application – compiling the files into a package that can be shared and executed on any platform using the AIR runtime (you need to be in your project’s folder for this part to work without specifying paths for everything – it’s just simpler):
/path/to/sdk_dir/bin/adt.bat -package feedReader.air feedReader-app.xml feedReader.html AIRAliases.js jquery.js phpfeed.rss
If all goes well, you should end up with a neat little AIR package sitting in your directory that you can double click on and get the feedReader.air file in your working directory. Now, if you double click it, you’ll get this notification:
Click through to install it and you should now be able to run it with this as a result:
Wrapping it Up
Of course, this is by no means a complete tutorial on working with the AIR runtime – there’s tons more functionality and information out there on developing web-distributed desktop applications. Check out Adobe’s Adobe Labs section for AIR for lots of guides and other information.
I’m going to mess with things a bit more and see if I can figure out how to get the application talking to a PHP backend (that’s not on the local machine), so stay tuned for a second part to this tutorial. Oh, and please let me know if there’s anything in here that’s not working or doesn’t make too much sense – I know it’s a lot of information.