A few days ago, Adobe asked me to speak on a workshop about the integration between ColdFusion 8 and Flex.
As a ColdFusion developer, the ColdFusion part was not a problem, but I was a bit afraid by the Flex part, since I’ve never used Flex or flex builder before. I eventually decided that I would meet the challenge, and I started working on this interesting topic. Today, the workshop is over and I feel it is time to share with you some of my findings about how ColdFusion and flex integrate. So why is ColdFusion the preferred back-end for your Flex Application?
1) The only thing you really need to make a Flex application talk to ColdFusion is Flash Remoting, and the good news is : Flash Remoting is preconfigured in ColdFusion (Version 7.0.2 and up), right out of the box! In other words: no need to spend your time in configuration files, you can start working on your App Right away!
2) The tools you need to create both your cfml code (server side) and mxml/actionScript (client side) are all eclipse based! Flex builder for the MXML/Action script, the open-source CfEclipse plug-in for your CFML and the coldFusion extensions for Flex builder (included into Flex Builder 3) provides some additionnal wizards and tools to better help you. In other words, you develop both the client-side and server side part of your app in the same environment.
3) Your existing ColdFusion CFC’s are ready to be consumed by your flex/air application with little or no rewriting. Take your application ‘as is’ and make it a flex back-end in a matter of minute. The only thing to do is to set the ‘access’ attribute of your <cffunction> to remote, and to make sure you specify a ‘returntype’.
So here is the complete recipe to make it all work!
1) Your CFC
<cffunction name=”helloWorld” access=”remote” returntype=”String”>
<cfreturn “hello From Colffusion server”/>
</cffunction>
2) In Flex, use the RemoteObject class to expose your cfc’s remote methods to your flex application.
<mx:RemoteObject destination=”ColdFusion” source=”package.componentName” id=myRemoteObject />
The great thing here is the “destination” attribute that is set to the value of “ColdFusion”. That destination is needed for flash remoting to find the correct settings to speak to your ColdFusion server. This destination is created by default when installing the ColdFusion server, so the only thing you need to do is to use it! For those who want more, or if you want to create your own custom destinations, take a look at the ‘remoting-config.xml’ file situated in the {webroot}\WEB-INF\Flex folder (on a standard Windows installation, it is in C:\ColdFusion8\wwwroot\WEB-INF\flex\remoting-Config.xml)
4) Your cfc’s remote method are now exposed to your flex app under the name ‘myRemoteObject’.
<mx:Button label=”call a cfc Method using flash remoting” click=”myRemoteObject.helloWorld()”/>
<mx:label id=”displayCfString”/>
A call is send to the ColdFusion server which sends back the string “Hello from ColdFusion Server” in your flex app. This triggers an event of type ResultEvent in your flex app. So let’s add one last thing to your remoteObject
<mx:RemoteObject destination=”ColdFusion” source=”package.componentName” id=myRemoteObject result=”displayCfString.text=event.result as String”/>
Run your app and… that’s how simple it is to hook CF and Flex toegether!
The slides of my presentation in PDF format (in French)
The CFC and mxml file discussed in this post
More on flash remoting and ColdFusion / Flex integration
http://www.adobe.com/devnet/flex/flex_cf.html
