With the release of Macromedia ColdFusion 7 and the arrival of Flash Forms, developers were presented with an alternative to HTML forms that offered them additional functionality, such as full-featured controls not available in HTML and built-in validation. That alone made Flash Forms appealing - and with the addition of pieces of ActionScript code, developers were able to create truly responsive forms. But because they were meant to be compatible with HTML forms, they still shared the same submit-refresh model. What if you could "submit" the form and, without a page refresh, get feedback from the server?

Enter Flash Remoting. In this series of tutorials you will learn how to create an application that allows users to search and retrieve records from a database, and then edit, add, and remove them from the database - all in one screen. Those functions will be presented in the context of a sample application, a real state management system that administers listings of properties for sale.

Overview of the Real Estate Management System Sample Application
This article focuses on the search functionality of the sample application.

When you open the application, a small panel on the left lets users search for a property by specifying search criteria, such as number of bedrooms or price range. The matching properties appear in a data grid in the upper right panel, and when a user selects a property, the details appear in the lower right panel (see Figure 1).

In the following sections you will do the following:

• Create the search form.
• Write a component to make the search query.
• Create a Flash Remoting service that handles the search request.

Creating the Search Form
The whole application user interface is one Flash Form. As such, its contents are within the cfform tag (see Figure 2):

<cfform format="flash" name="RealEstateAdmin">
<!--- form content --->
</cfform>

The only necessary attribute of the cfform tag is the format="flash" attribute to create a Flash Form. By assigning a name to the form, you will have a named scope that you can use later. You can also set the form's dimensions by using the width and height attributes.

The Search panel contains several controls, all of them enclosed in a cfformgroup tag with a type attribute of "panel":

<cfformgroup type="panel" label="Search" height="440" >
<!--- controls --->
</cfformgroup>

These are the controls contained within the Search panel:

• The cfselect tags for Price range, Bedrooms, Bathrooms, and Minimum footage that create pop-up menus. You can populate cfselect tags from option tags, queries, or a combination of the two, as shown in this example:

  <cfselect name="search_priceRangeFrom"
       query="priceRange"
       display="label"
       value="data"
       queryposition="below">
     <option value="0">No min.</option>
  </cfselect>

• This cfselect tag uses a query called priceRange that contains two columns - data and label - which populate the search_priceRangeFrom select control. In addition, an extra option not present in the query ("No min.") is manually added using an option tag. The name you give each control is important because you will later need to reference the control name when you submit the form (see Figure 3).
• <cfinput type="text"> tag for "MLS number", as follows:
• <cfinput name="search_mls_id" type="text" />
• <cfinput type="radio"> tags for "Status." You need one cfinput tag for each type of listing status (Active, Sold, Back Up Offers, New Listing). Option button tags that belong to the same group must have the same name. See the following:

  <cfinput type="radio" name="search_status" value="active" label="Active"/>
  <cfinput type="radio" name="search_status" value="backUp" label="Back Up Offers"/>
  <cfinput type="radio" name="search_status" value="sold" label="Sold"/>
  <cfinput type="checkbox"> tags for "Amenities."
  You need one tag for each type of amenity
  (Pool, Laundry, Walk-in Closets, Fireplace).
  Unlike option buttons, each tag must have a different name, as follows:
  <cfinput type="checkbox" name="search_hasPool" label="Pool"/>
  <cfinput type="checkbox" name="search_hasLaundry" label="Laundry"/>
  <cfinput type="checkbox" name="search_hasFireplace" label="Fireplace"/>
  <cfformitem type="text"> tags for additional labels or titles, as follows:
  <cfformitem type="text" style="fontWeight:bold;">Status:
  </cfformitem>
  <cfinput type="button"> tag for the Search button:
  <cfinput type="button" name="search_submitBtn" value="Search" />

This small section of the application does not do anything yet. It only accepts user input of standard form controls: text inputs, option buttons, check boxes, and selects. At this point, you would normally add a Submit button to submit the form for processing on the server. But don't do that yet - wait just a moment and complete the following sections.

Coding the Search Query
As you may expect, you must write ColdFusion code to search the database. The sample files contain a ColdFusion component (CFC), components/ListingGateway.cfc, that queries the database but you could use a custom tag as well. The search in this component has several arguments that correspond to the different search criteria: status, price, pool and other amenities, and so forth. The contains a simple query using the cfquery tag. All the arguments have a default value and the SQL statements will vary each time a user specifies a different combination of arguments. For instance, if the user doesn't enter a status, the CFC ignores that criteria; therefore, the SQL statement will not contain that column in its WHERE clause. To exclude it, we used a simple cfif tag (see Figure 4):

<cfcomponent name="ListingGateway">

<cffunction name="search" access="public" returntype="query" output="false">
<cfargument name="status" type="string" default="" />
     <cfargument name="priceFrom" type="numeric" default="0" />
    <cfargument name="priceTo" type="numeric" default="0" />
    <cfargument name="hasPool" type="boolean" default="false" />
    <!--- additional arguments removed --->

    <cfset var listingQuery = "" />

    <cfquery name="listingQuery" datasource="realestate">
    SELECT     *
    FROM     listing
    WHERE
listing.price >=
<cfqueryparam value="#arguments.priceFrom#" cfsqltype="CF_SQL_MONEY"/>
<cfif arguments.priceTo GT 0>
    AND listing.price <=
   <cfqueryparam value="#arguments.priceTo#" cfsqltype="CF_SQL_MONEY"/>
   </cfif>

    <cfif len(arguments.status)>
    AND listing.status =
   <cfqueryparam value="#arguments.status#" cfsqltype="CF_SQL_VARCHAR"/>
    </cfif>

    <cfif arguments.hasPool>
    AND listing.hasPool =
    <cfqueryparam value="true" cfsqltype="CF_SQL_BIT">
     </cfif>

<!--- additional sql removed --->

      ORDER BY price, listedOn
    </cfquery>

    <cfreturn listingQuery />

   </cffunction>

</cfcomponent>