Simple example of accessing ColdFusion data with Flex

This post is more than 2 years old.

About a week ago I exchanged a few emails with Susan. She was learning Flex, and while she thought she understood the basic UI stuff (layout, widgets), she was having a real hard time grokking the basics of using ColdFusion Components with Flex. I whipped up a quick demo for her that was as simple as possible and I thought I'd share it on the blog. Please note that Flex, like ColdFusion, provides multiple ways of doing things, so this code could probably be done in many other ways.

My blog entry will make use of Flex Builder 3. The UI will be a bit different if you are using Flash Builder 4. To begin, I created a simple project named TestB. I specified "Web" for Application Type, and most importantly, selected "ColdFusion" at the bottom in the Application Server Type. Notice I've got "Use remote object access service" is checked and I've selected "ColdFusion Flash Remoting." (Most of this was selected for me, but I don't know if that is simple FB remembering for me.)

Click next. Now on the next page, a lot will depend on your ColdFusion setup. Mine is a standalone server tied to Apache.

Click Finish (or Next and Finish) and you should be presented with a (mostly) blank MXML file.

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

</mx:Application>

Ok, so for my example, I didn't want to worry about input and output. Instead, I just want to call a CFC that returns a string. Using my ... um... other editor... I created a very simple CFC named testa in web root:

<cfcomponent>

<cffunction name="echotest" access="remote" returnType="string"> <cfreturn "The time is #timeFormat(now())#"> </cffunction>

</cfcomponent>

I've got one method, echotest, that simply returns a sentence with the time. Note: The method is marked remote. I believe you can setup ColdFusion to allow Flash Remoting calls to methods marked public, but I don't think I'd do that. It's simpler, and more direct (IMHO) to mark my methods remote that I want exposed to Flex.

I saved the CFC and ran it in my browser just to ensure I didn't do anything stupid:

http://localhost/testa.cfc?method=echotest

Ok, now back in Flex Builder. If you read the docs (Accessing Server-Side Data with Flex) you will see that there are a few ways to access data with Flex. The best way, as far as I know, will almost always be Flash Remoting. This is done with the RemoteObject component. The tag lets you define a Flash Remoting connection to a CFC, like so:

<mx:RemoteObject destination="ColdFusion" source="testa" id="cfservice"> <mx:method name="echotest" fault="handleFault(event)" result="handleResult(event)" /> </mx:RemoteObject>

In the code above I've:

  • Specified ColdFusion as my destination, which will be routed through the servers FlashRemoting connection
  • Specified a "dot path" address for my CFC. My file was called testa.cfc. If you were to create an instance of that using createObject, you would just use "testa". If the CFC was in a folder called services, my path would be services.testa. You get the idea. Since the CFC is in web root, I can just use testa.
  • Finally, the ID, cfservice, just let's me get a handle to the service.

Next up, let's create a simple UI to run my test. I'll add a button and a textarea to store the result from the server:

<mx:Button label="Talk to ColdFusion" click="cfservice.echotest()" /> <mx:TextArea id="resultBox" />

(I won't go into detail on each line of code. I assume, like Susan, that you either know Flex enough to get what's going on, or can guess. So for example, in the above code, the first line makes a button, and the second a textarea.)

The final bit is to tie is all together. Notice my button runs a method on the cfservice RemoteObject. In this case, it isn't a method I wrote in ActionScript, but the method in the CFC. Also remember this line from above:

<mx:method name="echotest" fault="handleFault(event)" result="handleResult(event)" />

This said: For the service, when echotest is run, do handleFault() on an error and handleResult on a normal result. I need code for these, and here is what I used:

<mx:Script> <![CDATA[ import mx.controls.Alert;

function handleFault(evt) { mx.controls.Alert.show(evt.fault.faultString) }

function handleResult(evt) { resultBox.text = evt.result } ]]> </mx:Script>

The fault handler simply displays the error. The result handler though takes the result data and adds it to the text area. How did I know "result" was a key in evt? I didn't. I debugged it and played around with it. Basically evt is a Result object and the result key is the 'pure' result. (My take on it - I'm sure folks can say that a lot better.)

Altogether now, my MXML looks like so:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
&lt;mx:RemoteObject destination="ColdFusion" source="testa" id="cfservice"&gt;
	&lt;mx:method name="echotest" fault="handleFault(event)" result="handleResult(event)" /&gt;
&lt;/mx:RemoteObject&gt;

&lt;mx:Script&gt;
&lt;![CDATA[
import mx.controls.Alert;

function handleFault(evt) {
	mx.controls.Alert.show(evt.fault.faultString)
}			

function handleResult(evt) {
	resultBox.text = evt.result
}		
]]&gt;
&lt;/mx:Script&gt;

