Tutorial: Viewing a ColdFusion Query in a Flex DataGrid
I have long awaited for this day to post my first Captivate tutorial. The first topic that I am presenting on is one that I struggled with when I was first learning Flex 2 and also one that I know many other developers have an issue grasping. It is the subject of bringing in a basic ColdFusion query to a Flex application and showing it in a DataGrid. It is really not all that hard, but unless you know how to do it, there is really no way in “figuring it out”.
I decided a Captivate tutorial would demonstrate this best, so without further delay, here is the tutorial URL:
http://www.kylehayes.info/captivate/QueryToDatagrid/QueryToDataGrid.htm
70 Comments
→
Nice demo!
Glad to here you like it. If it is received well I will be posting more like this.
Thank you, thank you, thank you. This was very useful!
Great to hear! Keep the comments coming!
Excellent! Thanks for putting that together, that gave me some great ideas.
My pleasure. Hope to have more coming in the near future. Please post suggestions!
Finally… Someone has created a very easy tutorial. I can’t tell you how hard it is to find something like this out on the Web and now it’s finally here!!! Thanks Kyle!
I agree very nice and simple demo… thanks!!!
Yes, very good. More please…
What editor are you using in eclipse for coldfusion?
I use the CFEclipse plugin for Eclipse to edit ColdFusion
cool. I will have to get that. In any case, your example assumes that the destination="coldfusion" is set up? It’s not in my config files and I can’t get it to work! I’ve been trying to figure out where I can get a fresh start on my config files but haven’t found any obvious sites.
Thanks Kyle, very concise article and demo. Maybe as a logical next step you could do a data drill down on this sample, or maybe a data update/delete?
@Scott: Yes, it is assuming that your destination="ColdFusion" which is automatically setup in your services.config file on the ColdFusion server. If you have ColdFusion 7.02 installed you are all set. You just need to choose ColdFusion Flash Remoting inside of Flex Builder.
@Stefan: Thank you, and I will add your suggestions to the list!
Kyle (my hero),
I agree that people would really appreciate seeing how you can get a successful add/update/delete with the given example. This is for sure where I want to be heading!
Is there a reason that you have chosen remoting instead of Data Services? It seems like Data Services would be amazing if one could ever get them to work b/c of the possibility of having the real time data updates as changes are made.
As we speak I’m downloading the Coldfusion update 7.02 in hopes that it will fix the isssue!
Have you considered doing some sort of explanation about the .config files that you need for remoting and data services? I think people might appreciate that.
Add / Update / Delete is in the works. This would especially be good since that is exactly what the ColdFusion wizard does. It would be great to see how to do it manually so that you actually know what is going on yourself.
As for the Data Services comment, the reason why I use remoting is because I can afford it
. You see Flex Data Services is a very expensive product (somewhere around $20k I believe). Granted there is a lite version. But remoting is very useful when you don’t require live data updating. You can still do a time based server pull without remoting. Remoting is really great if you need to have server push, like a chat messaging client.
I think it is safe to assume that I will be doing a tutorial sometime in the future on how to work with Flex Data Services
Hey Great Tutorial, simple and to the point. If you do make anymore I have been looking for a tutorial on calling multiple cffunctions from the one remoteobject in flex. Thanks Again
Very nice. I could have saved myself some time had this been around a couple of months ago. One of the things I struggled with was where to do the data formatting of the output columns. Things like dates, dollar values with commas, etc. and then still allowing proper sorting. I ended up doing some in CF and some in Flex. I’d like to see your take, via example of doing some of this. Thanks!
AFTER MONTHS OF CONFUSION I HAVE FINALLY GOT SOMETHING TO WORK!!!!!!!!!!!!!!
I’m really excited this! Are you sure it costs 20k? I have something that is called Data Services running on my computer. I thought I paid a few extra hundred bucks for it but thought I would want the capability. Do you think that’s why it never worked? It was never installed to begin with?
In any case, kyle saved me by pointing out that I had written Coldfusion instead of ColdFusion and thus caused the whole thing not to work. I think I was also running the 7.0 instead of 7.02.
A time based server pull = just periodically re-downloading the dataset and refilling the grid? Makes sense, do you just do that with an actionscript timer?
Above you mentioned that we are recreating what the wizards do. Which of the wizards corresponds to what we are doing?
Active Record CFC
Bean CFC & DAO CFC
Flex Data Service Assembler CFC
Isn’t that a great feeling to get a technology as great as Flex working!!! It really makes you feel warm and fuzzy inside whent that data populates in the grid for the first time
Yes, Scott, when I referred to the a time based server pull (or poll) it would basically be an ActionScript Timer event that calls the <strong>get</strong> function of the RemoteObject that is updating your dataset.
In response to the wizard question, we have not done what the wizards are doing yet, but it is in the works. The wizard that I am talking about is after you install the Flex Builder ColdFusion extensions (which the Flex Builder prompts you to do after you install Flex Builder) there is a wizard when you go to create a <strong>New Project</strong>. It allows you to create a CRUD style application based on a datasource. I actually often times have issues with it, but nonetheless, I would like to do a tutorial that shows how to do basic actions like that that interact with CF components.
I have also tried to work with the CRUD interface creator and up to now haven’t been able to get it work properly. I was able to retrieve the data but I don’t think I was getting the insert and updating to work.
If you look at the documentation that I found on Adobe’s site for Coldfusion, "Using Coldfusion with flex" http://download.macromedia.com/pub/documentation/en/flex/2/using_cf_with_flex2.pdf"
i think that is mostly focuses on data services?
If you were to add a row to your recordset, would you send an http post to server to take care of the include and then simply add a "row/set/set of variables" to the array collection? I guess that would work b/c it would reflect the change. I suppose you could also simply redownload the whole dataset, but I imagine that could be problematic if you were dealing with a huge dataset.
Thanks for explaining the periodic calls.
Do you recommend the wizard?
@Scott: I would not recommend the wizard for someone that is wanting to learn about how to integrate CF with Flex. It does everything for you and so there is no reason to learn it.
As far as how you would do the insert, what you would do, is build a function in your CFC called say addArtist or something like that and define the appropriate arguments such as firstName, lastName, email etc. Then you simply call the remoteObject just like you did to get records accept this time you are actually going to pass it some vars.
So if you had a form in your Flex app that had the variables that you wanted to pass to the CFC, then maybe you would do the following:
artistRO.create(txtFirstName, txtLastName, txtEmail);
and that would fire off the create method inside your artistRO object. It is pretty simple. But don’t worry, I will show you how to do this in time with a Captivate example
I tried copying and pasting the reference in the compiler to the .config file that I used in my functioning example so that I could apply the concept to an existing application in a project that up to now has only been using web services. However, after I inserted it I got this weird error:
The services configuration includes a channel-definition ‘my-cfamf’ that has an endpoint with a context.root token but a context root has not been defined. Please specify a context-root compiler argument.
I’m not 100% sure what it means. Why would the file be ok for one project and not be alright for another? Was adding the reference in the compiler the wrong way to add this functionality?
Got it to work, but flex or cf is sorting the column order by the name of the columns… so If my sql query asked for firstname, lastname, internet ID, when this was displayed in the datagrid, it would display as : firstname, internetID, lastname. Anyway to make it not do it?
Strange, the column order should match that of the query. Nonetheless, to ensure you have right order that you want you can do the following:
<mx:datagrid>
<mx:columns>
<mx:DataGridColumn headerText="First Name" dataField="firstName" />
<mx:DataGridColumn headerText="Last Name" dataField="lastName" />
<mx:DataGridColumn headerText="Email" dataField="email" />
</mx:columns>
</mx:datagrid>
The headerText can be whatever you want it to be. The datafield, is the column that you want to display.
@Randy, can you provide the your local filepath to the randypugh folder? (C:\inetpub\wwwroot…)
Yes, it’s C:\CFusionMX7\wwwroot\CFIDE\randypugh
I’m not running IIS, as in your example.
Randy
Yep, that’s your issue. You need to have the randypugh directory inside wwwroot, not CFIDE.
Wow, thanks Kyle. That fixed it. For my own information, why would that make a difference?
I appreciate your help. I’ll look to this site for more CF/Flex tutorials.
Randy
I want to note that these tutorials are not necessarily the one right way to do things. I am just trying to help get people started. So the reason why you had to do it this way was because when ColdFusion looks for a component, it looks for it in different places. The first is the current directory that the calling object is in. Then the next place is the webroot. So in this case, the webroot is wwwroot, some sites, the folder may be "webroot" it just depends. Anyway, so because you were calling the component starting with your full name, that folder needed to be in the root. Otherwise, you would have had to change the starting folder to cfide.randypugh.cfcs.dataGateway. Also, I wouldn’t recommend putting files in the CFIDE folder.
Hope this lengthy explanation helps
cheers man! Great tutorial.
Glad to hear! Thanks!
Kyle,
Did you ever address why you think data services would cost 20,000 dollars??
I did not, Scott. Thanks for reminding me. Here is the direct URL:
http://www.adobe.com/products/flex/productinfo/buy/
NOTE: Enterprise edition is $20,000 and Department edition (100 Users) is $6,000
Kyle,
I’m sorry to stick you with that. I thought it was you that told that to me. I guess someone must have told it to me because the 20,000 dollar number does match up to something. I just bought the Adobe Flex 2 training from the source and am trying to check out how that works.
One thing that remains unclear to me, is that if I always test my programs with the applications running on localhost, will it be a huge pain when I want to deploy the application to a different server? Have you ran into that yet?
P.S.
I’ve only had it for a few hours but I don’t think they supply a tutorial like the one that you supply with the simple task of returning a query. I think they pretty much follow the path of starting you off with http requests and calling XML files from servers. This works fine until you have to start pushing the data back… The only way I could think of tackling that issue was to post to "web services" or coldfusion files that can do inserts and updates based on information that you would push via http via a query string. Oh… the possibilities.
@Scott: There is a free personal / developer edition of Flex Data Services 2 that you can download from the same link that I posted in my last comment.
So Here’s the deal. do you know what the limit on concurrent users is for flex data services when you use the developer edition? Should someone who is not ever going to have more avoid using dataservices together? I mean, if there is a limit on concurrent users, would 20 people using your flex app that used data services to push changes to the server cause your application to crash for those that come after the first 20 (or whatever the limit is)?
Awesome tutorial!
You describe in a couple of minutes what it took me several of days to get working.
Really looking forward to the CRUD tutorial.
//Morgan
Thank you very much for posting this tutorial. What a help to us beginners. I have closely followed your example (careful with upper and lowercase, spelling etc…. but for some reason my grid just comes up empty with no columns and no data. Just one big empty column. no errors though… anyone have an idea? Thanks for any pointers.
Jeff
Greate example. I’m hoping you or someone can help. I followed your steps to the letter and got this error when I tried to Run as a Flex application: Errors exits in required project. Any ideas what causes this?
HIt your Errors tab in Eclipse and see what errors are being reported
Hi Kyle. Thanks for the quick response. I took a look at this earlier and per the problems tab here is the error: Unexpected attribute ‘url’ found in ‘endpoint’ from file services-config.xml
After installing the plugin was there some other configuration that I needed to do? BTW I’m working on a MAC so I’m not sure if that changes things.
That shouldn’t make a difference as I run on Mac as well. The only reason the tutorial is on a PC is because that is what Captivate runs on
Anyway, as for your error, it does have to do with your services-config file. Would you mind posting the text of that file at http://kylehayes.privatepaste.com/xml/ and then posting the link here? If you don’t want anyone else to view it later, make sure you set an expiration. Thanks.
Kyle,
Here is the link you asked for: http://kylehayes.privatepaste.com/ca19to4QGx
Thanks again.
A little more information. I’m using CF8 Beta (multi-servier configuration) and Apache
Do you get a blank page when visiting http://{yourserverroot}/flex2gateway/ ?
I do get a blank page now (JUST got that working). I removed and reinstalled CF 8 and that got rid of the services-config.xml problem. Now I think I’m getting closer. When I try to run the app I get the same error that folks on this post are getting: http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=582&threadid=1272537&enterthread=y
I just upgraded Flash Player to see if that is the problem and the error doesn’t pop up now, but I only get a blank flex screen. No datagrid or anything. But I AM getting closer.
i get a page cannot be displayed when i go to Do you get a http://{yourserverroot}/flex2gateway/ ?
it was working before now it’s not, can help me to get it back to working?
It would be very useful if you could write a quick article with code snipits or supply a basic demo app.
Watching on video, which takes forever to load is not very "usable".
However, your demo "title" interests me so i shall continue waiting…
Based on the current number of positive responses, I think this method is extremely usable. Thanks for posting your opinion though.