Native Drag and Drop in Adobe Air with example

In this tutorial I will teach you how to create a simple adobe air application with native drag and drop support using a file system manager as example, that can copy/move files dragged to/from the OS desktop.

What does it mean to create an application with native drag and drop support?
The standard drag & drop functionality provided in Adobe Flex only allows you to drag & drop interactive objects within the Flex application itself. However with Adobe Air, using the NativeDragManager allows you to drag & drop objects between the OS, or from other applications installed in your operating system and the Air app.

For example in Adobe Air you can create a simple mp3 player which accepts mp3 files dragged directly from the desktop into the mp3 player window. Or like in the example included you can create an adobe air app that copies files between the OS desktop and the air app window.

Native drag and drop, like the standard flex drag and drop is divided has 3 phases – initiation, dragging and dropping.

The initiation is when the user clicks on an interactive component while keeping the mouse button pressed. In this case the component that the user clicks on is the drag initiator. Any air component that supports dragging will handle either the mouseDown() or mouseMove() event to initiate the native drag & drop operation. The event handler will then create a Clipboard object which contains data related to the object being dragged. For example if you are dragging a file between two components, the Clipboard object will contain a reference to a File object. Once the Clipboard object is constructed the NativeDragManager.doDrag() method is called where the first argument is a reference to the object that initiated the drag, the second argument is the Clipboard object, the third argument is an optional drag image/proxy image that can be displayed while dragging the object on the screen(e.g. a semi-transparent version of the drag initiator).

In the Dragging stage the user moves the flex component across the screen up to the drop target. If you specify a drag proxy image, that is what is shown on the screen when dragging the component. If not specified a rectangle will be shown instead.

In the dropping stage when the component being dragged arrives to a potential drop target, a nativeDragEnter event is raised. The event handler that handles this event should check whether the Clipboard object contains data that is of an acceptable format.  If that’s the case then NativeDragManager.acceptDragDrop() is called indicating that the drop target is happy in accepting the dragged data.

If the user actually releases the mouse while hovering over a drop target and that target has accepted the drag object by invoking NativeDragManager.acceptDragDrop(), the nativeDragDrop event is dispatched. The event handler registered with this event then does what it is supposed to do, like copying a file from the desktop to a destination directory, or play an mp3 file.

Below is the source code for our Air File Manager with drag and drop support:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" width="1200" height="400">
<mx:Script>
<![CDATA[
import mx.events.DragEvent;
import mx.events.CloseEvent;
import mx.core.DragSource;
import mx.controls.Alert;
import mx.managers.DragManager;
import mx.core.UIComponent;
import mx.core.IUIComponent;
import mx.managers.CursorManager;
import flash.desktop.NativeDragManager;

/**
* This function handles the case where the user drags in an icon from the desktop
*
*/
private function handleNativeDragEnter(event:NativeDragEvent):void {

NativeDragManager.dropAction = NativeDragActions.COPY;
if(event.clipboard.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)){
NativeDragManager.acceptDragDrop(InteractiveObject(event.currentTarget)); //'this' is the receiving component
}

}

/**
* We signal the start of the drag
*
*/
private function handleMouseDown(event:MouseEvent):void {
var fs:FileSystemDataGrid =FileSystemDataGrid(event.currentTarget);
if (fs.selectedItem != null) {
var transferObject:Clipboard = createClipboard(fs.selectedItem as File);
NativeDragManager.doDrag(InteractiveObject(event.target),
transferObject,
null,
new Point(0,0));

}
}

public function createClipboard( sourceFile:File):Clipboard {
var transfer:Clipboard = new Clipboard();
transfer.setData(ClipboardFormats.FILE_LIST_FORMAT,
new Array(sourceFile),
false);
// Standard file list format
return transfer;
}

/**
* In this case we copy the file to the folder specified by the fs
*
*/
private function handleNativeDragDrop(event:NativeDragEvent):void {
var files:Array = event.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT, ClipboardTransferMode.ORIGINAL_PREFERRED) as Array;
var fs:FileSystemDataGrid = event.currentTarget as FileSystemDataGrid;

/**
* copies each file to the file system
*/
for each (var file:File in files) {

var fileDest:File = fs.directory.resolvePath(file.name)
file.addEventListener(Event.COMPLETE, refreshFileSystems);
// if the user has pressed the shift key then he just
// wants to copy the file
if (event.shiftKey)
{
this.copyFile(file, fileDest);

}
else {
this.moveFile(file, fileDest);
}

}

}

