Calendar

January 2008
M T W T F S S
« Dec   Feb »
 123456
78910111213
14151617181920
21222324252627
28293031  

Tag Cloud

Categories

Archives

Highest Rated

Most Viewed

Recent Posts

Recent Comments


« Spelling Plus Library | Main | Big Announcement Coming Soon! »

More fun with AIR LocalConnection (Source Included)

By Rich Tretola | January 11, 2008Print This Post Print This Post
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5 out of 5)
Loading ... Loading ...
1,180 views

This sample has 2 components. The AIR portion and the Flex web portion. It allows you to drag and image into the AIR application and send it to the browser based Flex application via LocalConnection.

The AIR application accepting the image:
eflex012.jpg

The image now showing in the browser:
eflex013.jpg

Download and install this AIR application. Run the application, click the link to http://www.everythingflex.com/flex3/DropIt/Index.html to open the browser portion of the application.

As long as you have green check marks within both the AIR and Flex apps you are ready to give it a shot. Drag a small gif or jpg into the red box of the AIR application, wait a few seconds and you should get an Alert telling you to check your browser.

Here is the source (the AIR and Flex apps also have view source enabled)

AIR:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
  3.     layout="absolute" creationComplete="init()"
  4.     horizontalScrollPolicy="off" verticalScrollPolicy="off"
  5.     width="425" height="325" backgroundColor="#FFFFFF" viewSourceURL="srcview/index.html">
  6.     <mx:Script>
  7.         <![CDATA[
  8.             import mx.events.FlexEvent;
  9.             import mx.graphics.codec.JPEGEncoder;
  10.             import mx.controls.Alert;
  11.             import flash.net.LocalConnection;
  12.             import flash.events.StatusEvent;
  13.  
  14.             import mx.controls.Image;
  15.             import flash.filesystem.File;
  16.  
  17.             [Bindable]
  18.             private var targetURL:String = "http://www.everythingflex.com/flex3/DropIt/Index.html";
  19.  
  20.             public var outbound:LocalConnection = new LocalConnection();
  21.             public var inbound:LocalConnection = new LocalConnection();
  22.  
  23.             [Bindable]
  24.             private var isConnected:Boolean = true;
  25.  
  26.             [Bindable]
  27.             [Embed(source="y.gif")]
  28.             private var yes:Class;
  29.  
  30.             [Bindable]
  31.             [Embed(source="x.gif")]
  32.             private var no:Class;
  33.  
  34.             private var timer:Timer;
  35.  
  36.             private var bitmapData:BitmapData;
  37.  
  38.             public function init():void{
  39.                 isConnected = false;
  40.                 outbound.addEventListener(StatusEvent.STATUS, onStatus);
  41.                 inbound = new LocalConnection();
  42.                 inbound.allowDomain('*');
  43.                 inbound.client = this;
  44.                 try {
  45.                     inbound.connect("aircon");
  46.                 } catch (error:ArgumentError) {
  47.                     Alert.show("Connection Failure");
  48.                 }
  49.                 timer = new Timer(1000, 0);
  50.                 timer.addEventListener("timer", timerHandler);
  51.                 timer.start();
  52.                 this.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER,onDragIn);
  53.               this.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP,onDrop);
  54.             }
  55.  
  56.             public function timerHandler(event:TimerEvent):void {
  57.                 outbound.send("everythingflex.com:flexcon", "testCon", outbound.domain);
  58.             }
  59.  
  60.             public function testCon(s:String):void {
  61.                 isConnected = true;
  62.             }
  63.  
  64.             public function getResponse(s:String):void {
  65.                 Alert.show(s,"Success");
  66.             }
  67.  
  68.             private function onStatus(event:StatusEvent):void {
  69.                 if(event.level == "error"){
  70.                     isConnected = false;
  71.                 } else{
  72.                     isConnected = true;
  73.                 }
  74.             }
  75.  
  76.  
  77.             private function onDragIn(event:NativeDragEvent):void{
  78.               NativeDragManager.acceptDragDrop(this);
  79.             }
  80.  
  81.         private function onDrop(event:NativeDragEvent):void{
  82.           var dropfiles:Array = event.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
  83.           for each (var file:File in dropfiles){
  84.             switch (file.extension.toLowerCase()){
  85.               case "png" :
  86.                 addImage(file.nativePath);
  87.                 break;
  88.               case "jpg" :
  89.                 addImage(file.nativePath);
  90.                 break;
  91.               case "jpeg" :
  92.                 addImage(file.nativePath);
  93.                 break;
  94.               case "gif" :
  95.                 addImage(file.nativePath);
  96.                 break;
  97.               default:
  98.                 Alert.show("Unmapped Extension");
  99.               }
  100.             }
  101.           }
  102.  
  103.           private function addImage(nativePath:String):void{
  104.             var i:Image = new Image();
  105.             i.visible = false;
  106.             i.addEventListener(FlexEvent.UPDATE_COMPLETE,sendJPEG);
  107.             if(Capabilities.os.search("Mac") >= 0){
  108.               i.source = "file://" + nativePath;
  109.             } else {
  110.               i.source = nativePath;
  111.             }
  112.             this.addChild(i);
  113.           }
  114.  
  115.           private function sendJPEG(event:FlexEvent):void{
  116.             try{
  117.             var img:Image = event.target as Image;
  118.              bitmapData = new BitmapData(img.width, img.height);
  119.             bitmapData.draw(img);
  120.             var bitmap:Bitmap = new Bitmap(bitmapData);
  121.              var jpg:JPEGEncoder = new JPEGEncoder();
  122.              var ba:ByteArray = jpg.encode(bitmapData);
  123.              outbound.send("everythingflex.com:flexcon", "receiveImage", ba);
  124.             } catch(e:Error){
  125.  
  126.             }
  127.           }
  128.  
  129.           private function setVisuals(b:Boolean):Boolean{
  130.                 if(b){
  131.                     received.source = yes;
  132.                     message.text = "Drop a small image in the zone below";
  133.                 } else {
  134.                     received.source = no;
  135.                     message.text = "Make sure browser is open and pointing to:"
  136.                 }
  137.                 return b;
  138.             }
  139.  
  140.             private function openBrowser():void{
  141.                 var url:String = targetURL;
  142.                 var urlRequest:URLRequest = new URLRequest(url);
  143.                 navigateToURL(urlRequest);
  144.             }
  145.  
  146.         ]]>
  147.     </mx:Script>
  148.  
  149.     <mx:Label text="Connected to Flex" x="146.5" y="282"/>
  150.     <mx:Image id="received" x="260.5" y="282" width="16" height="18" source="{no}"/>
  151.     <mx:Text id="message" x="10" y="10" width="403" textAlign="center" color="#000000" fontWeight="bold"/>
  152.     <mx:LinkButton id="link" visible="{!setVisuals(isConnected)}" click="openBrowser()" label="{targetURL}" x="10" y="34" textAlign="center" width="100%"/>
  153.     <mx:HBox id="dropzone" x="10" y="57" width="403" height="218" borderStyle="solid" borderThickness="3" borderColor="#E81414">
  154.     </mx:HBox>
  155.  
  156. </mx:WindowedApplication>

