jQuery and AIR: Creating a new AIR project in Aptana

andyMatthews.net

jQuery and AIR: Creating a new AIR project in Aptana

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.
1. Type in your desired Project name into the box at the top
2. Depending on where you store your projects, leave the default location alone, or fill it in with the location of your Eclipse workspace.
3. Main HTML file is simply the first page that will be loaded by your AIR application. Name it whatever you like
4. Leave Application sandbox unchecked as none of the examples we'll be working with require anything different
5. Ignore the Jaxer portion of this box
6. 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.
1. 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
2. Name: the name of your application.
3. Filename: the name of the executable for your application
4. Version: the curent version of your application
5. 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.
1. Window style: will your app use standard OS chrome, or custom chrome with transparency
2. 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
3. Dimension options:
  1. Window width: the initial width and height of your application
  2. 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
  3. 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.