Add Comment

DataGrid With Search Tutorial

Flex / 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

that is a really great example on searching through datagrid.thanks for the article.can you show me this type of example but not using the CFC just using flex?i have build something like this but in flex.maybe i can implement your code in my application.
thanks a lot.great article!!
dieyana @ Tuesday 24 Mar 2009 - 04:52:11 PM

I need to run the code but it is not working. To run this do we have to make any change in project properies?
i have include '-services "D:\ColdFusion8\wwwroot\WEB-INF\flex\services-config.xml" -locale en_US' in project compiler.
But now it is showing 'The services configuration includes a channel-definition 'my-cfamf-secure' that has an endpoint with a context.root token but a context root has not been defined. Please specify a context-root compiler argument' error.
I am a cf developer and very new to flex. Someboady please help.
Thanks
Kiran
Kiran @ Saturday 30 May 2009 - 04:38:53 PM

gr8 article..worked in cf...
can u pls provide php code?
Mohsin @ Monday 21 Dec 2009 - 05:42:53 PM

Click button to add a comment

Author

Dale Fraser

Published

Thursday 17 Apr 2008