CFtips.net

Flex Data Grid with ColdFusion Flash Remoting using CFC

Filed under CFC , ColdFusion , Flex

I went to the Sacramento Flex User Group last night and with the help of Seth Duffy, put together my first Flex application integrated with a database using a CFC.  The Sacramento User Group is a lot of fun and you learn a lot!  For more information check out Sac Flex User Group or Sac ColdFusion User Group.

I’ll walk you through the steps to first get the data from the CFC and then to dump that data into a DataGrid.  Later, I’ll post a blog about how to use a CFC to put dynamic data into a Line Chart. Also I learned a few tricks while dealing with CFC and RemoteObjects in which I’ll share in a future blog.

Make sure you set up your dataSource within the ColdFusion Administrator.  I named it: dsnTest

First, create a simple database (I did it in Access), I have a table named: tblChart with 2 columns named: chtData1 and chtData2.  In those columns, I just threw some arbitrary data points into it. 

Next, open up Dreamweaver – File – New- Blank Page – ColdFusion Component.  Dreamweaver creates the CFC for you, I saved it as: Test.cfc       Here is what Dreamweaver creates for you:

<cfcomponent>
                <cffunction name="myFunction" access="public" returntype="string">
                                <cfargument name="myArgument" type="string" required="yes">
                                <cfset myResult="foo">
                                <cfreturn myResult>
                </cffunction>
</cfcomponent>

I changed the function name to “GetData” and we are going ot be returning a query, not a string, so I changed the returntype to “query”.   We will not be accepting an Argument so I deleted the whole cfargument.  Next, declare a variable named:  “qryReturn” and set it to “ “.  Now define the query you wish to use. I did a simple Select * to get both my columns in tblChart.  Finally, use a <cfreturn qryReturn> which sends the queryed information and passes it in the variable qryReturn that we set a few lines before.   

<cfcomponent>
                <cffunction name="GetData" access="public" returntype="query">
                                <cfset var qryReturn = "">
                                <cfquery name="qryReturn" datasource="dsnTest">
                                                SELECT *
                                                FROM tblChart
                                </cfquery>
                                <cfreturn qryReturn>
                </cffunction>
</cfcomponent>

Now to the MXML.  Within the Application tag:

<mx:Script>

      <![CDATA[

            import mx.controls.Alert;

            import mx.rpc.events.FaultEvent;

            import mx.rpc.Fault;

            import mx.rpc.events.ResultEvent;

            private function result(evt:ResultEvent):void {

                  Alert.show(evt.toString());

            }

            private function fault(evt:FaultEvent):void {

                  Alert.show(evt.fault.message);                 

            }

      ]]>

</mx:Script>

Create the <Script> tag which will automatically create the <![CDATA[]]> open and close tags.

TIP! – When working within Flex and Actionscript, be aware that it is CASE sensitive so however you write code, camel case or whatever, stay consistant.

Within the <Script> and CDATA tags, type:
private function result(evt:ResultEvent):void {
      Alert.show(evt.toString());
}

When writing the function, after the “evt:” be sure to use the code hint as you type “ResultEvent” and hit enter.  This ensures that Flex automatically adds the correct Import statements above the function.

At this point, we are simply going to take the data from the query in the cfc and dump it into a alert box to make sure that we do not have any errors.

Now if there is an error, we want to see that as well, so we will create the “fault” function.
private function fault(evt:FaultEvent):void {

      Alert.show(evt.fault.message);
}

Now lets initalize the CFC.
<mx:RemoteObject id="mycfc" destination="ColdFusion" showBusyCursor="true" source="FlexTest.Test" result="result(event)" fault="fault(event)" />

I gave the RemoteObject an ID of “mycfc” – destination=”ColdFusion” (ColdFusion is case sensitive), give the object a source.  When naming the source, think of the periods as “/” as you drill into the correct folder where your CFC is located.  My CFC is located within my main Flex application folder named “FlexTest”, and the name of my CFC is called “Test.cfm”.  You do not need the cfm.  Next, call the function that the CFC will interact with.  Previously we named a function result and fault. 
For result: result="result(event)" and for fault: fault="fault(event)".

So now when Flex loads up the application, it will load our CFC into the function we named to be used whenever we need it.

Now lets add a button and a datagrid:

<mx:Button label="Button" click="mycfc.GetData()"/>

Within the button tag, create the click event by calling the RemoteObject which I gave it an ID of mycfc, followed by the name of the <cffunction> that we gave it within our CFC called “GetData()”.

When we load the application and click the button, we get:

This is showing us that it has executed the ResultEvent and NOT the FaultEvent.  We had a sucessful ColdFusion Flash Remote and we should get the data we expect.

Now lets load that data into a Grid.

<mx:DataGrid id="mygrid" width="487" height="169"/>

With the id, “mygrid”, we can now create the function to load the query data into the grid.
private function result(evt:ResultEvent):void {

                  //Alert.show(evt.toString());

                  mygrid.dataProvider = evt.result;

}

There we go, now we can see the data in the grid that is being pulled from our database.

Here is the complete Flex code for my FlexTest.MXML  application:

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

<mx:Script>

      <![CDATA[

            import mx.controls.Alert;

            import mx.rpc.events.FaultEvent;

            import mx.rpc.Fault;

            import mx.rpc.events.ResultEvent;

            private function result(evt:ResultEvent):void {

                  mygrid.dataProvider = evt.result;

           }

            private function fault(evt:FaultEvent):void {

                  Alert.show(evt.fault.message);                 

            }

      ]]>

</mx:Script>

<mx:RemoteObject id="mycfc" destination="ColdFusion" showBusyCursor="true" source="FlexTest.Test" result="result(event)" fault="fault(event)">

</mx:RemoteObject>     

      <mx:Button label="Button" click="mycfc.GetData()"/>

      <mx:DataGrid id="mygrid" width="487" height="169"/>

</mx:Application>