/**
* Refreshes the file system data grid after a copy/move operation
*
*/
private function refreshFileSystems(event:Event):void
{
fs1.refresh();
fs2.refresh();

}

/**
* Moves the file to a new location
*
*/
private function moveFile(fileOrig:File, fileDest:File):void {
if (!fileDest.exists) {
fileOrig.moveToAsync(fileDest);
}
else {
mx.controls.Alert.show("Are you sure you want to replace the existing file?","Replace with new file?", Alert.YES|Alert.CANCEL, this,
function(event:CloseEvent):void {
// overwrite file
if (event.detail== Alert.YES) {
fileOrig.moveToAsync(fileDest, true);
}
else {
fs1.refresh();
fs2.refresh();
}
});
}

}

/**
* Copies the file to a new location
*
*/
private function copyFile(fileOrig:File, fileDest:File):void {
if (!fileDest.exists) {
fileOrig.copyToAsync(fileDest);
}
else {
mx.controls.Alert.show("Are you sure you want to replace the existing file?","Replace with new file?", Alert.YES|Alert.CANCEL, this,
function(event:CloseEvent):void {
// overwrite file
if (event.detail== Alert.YES) {
fileOrig.copyToAsync(fileDest, true);
}
else {
fs1.refresh();
fs2.refresh();
}
});
}

}

/**
* Checks that there is at least one item selected and asks the user whether
* he really wants to delete the file.
*
*/
private function handleDelete(fs:FileSystemDataGrid):void {
mx.controls.Alert.show("Do you really want to delete this file? Please be aware that the delete actually deletes... not part of the demo.","Delete confirmation",Alert.YES|Alert.CANCEL,
this, function(event:CloseEvent):void {
deleteConfirmation(event, fs );
});
}

/**
* If the user really wants to delete the file we do what they ask
*
*/
private function deleteConfirmation(event:CloseEvent, fs:FileSystemDataGrid):void {
if (event.detail==Alert.YES) {
if (fs.selectedItem != null) {
var file:File= fs.selectedItem as File;
if (file.isDirectory) {
file.deleteDirectory(false);
}
else {
file.deleteFile();

}
fs.refresh();
}
}
}

]]>
</mx:Script>

<mx:Panel layout="vertical" height="100%" title="Copy From">
<mx:ControlBar >
<mx:FileSystemHistoryButton label="Back"  click="fs1.navigateBack()" enabled="{fs1.canNavigateBack}" itemClick="fs1.navigateBack(event.index)" dataProvider="{fs1.backHistory}"/>
<mx:FileSystemHistoryButton label="Forward" enabled="{fs1.canNavigateForward}" dataProvider="{fs1.forwardHistory}" itemClick="fs1.navigateForward(event.index)" dragStart="mx.controls.Alert.show('Drag Start')"/>
<mx:Button label="Up" enabled="{fs1.canNavigateUp}" click="{fs1.navigateUp()}"/>
<mx:Button label="Delete" enabled="{fs1.selectedItem!= null}" click="handleDelete(fs1)"/>

</mx:ControlBar>
<mx:FileSystemDataGrid id="fs1"  nativeDragEnter="handleNativeDragEnter(event)" mouseDown="handleMouseDown(event)" directory="{File.documentsDirectory}" nativeDragDrop="handleNativeDragDrop(event)">

