Accessibility

Adobe AIR article

 

Building a common desktop application on AIR in Dreamweaver CS3


Table of Contents

  1. Introduction
  2. Starting off
  3. Building and styling the user interface
  4. Adding interactivity
  5. Specifying the AIR application and installer settings
  6. Debugging and packaging the application

Starting off

Note: Be sure to download and install the Adobe AIR runtime and the Adobe AIR Extension for Dreamweaver CS3 before you start this project.

As is the case with most development environments, you begin by defining your project. In Dreamweaver, this means you create a new site for your AIR project.

Note: The samples ZIP file that accompanies this article includes the finished site files and assets for this project as well as the finished AIR application (todoit.air). You can import the finished site (to_do_list) files into Dreamweaver if you want to follow along with this tutorial without creating the files from scratch.

  1. Start Dreamweaver and select Site > Manage Sites to open the Manage Sites dialog box.
  2. Click the New button and select Site. The Site Definition dialog box appears.
  3. Specify a name for your site project (for example, to_do_list).
  4. Specify the Local root folder. Click the folder icon beside the input text box to browse your system for a folder.
  5. Click OK to close the dialog box. Click Done in the Manage Sites dialog box.

The next step is to create the user interface using a default HTML document. Later, you need to configure the AIR project, but I find it is quicker to create the default HTML document first.

To create a standard HTML document for the application's user interface, choose File > New > Basic Page > HTML, and then click Create to edit the document. Select File > Save and specify the file name for the document. This is the default interface that will be used when the application opens.

I named the default document ui.html, but you can name it anything you want. This document will be the first (and likely only) document that AIR loads for your application.

Here is the basic HTML structure for the project:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>To Do List</title>
  <link type="text/css" href="todo.css" rel="stylesheet" />
  <script type="text/javascript" src="assets/AIRAliases.js"></script>
  
  <script type="text/javascript" src="assets/todo.js"></script>
  </head>
  
  <body>
  
  
  
  </body>
  </html>

Starting with the default HTML, you add the title (To Do List) and link in the resources needed by the application; for this application, you use the following three resources: 

<link type="text/css" href="todo.css" rel="stylesheet" />
<script type="text/javascript" src="assets/AIRAliases.js"></script>
<script type="text/javascript" src="assets/todo.js"></script>

The todo.css style sheet controls the look and feel of the application as well as basic feedback such as changing colors when moving the mouse over a button. The todo.js file provides the interactive portion of your application, including responding to events, handling files, and working with data internally. The AIRAliases.js file is provided by Adobe to allow shortcuts to most of the AIR API. This will save you time in typing out long object names.

Note: You can find the todo.css and todo.js files in the assets folder of the to_do_list site sample files. The AIRAliases.js file is included with Adobe AIR Extension for Dreamweaver CS3—it will be automatically generated when you create an Adobe AIR project in Dreamweaver CS3.

Page 2 of 6
Previous Page
Next Page