&lt;mx:Button label="Talk to ColdFusion" click="cfservice.echotest()" /&gt;
&lt;mx:TextArea id="resultBox" /&gt;

</mx:Application>

Running it, and clicking the button of course, gives us:

Woot. That's a fancy looking clock there, eh? Ok, so let's take it a step further and try an example with input and output. Back in my CFC, I added a new method:

<cffunction name="hellotest" access="remote" returnType="string"> <cfargument name="name" type="string" required="true"> <cfreturn "Hello, #arguments.name#!"> </cffunction>

The hellotest method takes a name argument and returns a string including the name. Back in Flex Builder, go and make a new file. (I selected MXML Application.) I could have modified the previous page, but I wanted to keep things simple. This time my RemoteObject test will contain a method for the hellotest call.

<mx:RemoteObject destination="ColdFusion" source="testa" id="cfservice"> <mx:method name="hellotest" fault="handleFault(event)" result="handleResult(event)" /> </mx:RemoteObject>

You do not have to define a method for each CFC function you want to call. I'm using it as a convenience as it allows me to define the fault/result handler. My UI now is a bit more complex. I have a form field to enter your name, a button, and a result textarea:

<mx:TextInput id="nameText" /> <mx:Button label="Say Hello" click="cfservice.hellotest(nameText.text)" /> <mx:TextArea id="resultBox" />

Notice that the button grabs the value from the name field. The ActionScript is the exact same, so here is the complete MXML file:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
&lt;mx:RemoteObject destination="ColdFusion" source="testa" id="cfservice"&gt;
	&lt;mx:method name="hellotest" fault="handleFault(event)" result="handleResult(event)" /&gt;
&lt;/mx:RemoteObject&gt;

&lt;mx:Script&gt;
&lt;![CDATA[
import mx.controls.Alert;

function handleFault(evt) {
	mx.controls.Alert.show(evt.fault.faultString)
}			

function handleResult(evt) {
	resultBox.text = evt.result
}		
]]&gt;
&lt;/mx:Script&gt;

&lt;mx:TextInput id="nameText" /&gt;
&lt;mx:Button label="Say Hello" click="cfservice.hellotest(nameText.text)" /&gt;
&lt;mx:TextArea id="resultBox" /&gt;

</mx:Application>

Running it, and entering a test value, gives me the following:

Enjoy. If folks want to post comments to other Flex+ColdFusion blog entries like this, I'd definitely appreciate it, and I'm sure Susan would as well.

Next - I'll show this in FlexFlashBuilder 4 and how the cool new server side introspection stuff works. (Hint: It's the bee's knees.)

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by marc posted on 6/4/2009 at 5:26 AM

hey ray, possibly Susan already had this going, but it might be worth mentioning that you'll need to modify services-config.xml in your CF install to specify the servername and server port.

there are a number of articles/posts out there showing how you can set this all dynamically without the need to modify this file, but for quick and dirty getting set up, I think you need to do this.

Comment 2 by Raymond Camden posted on 6/4/2009 at 6:13 AM

Marc, I did not have to modify anything with my CF install. It just worked.

Comment 3 by Dale Fraser posted on 6/4/2009 at 6:14 AM

Have a look at http://flexcf.com for other examples of talking between ColdFusion & Flex

Comment 4 by Gareth Arch posted on 6/4/2009 at 6:20 AM

Yeah, thee should be no modification of the services-config.xml necessary. The only thing I usually have to tinker with in the server settings on initial setup of the project, but once you get it the first time FB will remember it for all new projects.

Comment 5 by Tariq Ahmed posted on 6/4/2009 at 9:10 AM

A bunch more CF+Flex examples:

http://www.cflex.net/Tutori...

Comment 6 by Raymond Camden posted on 6/4/2009 at 5:15 PM

NOTICE: Folks, you may notice "Flash Builder" in the 2nd screen shot. When I was writing the blog post, I accidentally did it in FB4 instead of FB3 for the first few steps. I had done it earlier in the week in FB3 and was running through it again for the blog entry. When I noticed this, I fixed screen shot 1, and I _thought_ screen shot 2 was the exact same UI, but I guess I was wrong. I will probably fix this later today.

Comment 7 by Brian posted on 6/4/2009 at 6:40 PM

"Using my ... um... other editor... " A product to be released later, no doubt. How about a few snapshots of this one, Ray? Hmmm?

Comment 8 by Paul posted on 6/4/2009 at 8:05 PM

Hey Ray I just found this: http://www.adobe.com/devnet... I wonder how much of it will still work with Flex4 and the most recent version of BlogCFC and if you still have the code?

Comment 9 by Raymond Camden posted on 6/4/2009 at 9:28 PM

No idea really. That article is from quite a long time ago. :)

Comment 10 by Ken Caldwell posted on 6/5/2009 at 2:54 AM

Does anyone know of some tutorials for CF, Flex and Blazeds.

I find it quite ironic and insulting that with the constant (CF is dead) chatter, that Adobe would only have examples of this using Java.

I even posted a comment on Ben Forta's blog about this and did not get a reply.

Ken

Comment 11 by Raymond Camden posted on 6/5/2009 at 4:06 PM

@Ken, I talked about Blaze a bit a while ago - search for it. Nothing super in depth though.

As for Ben, remember, bloggers always can't answer every request. :)

Comment 12 by John posted on 6/5/2009 at 6:20 PM

Boy, if this post was a week earlier it would have saved me an evening of experimentation, but I guess there are times when figuring something out yourself is better.

I do have one question, how would you configure FlexBuilder to handle a remote CF server where you don't have a mapping to it on the machine you are working? Would I have to install a dev version of CF on my machine and then be sure all the configuration options mirror the production environment?

Comment 13 by Raymond Camden posted on 6/6/2009 at 6:29 PM

I don't know if you can set it up to use a remote Flash Remoting service. I don't think so anyway. I'd go the easy route and just install CF locally. It's free and simple.

Comment 14 by Susan Brun posted on 6/8/2009 at 7:16 PM

Ray - Wow, this Flex/CF example is really awesome! It really helps with understanding how the data connection works.

I wish Adobe would put some better documentation on their site.

Comment 15 by Raymond Camden posted on 6/8/2009 at 7:19 PM

Glad I could help. I'm trying like heck to make time to compare this process to Flash Builder 4. I may be able to tonight.

Comment 16 by Craig posted on 6/9/2009 at 2:45 AM

Using Flash Builder 4 the generated code no longer creates a remoteobject tag. instead it does stuff like this:

<fx:Declarations>
<s:CallResponder id="getGridResult"/>
<validationfunctions:ValidationFunctions id="validationFunctions" destination="ColdFusion" endpoint="http://localhost:8500/flex2gateway/" fault="Alert.show(event.fault.faultString)" showBusyCursor="true" source="PTS-debug.cfc.validationFunctions"/>

This radically reduces code and seems easier than the previous remoteobject tag model.

BUT... I can't figure out how to get access in actionscript to a returned string. All the functions that bind to a control work fine. However, I'm trying to access a string in actionscript generated in my cfc.

My component looks like this:
<cfcomponent>
<cffunction "returnAString" access="remote" returntype="string">
<cfreturn "Heres the string">
</cffunction>
</cfcomponent>

I can't figure out how to get at the cfreturn result in actionscript

Comment 17 by Ken Caldwell posted on 6/9/2009 at 2:50 AM

@Ray,
Thanks for the reply. I looked at your game example, you use spring. I was just after a quick, plain Flex, CF, Blazeds example. Just something like a maintence form for the artists table. Using consumer and producer. I want to put together a proof of concept for my manager. I don't have the time to learn spring or any other bridge. I went to a number of Adobe events and the reps always show this and say how easy it is. But there are never any examples.
As for Ben not replying. He is the senior Adobe Evengelist. I would think it is his job to reply to concern like I have. We have an environment where there are daily posts about CF is dead and the like. When Adobe does not even supply examples using their technology, I believe this only inflames the problem.

Ken

Comment 18 by Raymond Camden posted on 6/9/2009 at 3:14 AM

@Ken: I know Ben, like me, tries to reply. But responding to email is his secondary role after heading up the Evangelists @ Adobe. I really think you need to cut him some slack. At the end of the day, if you NEED to get help on something, your only 100% sure way is Adobe support (which is paid).

@Craig: Sorry - no idea. I was planning on doing the FB4 version today. If I had to guess, the object, validationfunctions, is roughly the same as your RemoteObject, but it is named oddly.

Comment 19 by Raymond Camden posted on 6/9/2009 at 3:44 AM

Ok cool, got a FB4 version working. Will try to blog it tonight. I don't 100% get the code behind it (still reading up on FB4 changes, well, I mean Flex 4) but it worked pretty darn quickly.

Comment 20 by Racquel Tejano posted on 10/23/2009 at 9:58 PM

This is cool example...the concept is presented well :) Thanks a lot sir!