I recently published a series of tutorials around the topic of “moving stuff” across Adobe Air applications (via copy&paste and drag&drop). Here is the complete list of all the tutorials.

• Native Drag and Drop in Adobe Air
  The first tutorial, to get started with drag and drop.
• Drag and Drop of Text in Adobe Air
  An overview of how to drag and drop textual content in Adobe Air.
• Drag and Drop of Images In Adobe Air
  A tutorial on drag and drop from OS to Adobe air and across Air apps.
• Copy and Paste Images in Adobe Air
  The first tutorial on copy and paste, focused on images.
• Copy and Paste a complex object in Adobe Air
  Description of how to move a custom object across Adobe Air applications.
• Copy and Paste Sets of Complex Objects in Adobe Air
  A tutorial about how to copy and paste arrays of custom objects.

I am planning to release more series about Adobe Air/Flex. Any topic your prefer? Leave a comment below or contact me.

This is a followup post to the previous one, where we have seen how to copy and paste a complex object across two Adobe Air applications. We will see how to copy and paste more than one object from an Adobe Air application to another. First of all we have to enable multiple selection in our Datagrid, that’s easy.

1
2
3

<mx:DataGrid id="grid" 
	dataProvider="{collection}"
	allowMultipleSelection="true" >

We then modify the function that copies data to the clipboard. Instead of a single element we want the list of the selected items in the datagrid (line 3).

1
2
3
4
5
6
7
8

private function copyToClipboard():void {
 
	var selection:ArrayCollection = new ArrayCollection(grid.selectedItems);
	Clipboard.generalClipboard.clear();
	Clipboard.generalClipboard.setData("myCustomFormat", selection);
	feedback.text = "Data copied to the clipboard";
 
}

The rest of the code remains the same of the previous tutorial. The destination application needs a bit more of tweaking to handle an array of items. We have to store data in an ArrayCollection (line 2,5). At this point we could set up a renderer and a repeater to populate the form, but let’s have some fun with actionscript (lines 8-31).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

private const HEIGHT:int = 20;
private var myItems:ArrayCollection;
 
private function pasteFromClipboard():void {
	myItems = Clipboard.generalClipboard.getData("myCustomFormat") 
		as ArrayCollection;
 
	for each (var i in myItems) {
 
		var nameLabel:FormItem = new FormItem();
		nameLabel.label = "Name:";
		var nameText:TextArea = new TextArea();
		nameText.height = HEIGHT;
		nameText.text = i.name;
 
		var emailLabel:FormItem = new FormItem();
		emailLabel.label = "Email";
		var emailText:TextArea = new TextArea();
		emailText.height = HEIGHT;
		emailText.text = i.email;
 
		nameLabel.addChild(nameText);
		emailLabel.addChild(emailText);
 
		pastedItems.addChild(nameLabel);
		pastedItems.addChild(emailLabel);
 
		var hr:HRule = new HRule();
		hr.width = 40;
		pastedItems.addChild(hr);
	}
}

Here is an example of the final result.

Source code is available.

In Adobe Air you can store data in the object to enable cross application data transfer. We have already had a look at how to copy and paste images. In this tutorial we will see how to copy complex objects. By complex objects we mean a type of object which is not the usual String, but something a bit more complicated, like an instance of Person.

1
2
3
4
5
6
7
8
9
10
11
12

public class Person extends Object {
 
	public var name:String;
	public var email:String;
 
	public function Person(name:String, email:String) {
		super();
		this.name = name;
		this.email = email;
	}
 
}

We will create two Adobe Air apps: the first is the source from which we copy data, the second is the destination where we paste data in the clipboard. Let’s start with the source application. We create some instance of Person to populate an ArrayCollection which we feed into a DataGrid.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<mx:WindowedApplication 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="vertical" 
	creationComplete="init()">
 
	<mx:Script>
		<![CDATA[
 
		import mx.collections.ArrayCollection;
 
		[Bindable] 
                private var collection:ArrayCollection = new ArrayCollection()
 
		private function init():void {
			collection.addItem(new Person("John", "john@john.com"));
			collection.addItem(new Person("Mary", "mary@mary.com"));
		}
 
		]]>
	</mx:Script>
 
	<mx:DataGrid id="grid" 
		dataProvider="{collection}">
 
	</mx:DataGrid>
 
</mx:WindowedApplication>

We will add a button to trigger the copy action of the selected item. Then we need a way to detect the selected item in the grid and store it into the clipboard. We do this in the copyToClipboard function.

1
2
3
4
5
6
7
8

private function copyToClipboard():void {
 
	var selection:Person = grid.selectedItem as Person;
	Clipboard.generalClipboard.clear();
	Clipboard.generalClipboard.setData("myCustomFormat", selection);
	feedback.text = "Data copied to the clipboard";
 
}

