I’ve made a video with my little workflow that you can watch it here (I couldn’t believe how easy it was).

You can also see the running demo (and download the source files) here.

So I am trying to send a message from a Flex application running in Flash Player to an AIR application. In the AIR application (called testAIR) I have something like:

private function initApp():void {
	var inbound:LocalConnection = new LocalConnection();
	//only allow connections from localhost
	inbound.allowDomain("localhost");
	inbound.client = new Object();
	//this is the function that will be called by the Browser App
	inbound.client.notifyPayment = function test():void {
		Alert.show("HERE");
	};
	inbound.connect("paymentSample");
}

pretty straightforward, right from the book.

In the Flex app I just do:

outbound.connect("paymentSample");
outbound.send("app#testAIR:paymentSample","notifyPayment");
outbound.close();

You might think that this should work. Well … NOT.  This is because in the AIR app the inbound LocalConnection is a variable that is declared in the local scope of a method. Now I was expecting that when I call  the connect method the inbound object will be referenced by another object (some LocalConnection manager, or event handler) and it will not get garbage collected after the method ends. Well, apparently is not the case. Either there is a bug in AIR, either this reference is a weak reference so it gets garbage collected. This means that by the time you try to send the message from Flash Player your inbound object is long gone!

The resolution is quite simple. You just need to reference the inbound object somewhere else, making him a member of class or something. In my case I just declare it as a private variable inside my MXML component:

private var inbound:LocalConnection = new LocalConnection();

