Thursday 24 Jul 2008   
Add Comment

DataGrid With Search Tutorial

ColdFusion Tutorial #4

This tutorial shows how to both populate a grid, and also take the text from an input field and use it as a keyword search. The keyword search is done by passing the value to the CFC and is then used in the query

Tutorial4.mxml

Lines 4-6 setup a simple RemoteObject

Lines 8-16 setup the DataGrid, it is important to remember that RemoteObject returns columns in the case defined in the database, thus the derby sample database uses upper case field names, so we need to do this here also.

Lines 18-23 setup a simple form, with a button. This field is passed to the CFC and used in the search operation.

 
 


Employee.cfc

The CFC is very simple, it's just another query. This time it loops over the keywords using space as the delimiter. It then uses each word in a like statement to obtain matching results.

 
 


Demo

See this code running!


Download

Download this code as a zip!


Comments

Hi,
This was a wonderful tutorial, thanks so much. I finally understand everything that is involved in getting flex & CF to communicate with each other. I tried this in flash(flash remoting), but this way using flex just makes sense!
However, one comment. There is an error in the cfc, or maybe it is just my set up. The db "cfdocexamples" is not a default db that comes with CF 8,and I thought that it was(as was the case with the other examples). I just changed a few lines(the db, and what to look for), and it worked great.
Thanks so much,
John

John Barrett @ Saturday 19 Apr 2008 - 06:43:22 PM

That's strange, that database is a standard one with CF8. Can I ask what you changed it to?
Dale Fraser @ Saturday 19 Apr 2008 - 07:42:21 PM

I would like to add that this demo was setup to show the simplicity of Flex & ColdFusion communicating. It was actually the first Flex app I ever wrote. It is not best practice to do things this way. I would suggest adding Result & Fault handlers and setting up a Binding on the grid. I will do a version of this tutorial with a bit more best practice thrown in.
Dale Fraser @ Saturday 19 Apr 2008 - 09:55:03 PM

Hi,
In my Mac version of CF 8, I only have:
cfartgallery,cfbookclub, ,cfcodeexplorer, that came with CF 8. I used cfartgallery, with the table artist.
A simple change in the flex file,and of course changing the cfc to represent the new data. This was an easy change. This was a great tutorial,and since I was able to understand the whole process I was able to make the simple change.
This was the first time I was able to get flex & coldfusion to communicate to each other, and I have to say that it turns out this way is easy:)
Thanks again!
John
John Barrett @ Sunday 20 Apr 2008 - 02:17:25 PM

Click button to add a comment


Author

Dale Fraser


Published

Thursday 17 Apr 2008

Tags

cfargument  cfcomponent  cffunction  cfif  cfloop  cfquery  cfreturn  cfset  mx:Application  mx:Button  mx:columns  mx:DataGrid  mx:DataGridColumn  mx:Form  mx:FormItem  mx:RemoteObject  mx:TextInput