Here we should remember to be consistent with the key, myCustomFormat, that we adopt to store data in the clipboard (line 5). We’ll use the same key when we want to retrieve data in the Destination application. Below is the complete code of the Source application.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="vertical" 
	creationComplete="init()">
 
	<mx:Script>
	<![CDATA[
	import mx.collections.ArrayCollection;
 
	[Bindable] 
	private var collection:ArrayCollection = new ArrayCollection()
 
	private function init():void {
		collection.addItem(new Person("John", "john@john.com"));
		collection.addItem(new Person("Mary", "mary@mary.com"));
	}
 
	private function copyToClipboard():void {
		var selection:Person = grid.selectedItem as Person;
		Clipboard.generalClipboard.clear();
		Clipboard.generalClipboard.setData("myCustomFormat", selection);
		feedback.text = "Data copied to the clipboard";
	}
	]]>
	</mx:Script>
 
	<mx:DataGrid id="grid" 
		dataProvider="{collection}">
 
	</mx:DataGrid>
 
	<mx:Button label="Copy to Clipboad" 
		enabled="{grid.selectedItem != null}" 
		click="copyToClipboard()"/>
 
	<mx:Text id="feedback" />
 
</mx:WindowedApplication>

Now let’s move to the Destination application, which we will have just a form and a button to paste data.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="vertical">
 
	<mx:Script>
	<![CDATA[
 
	[Bindable] 
	private var myObj:Object;
 
	private function pasteFromClipboard():void {
		myObj = Clipboard.generalClipboard.getData("myCustomFormat");
	}
	]]>
	</mx:Script>
	<mx:Form>
		<mx:FormItem label="Name:">
			<mx:TextArea text="{myObj.name}" height="20"/>
		</mx:FormItem>
		<mx:FormItem label="Email:">
			<mx:TextArea text="{myObj.email}" height="20"/>
		</mx:FormItem>
	</mx:Form>
 
	<mx:Button label="Paste" click="pasteFromClipboard()"/>
</mx:WindowedApplication>

As said above, to retrieve data in the clipboard we have to use the same key, myCustomFormat. The binding does the rest, populating our form. Here is a video of the result.

Source code is available.

After learning drag and drop we will dig into copy and paste. We have already seen how to use the clipboard class to temporary store data during the drag action. Now we will use the same class to copy and paste an image within an Adobe Air application. We will start with the following layout.

This corresponds to the following mxml code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<mx:WindowedApplication 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	backgroundColor="#222222" color="#f5f5f5" 
	layout="vertical">
 
	<!-- Feedback -->
	<mx:Text id="feedback" height="20"/>
 
	<!-- Image to copy -->
	<mx:Image id="im" source="logo.png"/>
 
	<!-- Commands -->
	<mx:HBox>
	    <mx:Button label="copy" 
	 	click="copyToClipboard()"/>
	    <mx:Button label="paste" 
		click="pasteFromClipboard()"/>	
	    <mx:Button label="clear" 
		click="Clipboard.generalClipboard.clearData(ClipboardFormats.BITMAP_FORMAT)"/>
	</mx:HBox>
 
	<mx:VBox id="copies" width="{im.width}"/>
</mx:WindowedApplication>

Let’s have a look at the copy mechanism. We want to be sure that, before copying, the clipboard has no bitmap (line 3). Then we create a BitmapData object to store the content of the image (lines 4-5) and we put it in the clipboard (line 6). We gently provide some feedback (line 7).

1
2
3
4
5
6
7
8
9

private function copyToClipboard():void {
 
    Clipboard.generalClipboard.clearData(ClipboardFormats.BITMAP_FORMAT);
    var data:BitmapData = new BitmapData(im.width, im.height);
    data.draw(im); // this copies the content in the clipboard
    Clipboard.generalClipboard.setData(ClipboardFormats.BITMAP_FORMAT, data);
    feedback.text = "Data have been copied";
 
}

The paste mechanism is pretty similar to the one illustrated in previous tutorials. We read data from the clipboard (line 3), create a new Image class to store the Bitmap and then add it to the duplicates area (lines 4-7).

1
2
3
4
5
6
7
8
9

private function pasteFromClipboard():void {
 
    var b:Bitmap = new Bitmap(Clipboard.generalClipboard.getData(ClipboardFormats.BITMAP_FORMAT) as BitmapData);
    var i:Image = new Image();
    i.height = b.height;
    i.addChild(b);
    copies.addChild(i);
 
}

This is the intended result.

Source code is available.
Next time we will see how to copy and paste a complex object.

