Adobe AIR article

Adobe AIR and Dreamweaver for JavaScript developers

Setting up Dreamweaver for AIR

One of the easiest ways to get started with AIR development is to install the Adobe AIR Extension for Dreamweaver CS3.

Installing the required items

If you have done so, install the AIR runtime referenced on the introductory page of this article. This will enable you to follow along with the samples presented in this tutorial.

You also have to install the Adobe AIR Extension for Dreamweaver CS3. This extension enables you to build, test, and deploy AIR applications from within Dreamweaver. After you have downloaded this extensions, double-click it. This should bring up the Adobe Extension Manager. If you have previously installed any of the AIR extensions for Dreamweaver CS3, it might inform you that you will be writing over some files. Since you are installing the latest version of this extension, writing over older files should not be a problem.

The Dreamweaver AIR workflow

The installation of the AIR extension does not bring any immediate changes to the Dreamweaver layout. You can confirm that the installation succeeded by selecting the Commands item from the menu bar. You should now see two additional options: AIR Applications Settings and Create AIR File. If you are on a Windows machine, the menu should look like Figure 1.

Figure 1. The Site menu in Dreamweaver CS3

After you have verified your installation, you can commence building your first AIR application. Although this task may seem a bit daunting at first, you will soon see that Dreamweaver takes care of most of the configuration for you.

AIR application settings

One major difference between a web application and a desktop application is the configuration. For a desktop application there are several new questions that must be answered. How big should the application be? What should the window look like? Where should it be positioned on the screen? What should the program icons look like? There are many more questions just like this that need to be answered before your application can be packaged and sent to the user.

In AIR these configuration items are handled by an XML file called the application descriptor file. A simple application descriptor file can be seen below:

<?xml version="1.0" encoding="utf-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
  <filename>SampleApplication</filename>
  <copyright>2007 DavidTucker.net</copyright>
  <customUpdateUI>false</customUpdateUI>
  <name>Sample Application</name>
  <id>net.davidtucker.air.SampleApplication</id>
  <version>1</version>
  <initialWindow>
    <content>index.html</content>
    <height>500</height>
    <width>500</width>
    <systemChrome>standard</systemChrome>
    <transparent>false</transparent>
    <visible>true</visible>
  </initialWindow>
</application>

You can see that many of the questions that you have to ask yourself are answered in this short file. For example, the width and height of the application are defined inside of the tag <initialWindow> along with other properties that relate to the main window of the application. A full application descriptor file is much longer than this and includes options for custom program icons, window positioning, and custom file types.

It might seem a bit cumbersome to create one of these files for every AIR application that you develop, but Dreamweaver makes the creation of the application descriptor file easy. If you have a site open in Dreamweaver CS3, you can click the AIR Application Settings item under the Command menu. This should bring up the window shown in Figure 2.

Figure 2. The AIR Application and Installer Settings dialog box in Dreamweaver CS3

Many of these settings can be left on their default values, but you need to be sure to change the ID and Name values for each of your AIR projects. The ID is a unique value that is used to differentiate your application from other AIR applications even if they have the same name. Many developers use reverse-dns format for their ID. For example, my domain is davidtucker.net, so I would make the ID of my application net.davidtucker.SampleApplication. If developers follow this practice, it will almost eliminate the possibility of having applications with duplicate IDs.

The ID is also extremely important when it comes to distributing and updating your application. You will learn more about this in a later section. However, it is important to know that your ID should be set when your application is created, and it should not be changed. If it is changed, you could lose your ability to use things like the update framework inside of Adobe AIR.

Creating an AIR application

Now that the preliminary items are taken care of you might be ready to drop in one of your web applications into Adobe AIR to see how things run. To accomplish this inside of Dreamweaver, you first need to create a new Site for your project. Inside of the exercise files that accompany this article you will find a folder titled Sample Application Template. Go ahead and drop all four of these files into your site folder.

Next, select Site > AIR Application and Installer Settings. Be sure that all four files are listed in the Included Files section of this dialog box (as displayed in Figure 3). If any of them are absent from this list, you can add them by clicking the plus symbol and selecting the file.

Figure 3. Including files in an AIR application with Dreamweaver CS3

Once that is complete, select the Preview button. Congratulations, you just tested your first AIR application in Dreamweaver CS3. There is still one more area that must be examined before this application could be packaged and deployed—security.

Page 2 of 5

Previous Page

Next Page