</mx:FileSystemDataGrid>
</mx:Panel>
<mx:Panel layout="vertical" height="100%" title="Copy To">
<mx:ControlBar >
<mx:FileSystemHistoryButton label="Back" click="fs2.navigateBack()" enabled="{fs2.canNavigateBack}" itemClick="fs2.navigateBack(event.index)" dataProvider="{fs2.backHistory}"/>
<mx:FileSystemHistoryButton label="Forward" enabled="{fs2.canNavigateForward}" dataProvider="{fs2.forwardHistory}" itemClick="fs2.navigateForward(event.index)"/>
<mx:Button label="Up" enabled="{fs2.canNavigateUp}" click="{fs2.navigateUp()}"/>
<mx:Button label="Delete" enabled="{fs2.selectedItem!= null}"/>
</mx:ControlBar>
<mx:FileSystemDataGrid id="fs2" nativeDragEnter="handleNativeDragEnter(event)"  mouseDown="handleMouseDown(event)" nativeDragDrop="handleNativeDragDrop(event)"  directory="{File.applicationStorageDirectory}">

</mx:FileSystemDataGrid>
</mx:Panel>
</mx:WindowedApplication>




Click here to download the file manager with native drag and drop support

Adding Drag and Drag functionality in Adobe Air

In this tutorial I will teach you step by step how to use the out of the box drag & drop functionality provided by flex list controls.

Just some basic theory before we go into code. The drag & drop process has three stages – initiation, dragging and dropping.

The initiation is when the user clicks on a flex component and keeps the button pressed. In this case the component that the user clicks on is the drag initiator. Any flex component that supports dragging will handle either the mouseDown() or mouseMove() event to initiate the drag & drop operation. The event handler will then create a DragSource object which contains data related to the object being dragged. For example if you are dragging a file between two components, the DragSource object will contain a reference to a File object. Once the DragSource is constructed the DragManager.doDrag() method is called where the first argument is a reference to the object that initiated the drag, the second argument is the DragSource object and the third argument is a reference to the mouse event that called the event handler. There is a fourth optional argument that allows to specify a drag proxy that may be used to represent the object being dragged on the screen(e.g. a semi-transparent version of the drag initiator)

In the Dragging stage the user moves the flex component across the screen up to the drop target. If you specify a drag proxy image, that is what is shown on the screen when dragging the component. If not specified a rectangle will be shown instead.

In the dropping stage when the component being dragged arrives to a potential drop target, a dragEnter event is raised. The event handler that handles this event should check whether the DragSource object contains data that is of an acceptable format. If that’s the case then DragManager.acceptDragDrop() is called indicating that the drop target is happy in accepting the dragged data.

In this tutorial I will teach you step by step how to use the out of the box drag & drop functionality provided by flex list controls.

Just some basic theory before we go into code. The drag & drop process has three stages – initiation, dragging and dropping.

The initiation is when the user clicks on a flex component and keeps the button pressed. In this case the component that the user clicks on is the drag initiator. Any flex component that supports dragging will handle either the mouseDown() or mouseMove() event to initiate the drag & drop operation. The event handler will then create a DragSource object which contains data related to the object being dragged. For example if you are dragging a file between two components, the DragSource object will contain a reference to a File object. Once the DragSource is constructed the DragManager.doDrag() method is called where the first argument is a reference to the object that initiated the drag, the second argument is the DragSource object and the third argument is a reference to the mouse event that called the event handler. There is a fourth optional argument that allows to specify a drag proxy that may be used to represent the object being dragged on the screen(e.g. a semi-transparent version of the drag initiator)

In the Dragging stage the user moves the flex component across the screen up to the drop target. If you specify a drag proxy image, that is what is shown on the screen when dragging the component. If not specified a rectangle will be shown instead.

In the dropping stage when the component being dragged arrives to a potential drop target, a dragEnter event is raised. The event handler that handles this event should check whether the DragSource object contains data that is of an acceptable format.  If that’s the case then DragManager.acceptDragDrop() is called indicating that the drop target is happy in accepting the dragged data.