In this tutorial we will see how to show images dragged from the file system into an Adobe Air application. As we have seen in other tutorials to intercept when something is dragged and dropped on an Adobe Air application we need to specify two handlers: nativeDragEnter and nativeDragDrop. To accept the drag&drop the content of the clipboard has to be a list of files (line 12). When there is a drop we store the content in an array (line 18). For each element of the array we check the extension (png in our case) and we create an image object, which we add to a tile list (lines 20-26).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="vertical" 
    nativeDragEnter="dragEnterHandler(event)" 
    nativeDragDrop="dropHandler(event)">
 
    <mx:Script>
	<![CDATA[
 
        import mx.controls.Image;
 
	private function dragEnterHandler(e:NativeDragEvent):void {
	    if (e.clipboard.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)) {
		NativeDragManager.acceptDragDrop(this);
	    }
	}
 
	private function dropHandler(e:NativeDragEvent):void {
	    var files:Array = e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
 
	    for each (var f:Object in files) {
	  	if (f.extension == "png") {
		    var image:Image = new Image();
		    image.source = "file:///" + f.nativePath
		    droppedImages.addChild(image);
		}
	    }
	}
	]]>
    </mx:Script>
 
    <mx:Tile id="droppedImages" />
</mx:WindowedApplication>

The result should look something like this video.

Source code is available.

In a previous tutorial we have seen how to drag and drop images from a native application (Fireworks) to Adobe Air and between two air apps. In this post I will show how to drag and drop text from a document (pdf, html, txt) into a text area of an Adobe Air application.
Our application has to specify two handlers: nativeDragEnter and nativeDragDrop (lines 3-4). In the first we will check whether the content in the clipboard is textual (lines 11-12), in the second we will dump the content in a Text component (line 17).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="vertical" 
    nativeDragEnter="dragEnterHandler(event)" 
    nativeDragDrop="dropHandler(event)">
 
    <mx:Script>
	<![CDATA[
 
	private function dragEnterHandler(e:NativeDragEvent):void {
	    // check whether content is textual
	    if (e.clipboard.hasFormat(ClipboardFormats.TEXT_FORMAT)) {
	 	NativeDragManager.acceptDragDrop(this);
	    }
	}
 
	private function dropHandler(e:NativeDragEvent):void {
	    droppedText.text = e.clipboard.getData(ClipboardFormats.TEXT_FORMAT) as String;
	}
 
	]]>
    </mx:Script>
 
    <mx:Text id="droppedText" width="100%"/>
</mx:WindowedApplication>

Let’s check whether it works!

Happy drag&dropping :)
Source code is available.
In the next tutorial we will see how to drag and drop images from the file system.
Stay tuned.

In this tutorial we will learn the basics of native drag and drop in Adobe Air. Specifically we will see two examples:

• drag an image from a native application (Fireworks) and drop it onto an air application
• drag an image from an air application and drop it onto another air application

We will start by implementing the target application, which accepts the drop action. To enable this there are two behaviors to specify: what to do when something is dragged over the app and what to do when there is a drop action. These correspond to two events: nativeDragEnter and nativeDragDrop, both belonging to the WindowedApplication class. So we will start with this code.

1
2
3
4
5
6
7

<mx:WindowedApplication 
        xmlns:mx="http://www.adobe.com/2006/mxml" 
        layout="absolute" 
	nativeDragEnter="dragEnterHandler(event)" 
	nativeDragDrop="dropHandler(event)">
 
</mx:WindowedApplication>

Once associated the handlers we need to define them.

25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<mx:Script>
	<![CDATA[
 
	private function dragEnterHandler(e:NativeDragEvent):void {
		if (e.clipboard.hasFormat(ClipboardFormats.BITMAP_FORMAT)) {
			NativeDragManager.acceptDragDrop(this);
		}
	}
 
	private function dropHandler(e:NativeDragEvent):void {
		var data:BitmapData = e.clipboard.getData(ClipboardFormats.BITMAP_FORMAT) as BitmapData;
		var myBit:Bitmap = new Bitmap(data);
		stage.addChild(myBit);
	}
 
      ]]>
</mx:Script>

In the nativeDragEnter event we have to check whether the dragged item is of type bitmap, if yes we can accept the drag (lines 29-30). During the drag a copy of the item is stored in the system’s clipboard. To replicate it in the target application we have to read it (line 35), clone it (line 36) and then add it to the display tree (line 37). This is all we need to do in the target application. At this point we can already test the application. Let’s run it, open an image in Fireworks and drag&drop it. See the video below.

Now let’s move to the other case: we start dragging an image from another air application. Here we have to mimic the behavior of Fireworks above: copy in the system clipboard the image when there is a startDrag action. Let’s start by adding an image to the application.

1
2
3
4
5
6
7
8

<mx:WindowedApplication 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute">
 
	<mx:Image id="image" 
		source="logo.png" 
		mouseDown="startDragDrop(event)"/> 
</mx:WindowedApplication>

As you can see we attached a function to the mouseDown event. Now let’s define this function.

