Simple example of accessing ColdFusion data with Flex (now with Flash Builder 4)

This post is more than 2 years old.

Last week I wrote up a quick blog entry demonstrating how to talk to ColdFusion via Flex. It wasn't meant to be the complete guide to Flex/ColdFusion development, but more a simple example to demonstrate how easy it is. Tonight I took a look at Flash Builder 4 and the support it has for working with data services. Here is what I found (and once again, I'll remind folks that I'm learning Flash Builder 4 and Flex 4 so please forgive any dumb mistakes).

I created a new Flex project called TestFB4, selected Web for the Application type, and ensured ColdFusion Flash Remoting was selected in the Server technology section.

The next page will ask you to confirm your ColdFusion settings. (I assume you know what to do there.)

Once done, you should end up with a simple, empty, Flex file. I took the simple button and text field from my first example in the last blog post and just pasted it into my document:

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
&lt;mx:Button label="Talk to ColdFusion" /&gt;
&lt;mx:TextArea id="resultBox" /&gt;

</s:Application>

Unfortunately this won't quite work right. Switch to Design View and you see:

What the heck? I see the TextArea but not my button. I then noticed that there was no layout attribute in the core Application tag. One of the things that changed in Flex 4, specifically in the Spark components, is the layout stuff. You can't just use layout="vertical", but instead must declare it using a child tag:

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
&lt;s:layout&gt;
	&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;

&lt;mx:Button label="Talk to ColdFusion /&gt;
&lt;mx:TextArea id="resultBox" /&gt;

</s:Application>

My understanding, and let me stress here, it's just my understanding, is that this reflects the fact that layout is now handled by a component. Hence the lack of a simple layout="string" argument. If you have seen my Twits, you know I'm still a bit overwhelmed by the changes in Flex 4, so, let's just move on and ensure that works. A quick click back to Design mode shows that it does:

Ok, now for the fun part. I still had my CFC from the last entry. It was called testa and contained two methods, echotest and hellotest. How difficult is it to get FB4 hooked up to this?

First, ensure you see the Data/Services view. If you don't, go to Window, Show View, Data/Services. If you don't see it there, click Other and it will be under Flash Builder. (I'm confused - is it Flash Builder or FlashBuilder?) Mine looks like this:

Click on Connect to Data/Service and note that ColdFusion is selected first:

On the next screen, the Service Name is simply a reference to the remote CFC. In the last blog entry I had made a RemoteObject tag named cfservice. That's a bit vague, but I'll go ahead and use it again. Import CFC should be selected. I hit the Browse button to pick my testa file.

When you click next, you will be asked to enter your RDS info. After you do that, it should (hopefully!) parse your CFC data and display the methods:

Click Finish and you will notice the following warning:

This seems a bit odd, especially if you look over in the Data/Services panel and see...

My guess is that the String you see here is from the CFC file, and Flash Builder is simply saying, "Yes, I know you sya you return a string, but maybe you return some weird, freaky, non-standard string that will make me unhappy and slightly gassy." Fair enough. Right click on both operations (I'm only using one now) and click Configure Return Type. Select Use an Existing ActionScript or custom data type and pick String from the drop down. After you do that, notice the grey balls next to the method now become green balls. Not terribly obvious, but, I'll get used to it.

Ok, now for the cool part. Ensure you are still in design mode. Click on echotest and simply drag it to your button. You should see a green + when over the button. That's it. If you switch to Source view you can see what it did:

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" xmlns:cfservice="services.cfservice.*"> <fx:Script> <![CDATA[ import mx.controls.Alert;
		protected function button_clickHandler(event:MouseEvent):void
		{
			echotestResult.token = cfservice.echotest();
		}

	]]&gt;
&lt;/fx:Script&gt;

&lt;s:layout&gt;
	&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;fx:Declarations&gt;
	&lt;s:CallResponder id="echotestResult"/&gt;
	&lt;cfservice:Cfservice id="cfservice" destination="ColdFusion" endpoint="http://localhost:80/flex2gateway/" fault="Alert.show(event.fault.faultString)" showBusyCursor="true" source="testa"/&gt;
&lt;/fx:Declarations&gt;

&lt;mx:Button label="Talk to ColdFusion" id="button" click="button_clickHandler(event)"/&gt;
&lt;mx:TextArea id="resultBox" /&gt;

</s:Application>

That's a lot of code written for me! Of course, you may be thinking - we tied the method to the button, but we want the result to show in the box, right? Surely we have to type, right? Nope! This really surprised me. Switch back to the Design mode, and drag echotest again, but this time, drop it on the TextArea.

