jQuery and AIR: Creating a new AIR project in Aptana
at: 10:09 PM | Filed under: AIR, jQuery, video
I'm going to start a new series here, titled jQuery and AIR. The goal is to disseminate as much information about JavaScript powered AIR applications as possible. If you're here, then you're already aware that the lion's share of information about AIR relate directly to Flex. While some of the code can be instructive for JavaScript developers, it's by no means a 1 for 1 translation. I aim to change that. By the way, these example require either Aptana Studio, or the Aptana plugin for Eclipse 3.2 or 3.3, with AIR support. Both of these apps are available for free.
Let's get started by walking through how to create a new AIR project in Aptana. You can use the HTML walkthrough below, or view the screencast of the same process by clicking the "watch video" icon above (might be a good idea to maximize your browser window first).
-
Start by opening Eclipse/Aptana Studio and making sure you're in the Aptana perspective.
-
From the File menu, select New > Project
-
Type the word AIR into the text box at the top of the next screen. Click the words "Adobe AIR Project", then click Next.
-
The next dialog shown is the true beginning of your AIR project creation.
- Type in your desired Project name into the box at the top
- Depending on where you store your projects, leave the default location alone, or fill it in with the location of your Eclipse workspace.
- Main HTML file is simply the first page that will be loaded by your AIR application. Name it whatever you like
- Leave Application sandbox unchecked as none of the examples we'll be working with require anything different
- Ignore the Jaxer portion of this box
- Click Next
-
One of the beautiful things about the new AIR project wizard in Aptana is that almost every attribute that can be set in the Application.xml file can also be set in the wizard.
- The ID attribute is what your computer will call your application internally. I recommend changing this to the same name as your application. If your app is called Fire & Forget, then the ID should also be Fire & Forget
- Name: the name of your application.
- Filename: the name of the executable for your application
- Version: the curent version of your application
- The last 4 input fields relate to the icon for your application. Aptana gives you an icon to start with. Change this as desired.
-
This next dialog allows you to set defaults for the appearance of your application.
- Window style: will your app use standard OS chrome, or custom chrome with transparency
- Sizing options: Will your app be resizeable, minimizable, or maximizable. Warning, if you uncheck these options, good user interface design dictates that you, the developer, provide custom alternatives
- Dimension options:
- Window width: the initial width and height of your application
- Initial X & Y position: where your app will be located when it loads the first time.
note that these values can be overridden as part of your application development - Minimum/maximum width: the smallest/largest values to which your app can be resized
-
The AIR SDK offer several very useful frameworks for application development. This next screen allows you to automatically have Aptana add the selected frameworks into your application directory.
-
Finally, Aptana ships with recent versions of most popular JavaScript libraries. We'll be focusing on jQuery of course.
-
Click the finish button and, based on your choices, you should see something like this in your Project window.
- Great job, you just created your first AIR project! Stay tuned for more posts in this series.
Thanks Andy, This simple step by step post of yours just showed me how simple it is to use jquery in AIR apps. So now I have this desire to learn more about building AIR apps :) Thanks again...
Andy, Awesome post. Good work. I have been doing a lot with AIR and jQuery lately and I will look forward to learning more. Just a note: You mention that you need Eclipse 3.2 or 3.3 with the Aptana plugin. I am actually using it with Eclipse 3.4 without issue. I just want to make sure that nobody dismisses trying this out because they are using Ganymede. Everyone should try this out.
Andy - If your already pretty familiar with Flex/AS is there any reason to create an AIR app using html/js? Just curious.
Dan... I think the most compelling reason to choose AIR over Flex would be code reuse. There's plenty of "web apps" out there which could probably be converted to AIR applications with minimal dev time.
I just want to add aptana , standalone or as eclipse plugin, works fine under windows and linux, and can build air aplications very well. I hope you can show us tricks to mange the ajax methods in Air Api with jquery. great post!
Flavio, thanks for posting. I will indeed be covering remote access calls via AIR. In fact, you can get a sneak preview by checking out a presentation I gave at a recent conference in Minneapolis. Here's a link to just the slides, but you can also download the entire presentation, including sample files. Stay tuned for more articles in this series.
Woohoo! I just followed these instructions. Very easy. I just got a little giddy when the default code actually ran :) I know, I know, silly, but awesome.
That's SUPER gratifying when code provided in a blog post, or article, runs as advertised. Glad this helped you out Ben.
I like how no one noticed the bolt icon. ;)
I wish to be one of you. But I have problem already at step 3. I have not any Adobe AIR project there. I have Default Web Project. Shall I continue wit it?