private function initApp():void {
	//only allow connections from localhost
	inbound.allowDomain("localhost");
       ....

Hope this will help someone

I found this quite easy to implement using Flex 4. Because the list can be skinned in MXML it’s so easy to program the skin and stay in MXML for the most part. The only thing that I actually needed to program was how the elements are laid out.

The basic List skin looks like this:

<s:states>
    <s:State name="normal"/>
    <s:State name="hover"/>
    <s:State name="disabled"/>
</s:states>

<fx:Metadata>[HostComponent("spark.components.List")]</fx:Metadata>
<s:DataGroup itemRenderer="components.RepeatedItem1"
        clipAndEnableScrolling="true"  id="dataGroup"
        rollOver="currentState='hover'">
    <s:layout>
        <components:LargeCircleLayout id="myLayout" radius="1400"
            stepAngle="0" stepAngle.hover="3.5"/>
    </s:layout>
</s:DataGroup> 

Notice that it’s nothing but a DataGroup that has a layout. I’ve also added the Hover state to be able to open the list when you hover over it.

To add the nice effect it’s just a matter of animating one layout property:

<s:transitions>
    <s:Transition autoReverse="true">
        <s:Animate target="{myLayout}" duration="200">
            <s:SimpleMotionPath property="stepAngle"/>
        </s:Animate>
    </s:Transition>
</s:transitions>

You can take a look at the source code here and watch the list here.

You can also test the msg.html (sandbox/msg.html) file inside a browser (doesn’t seems to work on Mozilla, or on my Mozilla). The code that pushes the notification in AIR is located at line 204 and is the only modification that I’ve done to the original MSN Messenger sample.

You can download the code from here.

Next open Visual Web Developer and open a Web Site in the same location as the Flex Builder project.  Open web.config and make sure you have <compilation debug=”true”> (this inserts debugging symbols for the .NET code).

Now we need to use the same ASP.NET Developer Server for both the Flex Builder and Visual Web Developer. Since by default both tools try to start one instance we need a little trick to do that:

Start the MXML project through Flex Builder; this will start ASP.NET Developer Server usually on port 3000. Then go to Visual Web Developer; on Project Property Page (Right Click on the Project in the Solution Explorer) click Start Options and select Use Custom Server and enter http://localhost:3000/testDotNet/

Start also the .NET project just to connect the Visual Web Developer to the ASP.NET Developer Server instance. Now you will be able to debug both Flex and .NET code:

public function editEnd(event  ataGridEvent):void {

  Alert.show("Do you want to save changes?","Save changes",Alert.YES | Alert.NO,null,function(ev:CloseEvent):void {

      if (ev.detail == Alert.YES) {

        //LABEL2: This will be reached long after the LABEL1 has been reached. 

        //So at this point the grid has been executed the default behavior for the change event

      }

    });

    //LABEL1: Because of the asynchronous nature this will be reached right after the Alert.show call    

}

So my idea of solving this was to save the new value, prevent the default grid behavior of updating the dataProvider and update the data provider manually on the Alert.show closeHandler.

Here is some code that illustrates this:

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

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

        initialize="initData()" layout="absolute">

  <mx:Script>

   <![CDATA[

       import mx.controls.TextInput;

       import mx.controls.Alert;

    import mx.collections.*;

    import mx.events.*;

      private var DGArray:Array = [

         {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},

         {Artist:'Pavement', Album:'Brighten the Corners', Price:11.99}];

      [Bindable]

      public var initDG:ArrayCollection;

      public function initData():void {

         initDG=new ArrayCollection(DGArray);

      }

      public function editEnd(event:DataGridEvent):void {

          //Save the data before calling Alert

        var myEditor:TextInput =

                    TextInput(event.currentTarget.itemEditorInstance);

        // Get the new value from the editor.

        var newVal:String = myEditor.text;

        var dataObject:Object = event.itemRenderer.data;

        var property:String = event.dataField;

        Alert.show("Do you want to save changes?","Save changes",Alert.YES | Alert.NO,null,function(ev:CloseEvent):void {

            //If we have clicked YES then update the data collection manually

            if (ev.detail == Alert.YES) {

                  dataObject[property] = newVal.toString();

                  initDG.itemUpdated(dataObject,property);

            }

          });

          //prevent data grid to update his dataProvider collection

          event.preventDefault();

      }

   ]]>

   </mx:Script>

   <mx:DataGrid id="myGrid" width="350" height="200"

      dataProvider="{initDG}" editable="true" itemEditEnd="editEnd(event)" >

      <mx:columns>

         <mx:DataGridColumn dataField="Album" />

         <mx:DataGridColumn dataField="Price" />

      </mx:columns>

   </mx:DataGrid>

   <mx:DataGrid id="readOnlyGrid" width="350" height="200"

      dataProvider="{initDG}" x="0" y="208">

      <mx:columns>

         <mx:DataGridColumn dataField="Album" />

         <mx:DataGridColumn dataField="Price" />

      </mx:columns>

   </mx:DataGrid>

</mx:WindowedApplication>

This might be a little bug, but I found a workaround. I manually edited .actionScriptProperties file and in the <application> section added the FDMSBridge.as:

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

<actionScriptProperties mainApplicationPath="testBlaze.mxml" version="3">

<compiler additionalCompilerArguments="-services "C:/work/wksp/samples/testBlaze/WebContent/WEB-INF/flex/services-config.xml" -locale en_US" copyDependentFiles="true" enableModuleDebug="true" generateAccessible="false" htmlExpressInstall="true" htmlGenerate="true" htmlHistoryManagement="true" htmlPlayerVersion="9.0.28" htmlPlayerVersionCheck="true" outputFolderPath="bin-debug" rootURL="http://localhost:8080/testBlaze" sourceFolderPath="flex_src" strict="true" useApolloConfig="false" verifyDigests="true" warn="true">

<compilerSourcePath/>

<libraryPath defaultLinkType="1">

<libraryPathEntry kind="4" path=""/>

<libraryPathEntry kind="1" linkType="1" path="flex_libs"/>

</libraryPath>

<sourceAttachmentPath/>

</compiler>

<applications>

<application path="FDMSBridge.as"/>

<application path="testBlaze.mxml"/>

</applications>

<modules/>

<buildCSSFiles/>

</actionScriptProperties>

Now the FDMSBridge.as should be compiled as a normal Flex application: