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.
Thankfully, it’s pretty simple – once you wade through some of the documentation and find the section on creating a first application. Their example puts a div on a page and, when the application is started, pushes new content from a text file into that div. I opted for something a little bit more interesting and used something a little more handy than just regular Javascript – jQuery. There’s two choices for developers to go with – one for people already working with Flex and the other that I think most developers will follow, using HTML and Javascript (my path).
Construction of the application is surprisingly simple and consists of only three required files – a Javascript library they include in the SDK, the HTML file for the application to render and an XML configuration file to handle the application metadata. I wanted to do something more fun than their example, so I decided to go with a feed reader. It’s nothing big and it can only really real with RSS files (it should at least), but it is a pretty good example of how to get started.
First, we’ll look at the configuration file:
My Simple Feed Reader
feedReader.html
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:
My Simple Feed Reader
function appLoad(){
$.ajax({
type: "GET",
url: "phpfeed.rss",
dataType: 'xml',
success: function(msg){
$('item/title',msg).each(function(k,v){
$('#mytbdy').append('<tr><td>> '+v.childNodes[0].nodeValue+'</td></tr>');
});
}
});
}
body { font-family: verdana, arial, helvetica; }
td { font-size: 10px; }
#titlebar {
font-size: 15px;
font-weight: bold;
background-color: #6D66FF;
color: #FFFFFF;
padding: 3px;
}
<div id="titlebar">FeedReader</div>
<table cellpadding="2" cellspacing="0" border="0">
<tbody id="mytbdy">
</tbody>
</table>
The HTML Document
This code is saved in feedReader.html and shows how to create the simple listing of titles from our RSS feed text file and print them to the application’s main window. This is where some of the real power of the AIR functionality comes into play. If you loaded this page up in a normal browser it would (almost) work perfectly. Web developers used to working with Javascript and HTML can pick this stuff up super-fast. I decided to use the jQuery library to help make things a little simpler (plus it’s one of my new toys coming from working with script.aculo.us/prototype and wanting something different).
Javascript & Parsing XML with jQuery
The Javascript uses jQuery’s Ajax functionality to pull in the file (no cross-domain requests so we’re limited to a local file) and run through it, parsing out the information in the title tags for each entry. In this example, the RSS is the feed pulled from the PHP.net website in the standard RSS format. jQuery uses a little XPath-ish magic and appends new table rows to the tbody of the table in the HTML below. The key to all of this, though, is in the body tag – the onLoad property. The AIR interface picks this up and executes our code automatically (inside of “appLoad”) so we don’t have to do a thing. Of course, in more advanced applications, you might not need this in favor of clickable items that fire off Javascript events.
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:
/path/to/sdk_dir/bin/adl.exe /path/to/feedReader-app.xml
This will run the debugger against your code and error out if there’s an issue with the code. Unfortunately, in my experience, it only errors when there’s an application problem – not a problem with the code inside the app (like a Javascript error). There’s probably a way to turn this on, but I haven’t looked into it yet.
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.
blog.phpdev 