Note that you get a prompt now:

If you switch to Existing call result, you will have linked it up to the service call we created by dragging onto the button.

And that's it. Run it, click the button, and it just plain works.

Hopefully you guys are impressed by this, I am. The blog entry ended up being a lot longer than I expected, but mainly because of the screen shots. When I tried this the first time, it took about 60 seconds.

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 simon posted on 6/9/2009 at 6:06 PM

I think it should be "now with Flex builder 4" not "Flash"

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

It's Flash Builder 4. Not Flex Builder 4. Flex 4 is the SDK.

Comment 3 by Simon posted on 6/9/2009 at 8:10 PM

ahh.. got it. Was formerly Flex Builder.

Comment 4 by Susan Brun posted on 6/10/2009 at 11:21 PM

Ray, I think the new Flash Builder 4 is awesome. Thanks for posting this example.

Comment 5 by Elliott Sprehn posted on 6/11/2009 at 11:02 AM

Is it just me or did they make all this stuff *a lot* more complicated than it used to be?

Now you need 3 namespaces just to make a simple app.

They certainly could have retained the layout="vertical" with a simpler capitalization and dynamic class creation too.

I dunno, Flex feels like it's lost a lot of it's simplicity. It feels a lot more like Java, and worse it feels significantly closer to the monstrosity that is Swing and it's older brother AWT.

Comment 6 by Raymond Camden posted on 6/11/2009 at 3:23 PM

Elliott, no, you are not alone in this. I don't think Flex is quite as simple as it used to be. Is it _too_ complex? I don't think so. But I'm not sure how I'd feel if I was a brand new user. My understanding, and I could be wrong, is that the mx namespace (Halo I believe), represents the Flex 1-3 framework, and is there mainly for backwards compat, and going forward, you could just work with 2 namespaces. If so, I don't think it's quite that bad, especially since one is just for declarations (script, style, bindings) and one for UI. That's my feeling now anyway. I need to find more time to play with it and really begin to digest how things have changed.

Comment 7 by Gary Funk posted on 6/12/2009 at 4:33 PM

Can I talk you into turning this example into an AIR application?

Comment 8 by Raymond Camden posted on 6/12/2009 at 5:18 PM

I can - but to be honest, it won't be that exciting. The only difference (outside of some of the root XML) would be in setting the full URL to the CFC as opposed to just a dot path. Actually if I remember right it's still a dot path but you define the root elsewhere. Ok, so maybe it is worth doing just to remind myself.

Comment 9 by Raymond Camden posted on 6/12/2009 at 6:35 PM

I got it working. Will post a blog entry in about 5-20 minutes.

Comment 10 by Gary Funk posted on 6/13/2009 at 8:15 AM

It really is that simple. I had several moments where the brain just refused to work and now I feel really silly.

I had written a Flex application to edit a database table and just couldn't get going in AIR. Seeing what changed made it all clear. Another duh moment for me.

Comment 11 by Marc posted on 8/7/2009 at 7:59 PM

I can see importing a single item, but can you demonstrate how to import a query. I've tried but can't figure out the return type for it because there
isn't one for queries.

Comment 12 by Raymond Camden posted on 8/7/2009 at 8:01 PM

If your CFC has a returnType of query, it should work fine with a datagrid. If you think it is a worthwhile example, I can whip up a quick blog entry.

Comment 13 by Jeff posted on 11/5/2009 at 12:16 AM

Hello,

I would like to know how the cf return data is stored in flex. Is it a collection of some sort? I would like to apply the filter functions to the returned data. Right now my database is bound to a tilelist via coldfusion and I would like to be able to sort this by date. Any suggestions?

Thanks
Jeff

Comment 14 by Raymond Camden posted on 11/5/2009 at 12:53 AM

The data stored in Flex is based on the data sent back - so an array sent via CF will be different than a struct. Not sure of the exact types myself - but you can obviously use the debugger to introspect.

Comment 15 by Jeff posted on 11/5/2009 at 1:20 AM

Thank you for getting back to me Ray. Another concern of mine, assuming that flex does store the return data as a collection and it is possible to use filterfunctions, is if filtering will work with data paging. The list I bind the data to has paging enabled, downloading only 20 entries at a time. I wonder if the filterfunctions will only work on those 20 entries.

Appreciate your help.

Jeff

Comment 16 by Raymond Camden posted on 11/5/2009 at 1:21 AM

My understanding - and PLEASE take this with a grain of salt: Filtering will ONLY work on the data returned. So if you want to filter against the entire dataset, you have to do it client side.