I decided today to give up on Aptana for writing HTML Adobe AIR applications. With the latest version of Aptana not supporting it, and with me recently discovering how good Dreamweaver CS5.5 is for JavaScript development, I figured I'd take a look at what it's like. It isn't quite as powerful as what I saw in Aptana 2, but it's not bad. Here's the process with some screen shots to make it a bit clearer.
First - you need to add support for Adobe AIR via a plugin. The plugin can be downloaded here: Tools for AIR and JavaScript The download is a "mxp" file which is the standard for DW plugins. On my system running the file automatically loaded the plugin manager and from that moment on I just had to click a few times to get it installed. Be sure to restart Dreamweaver.
Now here is where I got confused. I was certain AIR would be an option under the New menu. Nope. Instead, AIR is a per site setting. Thanks to the Adobe docs (Create your first HTML-based AIR application with Dreamweaver - note that that link is for AIR 1.5 - there is probably a link for the newer version but I don't think the actual process in DW has changed). So basically - you would make a new site and then simply configure the AIR settings.
Note that the settings menu is also where you generate the AIR file to ship. If you want to run the AIR file while testing, you use the Preview/Debug in Browser icon:
By the way, the ugly red circle is my awesome attempt at making it clear what icon I meant.
So in general - that's it. One big thing that Aptana does much better is the inclusion of the AIRAliases.js file. I had to manually copy that from the AIR SDK folder. Once I did and included it within my HTML template DW did a darn good job with autocomplete and hinting. I was also very surprised to see that DW supported displaying air.trace statements. It shows up in a panel called "Site Reports" which seems oddly named. Here's an example where I traced the word "ran":
All in all, not so bad. I wish the test operation was one click instead of two. I can see that getting a bit annoying as you work. I also wish there was an easier way to 'install' JavaScript files like the aliases file or even jQuery. Any other DW users out there doing HTML AIR development?
Archived Comments
I've played around with it a bit in Dreamweaver CS4. One gotcha I ran into was, remote JavaScript files don't work
What do you mean? Cuz that sounds more like an AIR restriction. Show me exactly what you were trying to do.
For a simple example. The following does not work with the two remote JavaScript files, but if I download and package them. It does.
<!doctype html>
<html>
<head>
<title>JQuery Cycle Plugin - Example Slideshow</title>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="jquery.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="cycle.js"></script>
<!-- initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<body>
<div class="slideshow">
<img src="http://cloud.github.com/dow..." width="200" height="200" />
<img src="http://cloud.github.com/dow..." width="200" height="200" />
<img src="http://cloud.github.com/dow..." width="200" height="200" />
<img src="http://cloud.github.com/dow..." width="200" height="200" />
<img src="http://cloud.github.com/dow..." width="200" height="200" />
</div>
</body>
</html>
AIR apps are meant to have their script files self contained. I think that is expected. (And probably preferred too for this example.)
Yeah. I realise that now. But it was initially a gotcha for me, and will no doubt be for others too. That's why I mentioned it
Ah, well, the "restrictions" of HTML/AIR are surprising to -everyone-. It still trips me up from time to time. Luckily it's easy enough to get around - especially once you wrap your head around the bridge concept.
What's the bridge concept?
HTML/AIR apps can make use of a bridge. In the bridge you use an IFRAME to contain content that is not locked down by the AIR security framework. Of course, the content in the iframe can't do air stuff. But you build connections between your top level frame and the iframe. These connections are just JS functions basically. It sounds overly complex and it really isn't once you get your head wrapped around it a bit.
Cool. Thanks for that
I used both, Dreamweaver CS4 and Aptana Studio 2, while developing AIR applications.
Are you sure its not possible to add AIR 2.7 SDK manually to Aptana? At least thats what i did with 2.6.
Also, while using Dreamweaver I experiences that there were some inconsistencies between the test/preview and the deployed versions. I don't know if something changed on that subject between CS4 and CS5.5, but the plugin probably stayed the same?! Correct me if I'm wrong, but as Aptana Studio is based on Eclipse it provides far better debugging possibilities (though I really miss advanced XHR debugging).
"Are you sure its not possible to add AIR 2.7 SDK manually to Aptana?" I meant Aptana 3, not Aptana 2. I believe the AIR Plugin for Aptana allowed for any SDK, but the plugin as a whole isn't supported in Aptana 3.
"Inconsistencies" - Odd. The debug there is the 'real' debug - Ie, the SDK debugger, so the fact that it's run from DW should not matter.
"Debug" - I got air.trace to work as I mentioned, but I didn't do any XHR debugging. For that I'd probably just use Charles.
Aptana - You absolutely true about Aptana 3. Ofc I'm using Aptana 2. Would be nice to see them reviving their AIR support.
Inconsistencies - I just tested Dreamweaver CS4 again and experienced two minor inconsistencies: -webkit-box-shadow doesn't work in preview (works in Aptana 2) and custom icons are not used in the task bar, instead the preview just uses the standard AIR icon. The latter problem also exists in Aptana 2.
If I remember it correctly webfonts also didn't work in the preview.
Debug - air.trace also works for me, but I haven't found possibilities like breakpoints or other types of debugging in Dreamweaver, yet. Please correct me if I'm wrong on that.
I'll take a look on Charles.. thanks for that hint!
Oh sorry - I missed the CS"4" ref there. No idea then. ;) To be honest, I didn't go "all the way" and make an installer to test to see if the end result was different. I'd just upgrade and see. ;)
Hi there
I have been playing with Dreamweaver and the Air extension for the first time recently, and was surprised how easily this works. Have been creating some great jQuery apps with it.
I am just having one problem. I can't seem to manage playing video in the AIR application. I have a Flash video player that I embed in my HTML. Once I export the AIR file and run it however, the video stops working. I can see my Flash embedded, but it only buffers and never plays.
Do you have any idea how I can resolve this? Would appreciate any insights you have on the matter.
I believe you have to create a window to run the SWF. I've seen that done before for video capture. Sorry - it's been a while.
@ Hanno. If you provide an email address. I will send you a copy of a simple Flash AIR application I made. You could then have a look through it and find out where you are going wrong.
Thanks Chris, that would be amazing. Please send it to my company mail at hanno.vandermerwe@espial.co.za.
THanks again
So do you need the Air sdk or just the runtime
I believe DW came with it. You can just download it though.