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