Adobe AIR article

Developing on Adobe AIR with Aptana Studio

Setting up your application

To help you understand and appreciate the various features of the Adobe AIR plug-in for Aptana Studio I'll show you how to build a simple sample application, a local file system browser, using jQuery and the Google Chart API. This application blends local data with remote services and can run cross-platform and will enable users to delete items, move them to the trash, and also generate a pie chart of the file size breakdown for the contents of any folder—all this in roughly 100 lines of JavaScript.

To get started, download and install Aptana Studio and the Aptana Studio plug-in for Adobe AIR if you haven't done so already. Launch Aptana Studio and select File > New > Project to create a new Adobe AIR project in your workspace. You will see the Adobe AIR project under the Aptana Projects category.

Aptana Studio uses projects as the container for your application so each AIR project is essentially a new AIR application. The AIR project generates the necessary files for an Adobe AIR application and also configures Aptana Studio to run and export the application.

If you are looking to work from an existing application base you will want to explore the samples included in Aptana Studio (see Figure 1). These samples highlight various types of AIR applications as well as demonstrate user interface options, examples of socket use, file access, and database access. You can preview these samples and interact with them and then decide to import then directly as a project.

Figure 1. Aptana Studio comes with many sample applications, ready for your use.

When you create a project, you are asked to configure the core pieces needed to build an AIR application (see Figure 2). You start by providing some basic information about your project, including the name, the name of your main HTML file (which includes your application), initial window style, application icons, and other application metadata.

Figure 2. You start by specifying your application settings.

Next, you choose the Ajax/JavaScript libraries you would like to include in your project. Aptana Studio bundles many of the popular libraries such as jQuery, Ext, Dojo, Spry, and MochiKit. One or more of these libraries can be added to your Adobe AIR project. For the file browser sample application, add jQuery to the project.

Note: Aptana Studio offers content assist, documentation, and diverse samples for each of these libraries, so leveraging them in your AIR application is practically effortless. When creating your project you can also choose to include security sandbox examples that highlight the options available to you when writing or using JavaScript code that will execute with certain restrictions. For more security-related information, refer to Lucas Adamski's article, Introducing the Adobe AIR security model.

The most important product generated during project creation is the application descriptor file (application.xml), which allows your web content to be run and bundled as a desktop application. This file configures all the options you have when running a desktop application, including the initial window size, look and feel, and window bar options. Generating this file manually can be a tedious and confusing process. However, when creating an Adobe AIR project inside Aptana Studio an application.xml is generated that can be run and deployed immediately. It includes the parameters set in the wizard and links your application descriptor to the main HTML file specified.

Note: Aptana Studio also includes an XML editor with syntax highlighting, outlining, and validation that can be used to further configure your application.xml file after your project has been created. Each Adobe AIR project also includes the AIRIntrospector, a JavaScript file that, when referenced in HTML files, offers DOM inspection, a JavaScript console, and XHR monitoring of running Adobe AIR applications.

Page 2 of 5

Previous Page

Next Page