Home >
1) To begin, you need to download Aptana Studio from here: http://www.aptana.com/studio/download. I chose the Standalone version. As much as I like the Eclipse platform, I've had bad luck with it over the past year so I've moved to having standalone versions of my favorite editors. (So for example, I use the standalone Flash Builder and the standalone ColdFusion Builder.) 2) Install the application and run it. After it starts up, you will be prompted to customize your Aptana Studio:
You want to select Ajax Libraries/jQuery Support and Desktop/Aptana Adobe AIR 1.5 Development. (And of course, if you use other frameworks as well now would be a good time to select them.) Click Install.
3) On the next screen, you have to check both checkboxes. That's kinda weird, but I guess the Eclipse platform wants to confirm you really want to install what you just said you wanted to install.
You will be given yet another screen of Install Details and then a screen asking you to accept the license terms. After all of this the install will finally begin. (And to be honest, I think all of these prompts are because of the Eclipse framework and not an Aptana problem. It sure is annoying though.)
4) Aptana will now download the bits for the jQuery/AIR support. When it gets done, let it restart. Now for the part that I'm unsure of. Aptana Studio said it needed to install Adobe Studio Professional AIR. However, on the license terms it said it was a 30 day trial. I said no to this. I'm not sure that was the right decision, but my later tests proved I was able to develop AIR applications. So for now, I say to click No on this option. (And you might as well hit the checkbox to hide the message.
5) Woot! You're done. Now to test AIR support. If the Projects tab isn't selected on the left hand side, select it. Right click and select New, and then Other. Under Aptana Projects, select Adobe AIR Project. I'm not sure why it isn't in the main New menu.
6) For Project name, just pick anything. I did jqAIR1. Leave everything else alone and click Next.
7) On the Application XML Properties page, leave everything alone and click Next.
8) On the Additional Application XML Properties page, also leave everything alone.
9) On the Import AIR Frameworks page, ditto - just leave it be and click Next.
10) Yeah! Something to do! On the Import JavaScript Library panel, select jQuery 1.3 and then hit Finish.
At this point, you have an AIR application with some default HTML in place. Unfortunately, every time you create a new AIR application with Aptana, it litters the project with a bunch of junk. Ok, not everything is junk, but there is no option (as far as I know) to not include all the samples. Outside of the icons and lib folder, there are at least 4 files that are put there by default that you will probably not need on most projects: jquery_sample.html, jquery_sample.js, LocalFile.txt, sample.css. For now though leave them be.
Let's confirm things work by clicking the green run button on top (it has a white arrow pointing to the right). If everything works right, Aptana will use the AIR SDK to compile and run your application.
Again, woot! But let's actually use a bit of jQuery. The default file for the application is jqAIR1.html. This was based off the application name I used so if you have something different, your file will have a different name. Create a new file called jqtest.html. I modified the original file to be more jQuery-alicioous:
<html>
<head>
<title>jQuery Sample</title>
<link href="sample.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="lib/air/AIRAliases.js"></script>
<script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#myButton").click(function() {
var f = air.File.applicationDirectory.resolvePath("LocalFile.txt");
var fs = new air.FileStream();
fs.open(f, air.FileMode.READ);
var content = fs.readUTFBytes(fs.bytesAvailable);
fs.close();
$("#contents").text(content)
})
})
</script>
</head>
<body>
<h3>jQuery Sample</h3>
<input type="button" id="myButton" value="Click Me">
<div id="contents"></div>
</body>
</html>
Without going into too much detail on the AIR API itself - this modified version uses jQuery to bind to the myButton form element. When clicked, it loads in the file LocalFile.txt and stuffs the text into the contents div.
To actually run this though we have to modify the descriptor file for the application. Double click application.xml and open it up. Find this block:
<initialWindow>
<!-- The main HTML file of the application. Required. -->
<content>jqAIR1.html</content>
Notice that the file name for the application is specified here. Change it to jqtest.html. Now if you hit the green run button again you should see the newer version of the application.
All in all a rather simple process. My biggest complaint is the lack of a 'clean' project creation, but it won't take more than a few seconds to remove those files on project creation.
More in This Series
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
Thanks Ray!
Can this AIR app be dumped in a CF site and then change the jqAIR1.html to a *.cfm file?
AIR is a client side technology. It can certainly _talk_ to a server (via AMF, HTTP, etc) and can certainly talk to CF, but the actual implementation is done in either HTML or Flex. So CF doesn't come into the picture at that juncture. Make sense?
Yeah that makes sense. I guess you can start thinking of CF on the server-side to receive HTTP calls that you can then use to update the client-side HTML DOM elements.
Actually you would use Flash Remoting, which is Binary, and faster then straight HTTP. I'm obviously biased, but ColdFusion is a damn good "glue" for things like Flex, AIR, and jQuery. It has incredible support for working with them.
I finally tried Aptana because of your post. My first reaction is that it's ok but I've only scratched the surface I suppose.
I easily took an old html-based AIR project of mine and got it up and running in Aptana. Much easier than creating batch files for the command line SDK I admit.
But I was hoping for code hinting for jQuery of which I can't seem to get working.