Fortunately for list controls most of this work is already done for you. Implementing drag & drop is very simple:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
     <mx:ArrayCollection id="source">
            <mx:Array>
            <mx:Object singer="Michael Jackson" />
            <mx:Object singer="Jennifer Lopez" />
            <mx:Object singer="Janet Jackson" />
            <mx:Object singer="Paul Mcarthney" />
        </mx:Array>
    </mx:ArrayCollection>

   <mx:ArrayCollection id="destination">
      <mx:Array>
          <mx:Object singer="Sheryl Crowe"/>
      </mx:Array>
   </mx:ArrayCollection>
   <mx:DataGrid dataProvider="{source}" dragEnabled="true" dragMoveEnabled="true"/>
   <mx:DataGrid dataProvider="{destination}" dropEnabled="true"/>
</mx:Application>

In the example above by setting dragEnabled to <b>true</b> allows the rows inside the data grid to be dragged. For any dragged rows to be accepted by the other data grid we need to set dropEnabled to true on that target DataGrid. We also set dragMoveEnabled to true to enable moving rows between data grids.

Ok, now let’s see how we can add drag & drop support to our file system manager. The steps required to do this are:

Step 1

We need to set the dragEnabled and the dropEnabled properties to true on both FileSystemDataGrid. The reason we do on both is because we want to allow the user to copy or move files in both directions: from left to right and right to left.

Step 2

We need to override the default handler for the DragEvent.DRAG_DROP event. This is because the standard drag & drop behavior for the FileSystemDataGrid isn’t quite what we need. In this event handler we need to call event.preventDefault() so that the default event handler is not called. The event handler inspects what file is specified inside the DragSource object carried by the event and performs the copy/move operation as specified by the key that user pressed. If the user just drags a file between the two data grids while pressing the shift key a move file operation is performed. Otherwise the default is to do a copy operation. If the file operation goes is successful we refresh the contents of two FileSystemDataGrid’s, otherwise an alert box is shown.

Here is the code:

 /**
  * Determines what object was dropped in the data grid
  */
 private function handleDragDrop(event:DragEvent):void {
 	// we do this because we want to override the default drag and drop
 	// behaviour implemented in the DataGrid
 	event.preventDefault();
 	var dragSource:DragSource=event.dragSource;
 	if (dragSource.hasFormat("items")) {
 		var items:Array = dragSource.dataForFormat("items") as Array ;
 		for each (var item:File in items) {
 			// copy this file to the directory indicated by fs2
 			// make sure that the origin data grid is not the same as the dest
 			if (event.dragInitiator!= event.target) {
 				var fileDest:File = FileSystemDataGrid(event.target).directory.resolvePath(item.name)

 				var dataGrid:FileSystemDataGrid=event.currentTarget as FileSystemDataGrid;
 				item.addEventListener(Event.COMPLETE, refreshFileSystems);
 				// if the user has pressed the shift key then he just
 				// wants to copy the file
 				if (event.shiftKey)
 				{
 					this.copyFile(item, fileDest);

 				}
 				else {
 					this.moveFile(item, fileDest);
 				}

 			}
 		}
 	}
 }

Click here to download the File System Manager Air app with Drag and Drop support


It is very cool to drag and drop a file from one file system data grid to another. However wouldn’t it be even cooler to be able to drag and drop files from the operating system desktop to Air file manager? That kind of drag & drop requires native drag & drop support. If you are interested in native drag and drop support then read my post on Native Drag and Drop in Adobe Air with example

Creating a File Manager in Adobe Air

In my previous post I taught you how to create a simple Adobe Air application. This time we are going to be a bit more ambitious. I want to show how easy is to create an Adobe Air application. So let’s create a simple file manager with drag & drop capabilities using out of the box Adobe Air components.

Before we go into the code lets just briefly look at the out of the box components that are available to build a file manager:

  • FileSystemDataGrid – The file system data grid is an out of the box Air component that extends DataGrid and allows you to view the contents of a directory providing information such as file name, file type, size and creation date. This will be one of the main components that we will use in this file manager.
  • FileSystemHistoryButton – The file system history button is a PopupButton that allows to go back or forward in the history of selected directories for a file system. The button click event allows to navigate to the immediate ancestor or successor directory in the history of selections. While the combo box enables jumping to any previous selected directory.
  • FileSystemTree – The file system tree is a component that displays the contents of the file system as a tree. The FileSystemTree extends the out of the box Tree component in flex and inherits all the associated behavior.

Using the components above let’s create a very simple file system navigator:

<mx:Panel layout="vertical" height="100%" title="Copy From">
	<mx:ControlBar >
			 <mx:FileSystemHistoryButton label="Back"  click="fs1.navigateBack()" enabled="{fs1.canNavigateBack}" itemClick="fs1.navigateBack(event.index)" dataProvider="{fs1.backHistory}"/>
			 <mx:FileSystemHistoryButton label="Forward" enabled="{fs1.canNavigateForward}" dataProvider="{fs1.forwardHistory}" itemClick="fs1.navigateForward(event.index)" dragStart="mx.controls.Alert.show('Drag Start')"/>
			 <mx:Button label="Up" enabled="{fs1.canNavigateUp}" click="{fs1.navigateUp()}"/>
			 <mx:Button label="Delete" enabled="{fs1.selectedItem!= null}" click="handleDelete(fs1)"/>

	</mx:ControlBar>
	<mx:FileSystemDataGrid id="fs1" directory="{File.documentsDirectory}" >

	</mx:FileSystemDataGrid>
 </mx:Panel>

We use the FileSystemHistoryButton to go back or forward in the history of previous selected directories.

Notice that there are two event handlers that we need to register. The first event handler handles the click event and is used if the user simply clicks on the button. In that case FileSystemDataGrid.navigateBack() or FileSystemDataGrid.navigateForward() is called. This causes the file system data grid to go back to the previously selected directory.
The second event handler handles itemClick event. This is the event that is raised if the user selects one of the directories in the popup menu. So in this case the event handler calls FileSystemDataGrid.navigateBack(event.index) or FileSystemDataGrid.navigateForward(event.index) where event.index is the index of the menu item that the user selected.

The FileSystemDataGrid.canNavigateBack() and FileSystemDataGrid.canNavigateForward() functions indicate whether we have reached a dead-end in the history of directory selections. In that case the Forward and Back buttons will be disabled.

The Up button when clicked navigates to the parent directory, by calling FileSystemDataGrid.navigateUp(). Similarly FileSystemDataGrid.canNavigateUp() indicates whether we have reached the root directory. In that case the Up button will be disabled.

Any decent file manager should allow you to copy, move or delete a file. Let’s add these operations to our file manager:

Deleting files

 /**
    * Checks that there is at least one item selected and asks the user whether
    * he really wants to delete the file. 
    * 
    */
    private function handleDelete(fs:FileSystemDataGrid):void {
 		mx.controls.Alert.show("Do you really want to delete this file? Please be aware that the delete actually deletes... not part of the demo.","Delete confirmation",Alert.YES|Alert.CANCEL, 
 		this, function(event:CloseEvent):void {
 			 deleteConfirmation(event, fs );
 		});
     }
 		
    /**
       * If the user really wants to delete the file we do what they ask
       * 
       */
       private function deleteConfirmation(event:CloseEvent, fs:FileSystemDataGrid):void {
 	     if (event.detail==Alert.YES) {
 			if (fs.selectedItem != null) {
 			var file:File= fs.selectedItem as File;
 			if (file.isDirectory) {
 				file.deleteDirectory(false);
 			}
 			else { 						
 				file.deleteFile();	
 			}
 			fs.refresh();
 		}
 	}	
 }

 

Deleting a file is irreversible, therefore it is always a good idea to double check that the user really wants to delete the file by using an Alert dialog box.
If the user confirms the deletion of the file then we get the current selected file by calling FileSystemDataGrid.selectedItem. A File object represents a path to a directory or to a file. By calling File.isDirectory() we know whether the file is a directory or not.

  • If the File object points to a directory we call File.deleteDirectory(false), where false indicates that we do not want to delete the directory if it contains any files. Note that this delete is done synchronously meaning that the user interface will block until the deletion is complete. If you don’t want this to happen call File.deleteDirectoryAsync() instead and register event handlers for Event.COMPLETE and IOErrorEvent.IO_ERROR
  • If the File object points to a file, in that case we call File.deleteFile() and that deletes the file.

Copying Files

  /**
    * Copies the file to a new location
    * 
    */
    private function copyFile(fileOrig:File, fileDest:File):void {
 	// once copying completes we want to refresh both file system data grids to reflect
       // any changes
       fileOrig.addEventListener(Event.COMPLETE, refreshFileSystems);

      if (!fileDest.exists) {
 		fileOrig.copyToAsync(fileDest);
 	}
 	else {
 		mx.controls.Alert.show("Are you sure you want to replace the existing file?","Replace with new file?", Alert.YES|Alert.CANCEL, this, 
 				function(event:CloseEvent):void {
 					// overwrite file
 					if (event.detail== Alert.YES) {
 						fileOrig.copyToAsync(fileDest, true);
 					}
 					else {
 						fs1.refresh();
 						fs2.refresh();
 					}
 				});
 			}
 		}

Copying a file can be done using File.copyTo() or File.copyToAsync(). File.copyTo() copies a file from one location to another but blocks until the copying finishes. On the other hand the File.copyToAsync() method returns immediately and performs the copy in the background. But in this case one should register event handlers for Event.COMPLETE and Event.PROGRESS so that we know when the copy operation is finished.

The first argument of File.copyTo() or File.copyToAsync() is the destination directory/file to copy to. There is an optional overwrite argument that you can use to specify whether you want to overwrite the destination file if one exists. If you set it to false and a file is present an IOError exception or IOErrorEvent is thrown.

Moving Files

 	/**
 	 * Moves the file to a new location
 	 * 
 	 */
 	private function moveFile(fileOrig:File, fileDest:File):void {
  		fileOrig.addEventListener(Event.COMPLETE, refreshFileSystems);
                if (!fileDest.exists) {
 			fileOrig.moveToAsync(fileDest);
 		}
 		else {
 			mx.controls.Alert.show("Are you sure you want to replace the existing file?","Replace with new file?", Alert.YES|Alert.CANCEL, this, 
 			function(event:CloseEvent):void {
 				// overwrite file
 				if (event.detail== Alert.YES) {
 					fileOrig.moveToAsync(fileDest, true);
 				}
 				else {
 					fs1.refresh();
 					fs2.refresh();
 				}
 			});
 		}
 
 	}

Moving a file can be done using File.moveTo() or File.moveToAsync(). File.moveTo() moves a file from one location to another but blocks until the move operation is finished. On the other hand the File.moveToAsync() method returns immediately and performs the move operation in the background. But in this case one should register event handlers for Event.COMPLETE and Event.PROGRESS so that we know when the move operation is finished.

The first argument of File.moveTo() or File.moveToAsync() is the destination directory/file to move to. There is an optional overwrite argument that you can use to specify whether you want to overwrite the destination file if one exists. If you set it to false and a file is present an IOError exception or IOErrorEvent is thrown.




Click here to download the example AirFileManager

Next we want to add drag & drop support to this file system manager. So that we don’t always have to click the buttons. If you are interested in how you can add that kind of functionality then read my tutorial on Adding Drag and Drag functionality in Adobe Air

Creating your first Adobe Air Application

Adobe Air is a great extension to the Adobe Flex framework that allows almost anyone to create rich internet applications for the desktop. With Adobe Air the same applications will run on Microsoft Windows, Mac OS X and Linux with pretty much no operating system dependent code. There are some exceptions though but that we will discuss later.

