The Real Estate Sample Application – Part 1: Building the Search Functionality with Flash Forms

Creating the Search Form

The whole application user interface is one Flash Form. As such, its contents are within the cfform tag:

<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.

Note: If you are familiar with the process of defining a simple Flash Form, you can skip this section.

The Search panel (see Figure 3) 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>

Figure 3. The Search panel

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.

• <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" />
  

You must also use additional cfformgroup tags to lay out the controls. Look at the index.cfm source file in the ZIP download to see the complete code.

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.

Page 3 of 7

Previous Page

Next Page