Its really great to use such a product and lets flourish it further...

Looking forward for the exciting new application on AIR...

Check out this video where Kevin Lynch demoing some of the multi-touch capabilities during Keynote at MAX Conference.

For Multi-touch to work, the hardware should support Multi-touch events.

By this time you might all be knowing all the new Features that are part of AIR 2 BETA. Still to know more about new Features, check out Christian Cantrell's post.

There are some very good Sample apps in Adobe Library which were built based on these new capabilities and features.

MultiTouch Support: This is perhaps the most exciting feature as AIR 2 and Flash player 10.1 is going to support multi-touch on platforms like Windows 7 and MAC's Snow Leopard. Here are some apps which demonstrate the support for multi-touch:

• GeoTest: Download Installer, Source
• PhotoPhysics: Download Installer, Source
• SpriteFract: Download Installer, Source
• TouchTest: Download Installer, Source

Storage Volume Detection: With AIR 2, apps can detect when any storage device like Camera, USB are connected to computer. Adobe Library had an application FileTile which demonstrates the feature of detecting any external device and will open the files in default application.

Download Installer, Source.

Microphone Data Access: AIR 2 gives us the support to access data from Microphone connected to the computer either for recording or processing without any need of any server. There is an application Microphone which can record and playback the different playback speeds supported.

Download Installer, Source.

File Promises: With this feature AIR 2 will allow us to drap-drop the files which are not been created yet and are remote. With this feature support, you can implement drag-drop file from a FTP server directly to your AIR application. This feature is for Windows and MAC only.

S3E application provides a graphical front-end to your Amazon S3 account to demonstrate this feature.

Download Installer, Source.

Native Process API: Using this new functionality can now deploy their apps with operating-specific installers like .exe, .dmg, .rpm, and .deb instead of an .air installer file. Adobe released application SearchCentral. You can get the source of application.

Try out these applications and get to know these new Features of AIR 2 more...

Here is a brief list of other Features which AIR 2 has introduced:

• Global Error handling
• Enhanced Printing Support
• Updated Webkit
• Improved Ipv6 Support
• Increased maximum size of Native Window from 2880x2880 to 4095x4095
• Server Sockets Support
• DNS Lookup
• Network Interface Enumeration
• Database Transaction Savepoints
• Screen Reader Support for Windows
• IME API and IME Text Input Enhancement
• Smaller Runtime Installer Size
• Improved CPU Usage and Low Memory Usage

You can download both AIR SDK and Runtime for different OS 's like Windows , MAC and Linux.

Adobe labs says: "Adobe AIR 2 is in the early stages of development which means it contains bugs, and not all features are fully implemented. This software is for evaluation use only, and should not be used for any mission-critical work."

Goahead, download and check it out...

Adobe membership is free and registration only takes a minute. As a member, you will have access to Adobe Labs downloads, sample applications, services, and special community areas including forums and wikis as well as access to membership benefits on Adobe.com.

With this membership, ADOBE LABS provides access to the software, you can provide comments, ideas, feature requests and many more.

Get youself Adobe Memership now...

There are some thousands of AIR applications available now for use.

HONGKIAT listed out some nice AIR applications which can be useful in our day-to-day activities. I found some applications which i dint knew about from this article.

Install and use these applications. Make this world full of AIR ...

People who are already working on AIR 1.0 will find it very useful to know what new enhancements AIR 2.0 is going to offer.

Elad Elron made an excellent post about these new enhancements and capabilities.

I am sure this information is useful to all RIA developers.

Drag-drop Events for Drag Initiator

• mouseDown, mouseMove: mouseDown event will be dispatched when a control is selected with Mouse button down. mouseMove is dispatched when mouse moves.
• dragStart: this event is dispatched by a list-based control when a drag operation starts. Its handled internally, no need to handle it while implementing on non-list based controls.
• dragComplete: Dispatched when the drag completes.

If you want to implement drag-drop for any component, you must implement either mouseDown or mouseMove and optionally dragComplete event. In case of List-based controls, once dragEnabled property is set to true, Flex automatically adds event handlers for dragStart and dragComplete events.

Drag-Drop events for Drop Target:

• dragEnter: Dispatched when drag proxy moves onto drop target from outside the drop target. Event handler for this must be defined for the component. DragManager.acceptDragDrop() method must be called by event handler to accept drop.
• dragOver: this event is dispatched when mouse is moved over drop target after dragEnter event.
• dragDrop: Dispatched when the mouse is released over drop target.
• dragExit: This event is dispatched when user moves the drag proxy off the target withour dropping the data on the target.

While implementing darg-drop for non-list based controls, we must implement event handlers for dragEnter and dragDrop events and optionally for the remaining two events. Incase of list-based controls, when dropEnabled is set to true, Flex automatically adds event handlers for all the events.

Steps of Drag-Drop Operation:

1. First make a component drag initiator. Use mouseDown or mouseMove event handler to start the drag-drop operation. mx.core.DragSource instance is created that contains the data to be dragged and specifies the format of data. mx.managers.DragManager.doDrag() method should be called to initiate the drap-drop operation.
2. With mouse button down, if the mouse is moved across the application, Flex displays drag proxy image.
3. When this drag proxy is moved over a flex component (which had dragEnter event handler),  dragEnter event handler examines the DragSource object to determine whether the data being dragged is in accepted format. To accept the drop, the event handler calls DragManager.acceptDragDrop() method. This method must be called in order for the drop target to receive dragOver, dragExit and dragDrop events.
4. If the user releases the drag proxy on the drop target, Flex dispatched dragDrop event. The drop target must define event handler for dragDrop event to  add the drag data to the drop target.

Simple Drag-Drop Example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="300">
	<mx:Script>
		<![CDATA[
			import mx.core.DragSource;
			import mx.managers.DragManager;
			import mx.events.*;
			import mx.containers.Canvas;

			private function mouseMoveHandler(event:MouseEvent):void{
				var dragInitiator:Canvas=Canvas(event.currentTarget);

				var dragColor:int = dragInitiator.getStyle('backgroundColor');

				var ds:DragSource = new DragSource();

				ds.addData(dragColor, 'color');

				DragManager.doDrag(dragInitiator, ds, event);
			}

			private function dragEnterHandler(event:DragEvent):void{
				if(event.dragSource.hasFormat('color')){
					var dropTarget:Canvas=Canvas(event.currentTarget);
					DragManager.acceptDragDrop(dropTarget);
				}
			}

			private function dragDropHandler(event:DragEvent):void{
				var data:Object = event.dragSource.dataForFormat('color');
				myCanvas.setStyle("backgroundColor", data);
			}
		]]>
	</mx:Script>
	<mx:HBox x="40" y="40">
		<mx:VBox>
			<mx:Canvas width="30" height="30" backgroundColor="red" borderStyle="solid" mouseMove="mouseMoveHandler(event)" />
			<mx:Canvas width="30" height="30" backgroundColor="blue" borderStyle="solid" mouseMove="mouseMoveHandler(event)" />
			<mx:Canvas width="30" height="30" backgroundColor="green" borderStyle="solid" mouseMove="mouseMoveHandler(event)" />
		</mx:VBox>
		<mx:VBox>
			<mx:Label text="Drag into this Canvas" />
			<mx:Canvas id="myCanvas" width="100" height="100" backgroundColor="#FFFFFF" borderStyle="solid" dragEnter="dragEnterHandler(event)" dragDrop="dragDropHandler(event)" />
		</mx:VBox>
		</mx:HBox>
</mx:Application>

In this example, we have a canvas to the right which is drop target (which has dragEnter and dragDrop event handlers). Dragging any smaller canvas from the left to the right canvas fills the background of the drop target with the color of the drag initiator.

Result:

Another Example

In the above example, we have the drag Initiator was external to the drop target. We can make the children of a drop target as drag initiators as well.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="400">
	<mx:Script>
		<![CDATA[
			import mx.managers.DragManager;
            import mx.core.DragSource;
            import mx.events.DragEvent;
            import flash.events.MouseEvent;

            private function mouseMoveHandler(event:MouseEvent):void{
            	var dragInitiator:Canvas=Canvas(event.currentTarget);
                var ds:DragSource = new DragSource();
                ds.addData(dragInitiator, "canvas");               

                DragManager.doDrag(dragInitiator, ds, event);

            }

            private function dragEnterHandler(event:DragEvent):void {
                if (event.dragSource.hasFormat("canvas"))
                {
                    DragManager.acceptDragDrop(Canvas(event.currentTarget));
                }
            }

            private function dragDropHandler(event:DragEvent):void {
                Canvas(event.dragInitiator).x =
                    Canvas(event.currentTarget).mouseX;
                Canvas(event.dragInitiator).y =
                    Canvas(event.currentTarget).mouseY;
            }

		]]>
	</mx:Script>
	<mx:Canvas id="myCanvas" x="20" y="20" width="300" height="300" backgroundColor="#FFFFFF" borderStyle="solid" dragEnter="dragEnterHandler(event)" dragDrop="dragDropHandler(event)">
		<mx:Canvas id="thumb" width="50" height="50" borderStyle="solid" backgroundColor="red" mouseMove="mouseMoveHandler(event)" />
	</mx:Canvas>
</mx:Application>

 In this example, we can drag-drop the red canvas all across the white canvas.

Result:

User-Defined Drag Proxy:

In the above example, while dragging a default drag proxy will be displayed. We can add our own drag proxy image.

In mouseDown or mouseMove event handler, you can optionally specify the drap proxy in doDrag() method. Here are the optional properties to be given incase of user-defined drag proxy:

• dragImage: Image that specifies the drag proxy
• xOffset: Specifies the x offset in pixels for the dragImage. Usually it will be negative number.
• yOffset: Specifies the y offset in pixels for dragImage.Usually it will be negative number.
• imageAlpha: A number between 0 and 1.0, which specifies the alpha for the drag proxy image. The default value is 0.5

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.controls.Image;
			import mx.managers.DragManager;
            import mx.core.DragSource;
            import mx.events.DragEvent;
            import flash.events.MouseEvent;

            // Embed icon image.
            [Embed(source='assets/proxy.jpg')]
            public var proxyImage:Class;

            private function mouseMoveHandler(event:MouseEvent):void{
            	var dragInitiator:Canvas=Canvas(event.currentTarget);
                var ds:DragSource = new DragSource();
                ds.addData(dragInitiator, "canvas");  

                var myProxy:Image = new Image();
                myProxy.source = proxyImage;
                myProxy.width = 15;
                myProxy.height = 15;             

                DragManager.doDrag(dragInitiator, ds, event, myProxy, -15, -15, 0.8);

            }

            private function dragEnterHandler(event:DragEvent):void {
                if (event.dragSource.hasFormat("canvas"))
                {
                    DragManager.acceptDragDrop(Canvas(event.currentTarget));
                }
            }

            private function dragDropHandler(event:DragEvent):void {
                Canvas(event.dragInitiator).x =
                    Canvas(event.currentTarget).mouseX;
                Canvas(event.dragInitiator).y =
                    Canvas(event.currentTarget).mouseY;
            }

		]]>
	</mx:Script>
	<mx:Canvas id="myCanvas" x="20" y="20" width="300" height="300" backgroundColor="#FFFFFF" borderStyle="solid" dragEnter="dragEnterHandler(event)" dragDrop="dragDropHandler(event)">
		<mx:Canvas id="thumb" width="50" height="50" borderStyle="solid" backgroundColor="red" mouseMove="mouseMoveHandler(event)" />
	</mx:Canvas>
</mx:Application>

You can provide what ever image you want as your drag proxy. Make sure you give the height and width for the drag proxy image, without which it wont work.

Result:

These are the basics for implementing drap-drop for non-list based controls for Flex/AIR.

You can experiment more on this.

PopUpManager class is the one used to create new top-level windows and can be used to place above all the visible windows (making it a popUp). You can remove popUps as well using this class.

We can make these windows  modal as well.

We can create a popUp using createPopUp method.

 public static createPopUp(parent:DisplayObject, class:Class,
    modal:Boolean = false):IFlexDisplayObject

Here parent is the window over which the popup is going to appear, class is the reference to the custom MXML component which is going to act as pop-up, modal represents the Boolean value to decide on whether the popup is going to be modal or not.

First we will create a custom MXML component, which is going to be our popUp. For that goto File->New->MXML Component. Give a name myCanvas. We are going to create this new component with a canvas.

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="300" height="112"  borderColor="#000000" cornerRadius="10" borderStyle="solid"  backgroundColor="#A19999">
	<mx:Script>
		<![CDATA[
			import mx.managers.PopUpManager;

			private var myText:String ="This is a Sample Pop-up Window based on a Canvas Component. Click 'OK' to remove this popup!";
		]]>
	</mx:Script>
	<mx:VBox width="100%" height="99" paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5">
		<mx:Text text="{myText}"  width="270" height="59"/>
		<mx:Button label="OK" id="myBtn" click="PopUpManager.removePopUp(this)" textAlign="center"/>
	</mx:VBox>

</mx:Canvas>

As you can see above, our new MXML component is based on canvas. It has  a text and a button. In order to work with popups, we need to import mx.managers.PopUpManager class.

The click eventHandler of the button calls a method PopUpManager.removePopUp(this) which removes the popup.

As we are ready with our PopUp window, we need to use this MXML component on other window to use it as a popup.

Goto MXML Application in which we want to use the above MXML component as popup. Here's the code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" >

	<mx:Script>
		<![CDATA[
			import mx.managers.PopUpManager;
          		import myCanvas;
          		import mx.core.IFlexDisplayObject;

          		private var myPopUP:IFlexDisplayObject;

			private function showPopUp():void{
				myPopUP = PopUpManager.createPopUp(this, myCanvas, true);
			}
		]]>
	</mx:Script>
	<mx:Button id="btn1" label="ShowPopUp" click="showPopUp()"  x="56" y="50"/>
</mx:Application>

Our MXML application has only one Button, which calls showPopUp() on clicking.

First import all the necessary packages, like PopUpManager, our MXML component myCanvas, IFlexDisplayObject.

Create a new variable myPopUp which is of type IFlexDisplayObject. Inside showPopUp() method, we are calling function createPopUp with this (current application window, above which we intend to display the popup), myCanvas (the popup window) and modal value as true.

