Getting Database Results into Flex

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:)

Remoting with Flex 3

Coldfusion component


<cfcomponent>
<cffunction name="GetHello" output="false" access="remote" returntype="string">
    <cfreturn "Hello World">
    </cffunction>
</cfcomponent>

Flex


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

    <mx:Script>
        <![CDATA[
            import mx.rpc.events.ResultEvent;
            import mx.utils.ObjectUtil;

            private function GetHello_handler( event:ResultEvent):void {
                Result.text = ObjectUtil.toString(event.result);
            }
        ]]>
    </mx:Script>

    <mx:RemoteObject id="helloWorld" destination="ColdFusion" source="HelloWorld">
        <mx:method name="GetHello" result="GetHello_handler(event)" />
    </mx:RemoteObject>

    <mx:Label id="Result" x="59" y="58" width="87"/>
    <mx:Button x="154" y="56" label=" Get Hello" click="helloWorld.GetHello()" />
</mx:Application>

Flash Guru to Speak at UH

Sam Rivello of Los Angeles-based Rivello Multimedia Consulting will lead two days of presentations beginning tomorrow for the Hawaii Flash User Group. The first, free night will cover Massively Multiplayer Online (MMO) environments and augmented reality. Tuesday’s “Premium Night” will cover more advanced topics relating to the PureMVC framework for Flash and Flex development.

Rivello has designed, developed or managed the development of over 400 Flash and Shockwave games and applications, many for Fortune 1000 companies. He is an Adobe Certified Designer and Developer for Flash, an Adobe Flex Champion, an international public speaker, and a university professor.

The sessions will be held in Room 219 of the Agricultural Sciences Building (1955 East-West Rd.) at the University of Hawaii at Manoa. To attend the free MMO and augmented reality session, RSVP at the Adobe Groups event page. Tickets for the advanced “Premium Night” session are $149, and can be purchased via PayPal through Sam’s RMC Roadshow blog post.

Learn Flex in a Week!

I just saw this on adobe’s website

Learn Flex in a week

Now this is a bold statement, but I am going to try, and I will let you know about my progress, and to see how much I can learn from just watching the videos. I have a good feeling about it too`-`

Flex Skinning

I just went through a tutorial on flexcf and have discovered that you can skin a flex app! This opens a whole new set of doors! A project that I am putting together here locally is using flash CS 3 with ColdFusion, and one of the reasons was that flash CS 3 is easier to modify for a custom look, you know the design aspects, but now I see you can add wonderful designs to flex as well`-`

I checked out AsFusion as well as fill colors, does anybody know of other examples?

Setting up Remoting with Flex & ColdFusion

To get Coldfusion and flash to talk to each other is just as easy in Flex as it is in flash. Remember Flex is just the tool, and nothing more. When you compile flex you are just created a swf! To start this out I am just setting up the remoting call, later I will write a full app, which I have been meaning to do, but I have been too busy with school lately. You can check out flexcf Which as so many great examples of using this technology. It is run by Paul who has helped me a great deal in CF in the past! You can check out his blog too.

The mxml file


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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()" layout="absolute" pageTitle="Remoting Example" backgroundColor="White">

    <mx:Script>

        <![CDATA[

            import mx.rpc.events.ResultEvent;

            import mx.utils.ObjectUtil;

            import mx.controls.Alert;



            [Bindable]

            public var cfcResponse:String;



            //this gets called when the application is done being created

            public function initApp():void{

                //this calls the confirmCFC method in remoting.cfc

                cfc_ro.confirmCFC();

            }



            public function loadConfirm(event:ResultEvent):void{

                //this binds the cfcResponse var to the result of the RO call

                cfcResponse = event.result as String;

            }



        ]]>

    </mx:Script>



    <mx:RemoteObject id="cfc_ro" destination="ColdFusion" source="com.flex.remoting" showBusyCursor="true">

        <mx:method name="confirmCFC" result="loadConfirm(event)" fault="Alert.show(ObjectUtil.toString(event))"/>

    </mx:RemoteObject>

    <mx:Label text="{cfcResponse}" width="100%" />



</mx:Application>

the cfc


<cfcomponent output="false">



	<cffunction name="confirmCFC" returntype="any" access="remote">

		<cfreturn "This is a test to see if Flex is conecting to ColdFusion, from the file remoting.cfc">

	</cffunction>



</cfcomponent>