So I had a fight with Flex tonight, and I won! Well kind of I did let Flex tell me what to name my method, and then we played nice with ColdFusion. The first part is my strange mistake with Flex & ColdFusion getting my database results into a flex datagrid. Afterward I changed the method name to not be plural, and I was able to bind my query into a flex datagrid. I am happy that I got it woring in the end!

I am using ColdFusion 9, with the database that ships with ColdFusion 9.

first make sure you set up ColdFuson with Remoting in you Flex project

First I build the component


<cfcomponent>

    <cffunction name="getArtists" access="remote" returntype="query">
        <cfset var qRead = "" />

        <cfquery datasource="cfartgallery" name="qRead">
            SELECT artistid, firstname, lastname, email
            FROM artists
        </cfquery>

        <cfreturn qRead />
    </cffunction>

</cfcomponent>

I usually like to test to see if the ColdFusion component is working properly


  <cfinvoke
     component="ArtistGateway"
     method="getArtists"
     returnVariable="qRead">

     <!--- dump the output--->
     <cfdump  var = "#qRead#">

The cfdump gives the data results expected from the database

Now the Flex part


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">

    <mx:Script>
        <![CDATA[

            import mx.rpc.events.ResultEvent;
            import mx.collections.ArrayCollection;

            [Bindable]
            private var acArtists:ArrayCollection;

            private function initApp() :void {
                ArtistGateway_RO.getArtist();
            }

            private function getArtistsRO_Handler(event:ResultEvent):void {
                acArtists = ArrayCollection(event.result);
            }
        ]]>
    </mx:Script>

    <mx:RemoteObject id="ArtistGateway_RO" destination = "ColdFusion" source ="com.cfcs.ArtistGateway">
        <mx:method name="getArtists" result = "getArtistsRO_Handler(event)" />
    </mx:RemoteObject>

    <mx:DataGrid dataProvider = "{acArtists}" right="10" left="10" top="10" bottom="10">
    </mx:DataGrid>

</mx:Application>

Flash player gives me the error

Now I have checked ant the ArtistGateWay.cfc is located in my webroot http://localhost/com/cfcs/ArtistgateWay.cfc and I think that flex looks from the webroot, in my case localhost, so I think that I have the settings right as “com.cfcs.ArtistsGateWay” the strange part is that it is looking for a method “getArtisit” but the method is getArtists

You can download source here

UPDATED– CODE IS FIXED

This is very strange, I changed the method name in the componet to be getArtist, along with the methos name in mx:method and now everything is working!

I did make one extra change to display a friendly error message using the Alerts in Flex

This is done by adding the fault event

First import the necessary classes


import mx.rpc.events.FaultEvent;
import mx.controls.Alert;

In the block add


private function result(event:ResultEvent):void {
    Alert.show(event.toString());
}

private function fault(event:FaultEvent):void {
    Alert.show("Error while calling cfc: nn" + event.fault.message);
}

You will notice I have 2 line breaks (nn) in the Alert.show to give a little spacing, which I find this easier to read!

finally to use the alert add the fault event in , so that the mx:method looks like this


<mx:method name="getArtist" result = "getArtistsRO_Handler(event)" fault="fault(event)" />

Okay now lets go over the correct code

The Flex application


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">

    <mx:Script>
        <![CDATA[

            import mx.rpc.events.ResultEvent;
            import mx.collections.ArrayCollection;
            import mx.rpc.events.FaultEvent;
            import mx.controls.Alert;

            [Bindable]
            private var acArtists:ArrayCollection;

            private function initApp() :void {
                ArtistGateway_RO.getArtist();
            }

            private function result(event:ResultEvent):void {
                  Alert.show(event.toString());
            }

            private function fault(event:FaultEvent):void {
                  Alert.show("Error while calling cfc: nn" + event.fault.message);
            }

            private function getArtistsRO_Handler(event:ResultEvent):void {
                acArtists = ArrayCollection(event.result);
            }
        ]]>
    </mx:Script>

    <mx:RemoteObject id="ArtistGateway_RO" destination = "ColdFusion" source ="QueryToDataGrid-debug.cfcs.ArtistGateway">
        <mx:method name="getArtist" result = "getArtistsRO_Handler(event)" fault="fault(event)" />
    </mx:RemoteObject>

    <mx:DataGrid dataProvider = "{acArtists}" right="10" left="10" top="10" bottom="10">
    </mx:DataGrid>

</mx:Application>

The ColdFusion componet


<cfcomponent>

    <cffunction name="getArtist" access="remote" returntype="query">
        <cfset var qRead = "" />

        <cfquery datasource="cfartgallery" name="qRead">
            SELECT artistid, firstname, lastname, email
            FROM artists
        </cfquery>

        <cfreturn qRead />
    </cffunction>

</cfcomponent>

I have no idea why Flex would not let me use getArtists and would only work using getArtist, maybe it is a caching issue, or just flex does not like plural methods!

Where is the finally correct code if you are interested in using it

The final Flex datagrid

One final update

Flex does not have an issue with plural methods, it was a silly typo of mine!
I would like to thank Paul Hastings from the  CF -Talk mailing list for correcting my problem!
He pointed out, “your error is flex side, your init method is trying to call getArtist() which  doesn’t exist on that service.”

Now everything makes sense, thanks Paul!

I was able to figure this out, and I even figured out how to use the Alerts for an error message, so all in all a good night with Flex & ColdFusion:)

By |2009-12-17T21:27:20+00:00December 17th, 2009|