Result:

 As you can see, clicking the showPopUp button will show the pop-up.

But once the popup is visible, the whole application will be blurred. This can be avoided by using "modalTransparency=0" for our <mx:Application> tag.

The result will be:

You can see that now the whole application is not blurred.

You can make the popUp to appear at the center of the application by using 

PopUpManager.centerPopUp(myPopUP);

function inside showPopUp() method after createPopUp(). Now the popup will always appear at the center of our application.

Result:

You can use whatever component as you wish to make it a popup. You can use either Panel, Title Window or even a Nice Form as a popUp.

Hope you find this useful.

Here are the Flex File System components:

• FileSystemComboBox: Shows hierarchical directories of selected directory
• FileSystemTree: displays contents of a directory as Tree
• FileSystemList: Shows the contents of a directory as List
• FileSystemDataGrid: Displays file information in a grid format
• FileSystemHistoryButton: Lets us move through the navigational history of another control

While using these controls, we need to bind the property directory to any specific location like Desktop or C:\ etc.  Just provide the value for directory property, that will populate the control with contents of  file system like child directories , files etc. The directory property will act as dataProvider for these controls.

If you want to get the path of any selected file or directory in a control, you can get it through FileSystemControl.directory.nativePath.

For example,

<?xml version="1.0" encoding="utf-8"?>

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

width="800" height="600">

<mx:FileSystemDataGrid x="20" y="30" width="550" height="250"

directory="{File.desktopDirectory.resolvePath('')}"/>

<mx:FileSystemComboBox x="20" y="300"

directory="{File.desktopDirectory.resolvePath('')}" />

<mx:FileSystemTree x="600" y="20" width="200"

directory="{File.desktopDirectory.resolvePath('')}"/>

<mx:FileSystemList id="fsl" x="245" y="301"

directory="{File.desktopDirectory.resolvePath('')}" />

</mx:WindowedApplication>

In the above example, we are using File.desktopDirectory.resolvePath('') to give Desktop as the directory root for these controls. The result of this will be something like this:

Using just the components can make your job easy.

FileSystemHistoryButton Control

The difference between other controls and FileSystemHistoryButton is that this is just a navigation component with no displayable List. We can assign this control any other List controls to navigate back and front of the directory structures.

First we need to provide dataProvider property with one of the controls properties. For example you can bind this dataProvide propery with properties like  forwardHistory and backwardHistory of FileSystemList or FileSystemDataGrid controls. Then if you set click and itemClick eventHandlers of that button to navigateForward and navigateBack method, you can navigate through the hierarchy of the directories.

Here's is an example:

<?xml version="1.0" encoding="utf-8"?>

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

width="800" height="500">

<mx:HBox x="20" y="20">

<mx:FileSystemHistoryButton label="Back" dataProvider="{fsdg.backHistory}"

enabled="{fsdg.canNavigateBack}" click="fsdg.navigateBack();"

itemClick="fsdg.navigateBack(event.index)"/>

<mx:FileSystemHistoryButton label="Forward" dataProvider="{fsdg.forwardHistory}"

enabled="{fsdg.canNavigateForward}" click="fsdg.navigateForward();"

itemClick="fsdg.navigateForward(event.index)"/>

</mx:HBox>

<mx:FileSystemDataGrid id="fsdg" x="20" y="60" width="550" height="250"

directory="{File.desktopDirectory.resolvePath('')}"/>

</mx:WindowedApplication>

In the above example, the dataGrid will display file structure from Desktop. Once you double-click and directory, this navigation history is thus stored. You can use Back button to get back to Desktop.

Result:

Using FileSystemHistoryButton controls you can navigate the Directory structure in controls like FileSystemList, FileSystemDataGrid etc.

A Simple File Browser

Using just a FileSystemList and FileSystemDataGrid, we can make a primitive File Browser as follows:

<?xml version="1.0" encoding="utf-8"?>

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:HDividedBox>

<mx:FileSystemTree id="tree" width="300" height="100%"

enumerationMode="directoriesOnly"

directory="{File.desktopDirectory.resolvePath('')}"

change="dataGrid.directory = File(tree.selectedItem)"/>

<mx:FileSystemDataGrid id="dataGrid" width="100%" height="100%"

directory="{File.desktopDirectory.resolvePath('')}" />

</mx:HDividedBox>

</mx:WindowedApplication>

In this example, we have one FileSystemTree and a FileSystemDataGrid. Setting enumerationMode of FileSystemTree to directoriesOnly displays only directories in the Trees Structure. In change eventHandler we are assigning the directory property of FileSystemDataGrid the value of the Selected Tree Item. Doing this will populate the FileSystemDataGrid with the file structure of the selected Folder in the Tree.

Result:

You can use these controls and make your task done in no time.