The getService() method of the connection class takes two parameters; the first is the path to the service. To get the path to your service, find the directory structure from your web root to your CFC, replace the slashes with dots, and remove the CFC extension.

For instance, if you saved the sample files in a folder called RealEstate in your web root and saved ListingManager.cfc in a folder called services, the path would be /RealEstate/services/ListingManager.cfc from a browser. Translating that to dot notation becomes RealEstate.services.ListingManager.

The second parameter is the object that handles the responses, which is the object you just created: responseHandler. Note that the service is not actually created until you call a method on the service. So if you enter an incorrect path, you will not know it until you try to call it.

Now you have a that sets up a Flash Remoting service, but if you never call this , the service will never be set up. You can use the onload attribute of the cfform tag, which was introduced with the ColdFusion 7.01 Updater to call the , as follows:

<cfform name="RealEstateAdmin" format="flash" onload=" setUpRemoting()">

That is not enough, however, because the service is stored in a global variable that you must also declare as the form loads. You can create yet another to be called as the form loads that sets up this global variable and possibly other settings. While you are at it, call the setUpRemoting() right after that, as follows:

<cfform name="RealEstateAdmin"
format="flash"
onload="formOnLoad();">

<cfformitem type="script">

   formOnLoad():Void{
     //declare global variable
RealEstateAdmin.myGlobalObjects = {};

//call set up
setUpRemoting();

     //set other properties as needed }      //rest of the code

Assigning the Flash Remoting service to a global variable is only a suggestion. The most important code is what's inside the setUpRemoting().

Finally, you are ready to call the service. Your Search panel readily accepts user input, you have set up the Flash Remoting service, and your CFC is eagerly waiting to be called. Remember how the Search panel had a Search button? Now you can make it functional by adding some actions to its onClick attribute:

<cfinput type="button" name="searchSubmit" value="Search"
onclick="submitSearch()" />
But wait a minute. What is the submitSearch()?
Because it is not a built-in , you're going to create it next.
Creating the submitSearch()
Within the same <cfformitem type="script"> tag, add the new :
submitSearch():Void{

The purpose of the submitSearch() is to gather all the information entered in the Search panel and send it to the ListingManager service.

If you recall, the CFC has several arguments. When making the call, you could send each argument, in order, as parameters to the call. But that becomes error-prone if the has many arguments. An easy way to send several parameters is to use a structure with keys that have the same name as the arguments.

To create a structure, you instantiate an empty object (or structure) that will be the container for all the data entered in the Search panel form fields. Then, one by one, take the data entered in each field and assign it to a key in the empty object, as follows:

//get all the search criteria items
var searchArguments = {};

//in order to get data contained in Text inputs,
//use myTextInputName.text searchArguments.mls_id = search_mls_id.text;

//to get data from radio buttons,
//use myRadioButtonName.selectedData
searchArguments.status = search_status.selectedData;

//checkboxes store their true/false value in their selected property,
//myCheckboxName.selected searchArguments.hasPool =
search_hasPool.selected; searchArguments.hasWalkInClosets =
search_hasWalkInClosets.selected; searchArguments.hasLaundry =
search_hasLaundry.selected; searchArguments.hasFireplace =
search_hasFireplace.selected;

//to get the selected choice in a dropdown,
//use mySelectName.value or mySelectName.selectedItem.data searchArguments.footage =
search_footage.value; searchArguments.bedrooms =
search_bedrooms.value; searchArguments.bathrooms =
search_bathrooms. value; searchArguments.priceFrom =
search_priceRangeFrom.value; searchArguments.priceTo =
search_priceRangeTo.value;

Once you have gathered all the necessary data for the structure, you can make the call to your CFC, sending all the parameters as one structure. Recall that "search" was the name of the service in the ListingManager CFC:

RealEstateAdmin.myGlobalObjects.listingService.search(searchArgs);

After you call the service and the matching records are retrieved, the server will send a query back with the results, even if it is an empty query. The responseHandler object handles the response in its onResult , but if you go back to the "Calling the Service" section, you will see that the was empty, which doesn't help much - when the results are returned, they will just be ignored (see Figure 5).

Adding a Grid for the Results
The sample application shows the search results in a datagrid next to the Search panel. To implement this functionality, add a grid using cfgrid and name it listingGrid:

<cfgrid name="listingGrid" rowheaders="false">
    <cfgridcolumn name="price" header="Price" />
    <cfgridcolumn name="bedrooms" header="Bedrooms" />
    <cfgridcolumn name="bathrooms" header="Bathrooms" />
    <cfgridcolumn name="footage" header="Footage" />
    <cfgridcolumn name="type" header="Type" /> </cfgrid>

Notice that the headers of visible columns are properly named and the name attribute of each cfgridcolumn tag corresponds to a query column name.

Now that you have a control, assign the results to the grid's data provider:

var listingGrid = listingGrid;
responseHandler.onResult = (results: Object):Void {
     listingGrid.dataProvider = results; }
Because the CFC might throw an error,
you should also complete the onStatus to handle error responses:
responseHandler.onStatus = ( stat: Object ):Void {
     alert("Error: " + stat.description); }

Dealing with Asynchronous Processes
If the service returns a query, you might be wondering why you can't simply use the following code:

//wrong code
listingGrid.dataProvider = listingService.search(searchArgs);

The above code is not correct because the call to search is done asynchronously. As soon as the call is triggered, it does not wait for the server's response; it continues running code written below it. For this reason, you must create an object (called responseHanldler here) with functions that will be called when the server sends a response.

Another point to consider is that any communication across a network is unreliable. If the returned dataset is large, it might take some time to load. When using the page refresh model, the browser takes care of adding a progress bar to indicate that the next page is loading. Although this is not perfect, it does offer some feedback to the user. Now that your application does not use a page refresh model, how do you indicate to users that their request is being processed and they have to wait?

There are several approaches to this. A simple method is to show the default clock cursor that Flash Forms use when they load data. This is a simple solution that is consistent with the other functions of Flash Forms. To add that functionality, insert the following snippet before making the call to the remote service in index.cfm:

mx.managers.CursorManager.showBusyCursor();
When the results come back, remove the cursor:
mx.managers.CursorManager.removeBusyCursor();

Add this snippet to both the onResult and onStatus functions because you don't know which one will get called.

Part 2 to this article can be found at www.macromedia.com/devnet.

The sample files for this article can be downloaded at www.macromedia.com/devnet/coldfusion/articles/flashforms.html