Flex:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  3.     creationComplete="init()" viewSourceURL="srcview/index.html">
  4.     <mx:Script>
  5.         <![CDATA[
  6.             import flash.net.LocalConnection;
  7.             import mx.controls.Alert;
  8.  
  9.             private var inbound:LocalConnection = new LocalConnection();;
  10.             private var outbound:LocalConnection = new LocalConnection();;
  11.  
  12.             private var outboundDomain:String;
  13.  
  14.             private var timer:Timer;
  15.  
  16.             [Bindable]
  17.             [Embed(source="y.gif")]
  18.             private var yes:Class;
  19.  
  20.             [Bindable]
  21.             [Embed(source="x.gif")]
  22.             private var no:Class;
  23.  
  24.             public function init():void{
  25.                 outbound.addEventListener(StatusEvent.STATUS, onStatus);
  26.                 inbound.allowDomain('*');
  27.                 inbound.client = this;
  28.                 try {
  29.                     inbound.connect("flexcon");
  30.                 } catch (error:ArgumentError) {
  31.                     Alert.show("Connection failed, already in use", "Error");
  32.                 }
  33.             }
  34.  
  35.             private function onStatus(event:StatusEvent):void {
  36.                 if(event.level == "error"){
  37.                     received.source = no;
  38.                 } else{
  39.                     received.source = yes;
  40.                 }
  41.             }
  42.  
  43.             public function testCon(s:String):void{
  44.                 outboundDomain = s;
  45.                 outbound.send(outboundDomain + ":aircon", "testCon", "OK");
  46.                 timer = new Timer(1000, 0);
  47.                 timer.addEventListener("timer", timerHandler);
  48.                 timer.start();
  49.             }
  50.  
  51.             public function timerHandler(event:TimerEvent):void {
  52.                 outbound.send(outboundDomain + ":aircon", "testCon", "OK");
  53.             }
  54.  
  55.             public function receiveImage(ba:ByteArray):void {
  56.                 img.source = ba;
  57.                 respond();
  58.  
  59.             }
  60.  
  61.             private function respond():void {
  62.                 outbound.send(outboundDomain + ":aircon", "getResponse", 'Check you browser');
  63.             }
  64.  
  65.         ]]>
  66.  
  67.     </mx:Script>
  68.  
  69.     <mx:Canvas horizontalCenter="0" verticalCenter="0" backgroundColor="#FFFFFF" width="100%" height="100%">
  70.         <mx:Image id="img" x="10" y="36"/>
  71.         <mx:Label text="Connected to AIR" x="241" y="14" color="#000000"/>
  72.         <mx:Image id="received" x="352" y="14" width="16" height="16" source="{no}"/>
  73.     </mx:Canvas>
  74. </mx:Application>

Share/Save/Bookmark

Topics: ActionScript 3, Adobe AIR, Flex 3 (Moxie) |

10 Responses to “More fun with AIR LocalConnection (Source Included)”

  1. Patrick Says:
    April 17th, 2008 at 2:22 pm

    Hey i bought your book. And I have qeustions… How can I drag and drop any file, not just an image and encode it as a byteArray? I see in your example, you are using a flex event, is there another way to get this data from event target, for, such as .exe, .psd etc.

    [Reply to this comment]
  2. everythingflex Says:
    April 17th, 2008 at 2:51 pm

    You can drag any file type into AIR, you would just need to add a new case statement to the switch in my example to handle the new file extension.

    [Reply to this comment]
  3. tom Says:
    April 21st, 2008 at 7:06 am

    Hi man, your AIR package is no longer supported by the new runtime, please recompile it!!

    [Reply to this comment]
  4. everythingflex Says:
    April 21st, 2008 at 3:48 pm

    I just uploaded a newly compiled version.

    [Reply to this comment]
  5. tom Says:
    April 26th, 2008 at 5:27 am

    Ok many thanks, it works very well!!!!

    Actually, I try but my published ID is not verified, so I have the felling that local connection works only if the AIR published ID is verifed?

    Did you pay a certificate for this?

    Many thanks

    [Reply to this comment]
  6. Chuck Freedman Says:
    April 29th, 2008 at 3:49 pm

    Rich, this is genius. What a great example of AIR! I’m curious, what led you to code this example?

    [Reply to this comment]
  7. everythingflex Says:
    April 29th, 2008 at 7:18 pm

    Hey Chuckstar!

    Just playing with AIR and thought why not. :-)
    I have another idea related to this sample that could actually have a business purpose.

    [Reply to this comment]
  8. Warren Says:
    October 23rd, 2008 at 9:58 am

    Hi there,

    I can get AS2 Flash in browser to communicate with AIR but not back again. ie I cannot get comms back from AIR to AS2 Flash in browser.

    Any suggestions please.

    [Reply to this comment]
  9. Warren Says:
    October 24th, 2008 at 5:17 am

    Still struggling with bi-directional AIR to AS2 LocalConnection. Any ideas out there?

    [Reply to this comment]
  10. hierro Says:
    November 13th, 2008 at 12:08 pm

    is there a way to connect between 2 AIR applications on same pc?

    is mandatory to have verified certificate to use localconnection ?

    nice work u did :)

    [Reply to this comment]

Comments