Introduction

If you are new to Developing in Adobe AIR, we've provided a sample "Application" to ensure you get going in the right direction. Once you've downloaded the appropriate files (see the QuickStart guide for instructions), read this small tutorial for making your first AIR-powered application

Project Setup

An AIR project is entirely self-contained, and call live anywhere on your filesystem. In development, the root folder is your "application sandbox" - the area which you will have unrestricted access to your modules and code.

Create a folder somewhere, and in it place the dAIR code in some sub-directory. In the SDK download, this directory is named js/ ... You should have a tree that looks like:

myProject/
  js/
    dojo/
      dojo.js
    dijit/
    dojox/
    dair/
      Application.js

Now the project libraries are in place (Dojo + dAIR), you will need an Application descriptor, which acts as the bootstrap to the AIR interface. This is a small .xml file, and is to be placed in the root of your project. Name it myApplication.xml, and paste the following code:

<?xml version="1.0" encoding="utf-8" ?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
	<id>dair.sample.app</id>
	<filename>myApplication</filename>
	<initialWindow>
		<content>myApplication.html</content>
		<visible>true</visible>
		<systemChrome>none</systemChrome>
		<transparent>true</transparent>
		<width>200</width>
		<height>150</height>
		<resizable>true</resizable>
	</initialWindow>
	<icon>
		<image16x16>icons/icon16.png</image16x16>
		<image32x32>icons/icon32.png</image32x32>
		<image48x48>icons/icon48.png</image48x48>
		<image128x128>icons/icon128.png</image128x128> 
	</icon>
</application>

This tells the AIR Runtime to load the contents of myApplication.html as the initial window. The initialWindow block describes all these settings. Here, we're setting the systemChrome to none, and transparent to true in order to hide this initial window while starting. We will begin adding windows with real content shortly.

You may optionally create icons of various sizes, which will act as the dock/systray icon for you application when it is running. These are optional, and can later be modified by using dair.Icon.

A First Window

The content directive of the Application descriptor points to the first window AIR will attempt to load. These are standard HTML/JS/Dojo pages, and work as you would expect when developing in a browser. Create the myApplication.html file, and place it in the root of your project. (You can place it anywhere, just be sure the .xml points to the correct relative location of the html file)

<html>
<head>
   <title>My First AIR Application</title>
   <script src="js/dojo/dojo.js"></script>
   <script>
       dojo.require("dair.AIR");
       dojo.require("dair.Application");
       dojo.require("dair.Window");

       var app;
       dojo.addOnLoad(function(){
            // first bootstrap to run:
            app = new dair.Application({});
       });
   </script>
</head>
<body></body>
</html>

This acts as your "Application Window", and will control any subsequent Windows being created. All windows and code should be created and loaded through this HTML page.

You can add a new first window creating a dair.Window, and adding it to the application: Include the following code in your addOnLoad function:

var firstPage = new dair.Window({
   // a url to point to. could be local, too.
   href:"http://sitepen.com/labs/dair/",
   // must specify a size for the window. 
   // optionally set a t/l as well
   size: { h:"50%", w:990 }
});
app.addWindow(firstPage);
// center it in the viewport
firstPage.center();

Starting the Application

Now that the project has been setup, execute your application by using Adobe's adl program, included in the Adobe AIR SDK.

#myProject$ adl ./myApplication.xml

Assuming the program adl is in your PATH, everything should run as expected. A default window will be placed in the center of the screen, occupying 50% of the vertical space of the desktop, and be 990 pixels wide.

That's all there is to it! It can just grow from here. Create a local page, and point the first window's href to that location. Compartmentalize the pages inside your application sandbox, and communicate through the Application window.

Download

If you don't feel like copy/pasting, we've packaged up this "Getting Started" application. Simply add the dojo/, dijit/, dojox/, and dair/ folders to the folder, and install the AIR SDK.

Comment by makad...@gmail.com, Dec 17, 2008

I'm getting this error:

C:\dair-0.1.0-SDK>adl File.xml Error: Could not load 'dair.File'; last tried '../dair/File.js'

at app:/js/dojo/dojo.js : 16

undefined at app:/tests/File.html : 25

Comment by rek...@gmail.com, Jul 2, 2010

kjkkkkkkkk

► Sign in to add a comment