This tutorial is the first part of a tutorial series on how to build a File Manager using Adobe Air’s out of the box components. This file manager will have Drag & Drop capabilities, within the file manager itself, to copy or move files between directories. It will have native drag & drop capabilities to copy files from the desktop directly to the file manager. Or the other way around. Finally we will also add a navigational menu to the file manager to demonstrate some more useful out of the box Adobe Air components.

But before we go into all that let’s create our first “Hello World” Adobe Air application.

Step 1

Create a new project in Flex Builder but this time select the radio button that says ‘Desktop Application’

Depending on how you named your project you will see two files in your project. For example if you named it AirFileManager you will see an AirFileManager.mxml file and a AirFileManager-app.xml. The mxml file is the file where you will put the initial code.
Notice the WindowedApplication top level node that is created. This is the Adobe Air equivalent of the Application component in Flex. The main difference being that a WindowedApplication is not restricted to run in a browser, it runs on a desktop, and provides some extra features.

AirFileManager-app.xml file is an application descriptor file where you will configure certain parameters related to your Adobe Air Application. Parameters like transparency, system chrome, name, filename, copyright, window initial size and icon will be configured in this file.

Step 2

Add the following code:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:Button label="Click me" click="mx.controls.Alert.show('I have just created my first Adobe Air App!')"/> 
</mx:WindowedApplication>

Step 3

Execute the Air app by clicking on the run method.

Congratulations! You have just created & executed your first Adobe Air app. But don’t go out to celebrate yet… that was just to break the ice.

Let’s make some modifications to the application descriptor.
Notice the systemChrome and transparency property. The systemChrome property tells Adobe Air whether to use the operating system native chrome or not. The transparency property is used to determine if the application window will be transparent or opaque. Note however that transparency is only supported if you set the systemChrome to none. If you set systemChrome to standard the operating system chrome is used and therefore Adobe Air can’t support transparency as it is outside its control.
Note that the default value for the systemChrome is standard.

To test this feature add a backgroundAlpha of 0.5 to the WindowedApplication component.
And modify AirFileManager-app.xml to:

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.5">
 <!-- The application identifier string, unique to this application. Required. -->
 <id>AirFileManager</id>

 <!-- Used as the filename for the application. Required. -->
 <filename>AirFileManager</filename>

 <!-- The name that is displayed in the AIR application installer. 
      May have multiple values for each language. See samples or xsd schema file. Optional. -->
 <name>AirFileManager</name>

 <!-- An application version designator (such as "v1", "2.5", or "Alpha 1"). Required. -->
 <version>v1</version>

 <!-- Settings for the application's initial window. Required. -->
 <initialWindow>
  <content>[This value will be overwritten by Flex Builder in the output app.xml]</content>
  <systemChrome>none</systemChrome>
               <transparent>true</transparent>
 </initialWindow>
</application>

Run the Adobe Air application and see the difference in the application window. It should look transparent now.

Deploying Adobe Air Applications

Now that you have created your first Adobe Air application, you should package it into an AIR file. If you are using Flex Builder:

  1. Right click your project folder and select Export
  2. In the next screen choose Release Build and click Next
  3. If you want to include the source code with your release click on Enable View Source and then click Next.
  4. In this screen you are asked for a digital certificate to include with your Adobe Air application. You can either specify a digital signature provided by a third party like Verisign or Thawte. If you don’t have one then click Create to create your own self-signed digital certificate. Although you can can create your own digital certificate, it is not the best option as it doesn’t provide assurance to the users that your application is safe or that it hasn’t been tampered.
  5. Type your digital certificate password and click next
  6. Select the files you want to include in your package and then click finish.
  7. Your AIR installation package should have been created in the same directory as your project. Use this file to distribute your application.

That will be all for now. In the next part of this tutorial we will start adding the file manager components with which we will create a simple but yet powerful file manager in Adobe Air.




Click here to go to the next part of our tutorial.