20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<mx:Script>
	<![CDATA[
 
	private function startDragDrop(e:MouseEvent):void {
 
		var data:BitmapData = new BitmapData(image.width, image.height);
		data.draw(image);
 
		// create my clipboard object to be passed to dragmanager
		var cb:Clipboard = new Clipboard();
		cb.setData(ClipboardFormats.BITMAP_FORMAT, data);
 
		// data here is a 'representative' of the dragged object during dragging.
		NativeDragManager.doDrag(this, cb, data); 
 
	}
	]]>
</mx:Script>

We create a copy of the image (lines 25-26). We use this in two cases: to put it in a clipboard object (line 30) and to provide feedback during the dragging (line 33). Now we can run both applications and check if everything is correct.

Simple uh? Please drop a comment if you have any followup question.
Source code is available.

Today a new version of Focused has been released. It is ready since yesterday but google code was under maintenance and I had to postpone the release.

Three new features:

• Pressing esc does not exit from the full screen mode
• Besides characters now you can also visualise word count
• .txt is added by default if an extension is not provided

If you are using version 0.7 you should receive a notification about the new version; just follow the update procedure. If you want to download 0.8 version go to the Focused home page.
It requires Adobe Air Installer 1.5.2.

Enjoy!

If you are planning to build a RIA both in web and desktop format Flex is a good candidate. I suspect that both will be pretty similar, and probably the desktop version will have extended functionalities that exploit the capabilities of the operative system. If you are the programmer of such a RIA you probably might not want to have two separate projects. Or at least you might need to have some core code, shared by projects, which you change just once. Although some solution has already been proposed, here is my take, a very simple one: a symbolic link!
Just put the core code in a Flex project and then create a folder in the Air project, which is not a real folder but a symbolic link to the folder already contained in the Flex project.

Step by Step

Let’s start with a Flex project. We’ll name it MyFlexProject. Then we create a class, called MyClass, as in the picture below.

We will add a trace statement to show when an instance of MyClass is created.

1
2
3
4
5
6
7
8
9
10
11
12

package com.studiomagnolia.shared
{
	public class MyClass extends Object
	{
		public function MyClass()
		{
			super();
			trace("Created an instance of MyClass");
		}
 
	}
}

Now we create the Air project. Let’s call it MyAirProject. And here comes the trick. Open a shell and move to the src directory of the Air project. Here you have to create a symbolic link which points to the src/com folder of MyFlexProject.
The code for bash shell is the following:

      ln -s ../../MyFlexProject/src/com

Now if you refresh MyAirProject you will see that the src folder contains a com subfolder. Cool uh? Now let’s write some code to see whether we can use MyClass in the Air project.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onCreationComplete()">
 
	<mx:Script>
		<![CDATA[
 
			import com.studiomagnolia.shared.MyClass;
 
			private function onCreationComplete():void {
				var c:MyClass = new MyClass();
 
			}
 
		]]>
	</mx:Script>
 
</mx:WindowedApplication>

In the console you should see the trace statement. You can access/edit/save the core code from both the Flex and the Air project. Try changing the trace statement within the Air project and you’ll see changes reflected into MyFlexProject.

Hope this helps.

Air is Adobe’s proposal to build Rich Internet Applications by means of Html/Js, Flex or Flash. There are alternatives and one caught my attention since a while: Titanium. It is still in a preview release stage but it showcases good features and possibilities. For example the clone of Tweetie built on Titanium is a stunning demo.
Since I suspect that memory consumption will be a problem for every ria SDK which aims at being crossplatform, I had a look at the Tweetanium application in the demo section. Downloaded, installed and loaded three timelines: home, friends and replies. I did the same with Posty.
Below is a screenshot comparing memory consumption.

I am aware it is a shallow approach, but Tweetanium is much more hungry than Posty, in spite the fact that Tweetanium supports just one service (Twitter) whereas Posty includes Twitter, Jaiku, Tumblr, Friendfeed and Identi.ca. That said I list few items which can help to contextualize the comparison:

• Disclosure: I am the author of Posty, though I think the comparison is pretty fair. Anyway I am open to criticism.
• Titanium is a prerelease version. It can improve.
• The Air framework is a bit ‘older’ than Titanium, probably more time has been spent to improve memory consumption
• Posty’s memory usage has been optimized, whereas Titanium (I think) has been built to show how easy is to build a Twitter client with the SDK, so probably not much effort has been put in optimizing memory consumption.
• Air’s is made by Adobe, a company. Probably this means more money and time invested in a project (though I am clearly aware that more money does not mean a better product)
• The comparison regards only memory consumption. I am sure there are many other aspects that can be put on the table before saying “this is better than that”.

This is why I think this post has just to provoke a discussion. I will be glad to hear your opinion.