Page 1 of 4   next page »

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.

In Part 1 of this series, you will build the search functionality in the application.

Requirements
To complete this tutorial you will need to install the following software and files:

• ColdFusion MX 7.01
  For a trial download go to www.macromedia.com/cfusion/tdrc/index.cfm? product=coldfusion&promoid=devcenter_tutorial_product_090903. To buy go to www.macromedia.com/software/coldfusion/buy/ ?promoid=devcenter_tutorial_coldfusion_090903. To get the updater go to www.macromedia.com/support/coldfusion/downloads_updates.html#mx7.
• Database: Microsoft Access, SQL Server, or MySQL
• Tutorials and sample files: http://download.macromedia.com/pub/developer/realestate.zip. To install the sample application on your computer, unzip the files, create a data source called realEstate in the ColdFusion Administrator, and then browse to the directory after you place the files. Read the full instructions in the Readme file.

Overview of the Real Estate Management System Sample Application
This article focuses on the search functionality of the sample application (see Figure 1).

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

In the following sections you will do the following:

1. Create the search form.
2. Write a component to make the search query.
3. Create a Flash Remoting service that handles the search request.
4. Call the Flash Remoting service and show the results in a datagrid

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

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 later you will 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" />

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 1 of 4   next page »