• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Building the Display Pages

To display the parks according to the selection made in the filterParks.cfm page, you need to create three display pages: displayParksState.cfm, displayParksRegion.cfm, and displayParksType.cfm. All three display pages look identical, but each outputs a different list of parks. Each page contains a dynamic table and Show Region server behaviors. In addition, by inserting a few lines of CFML, you can create a dynamic table that alternates row colors automatically, thereby making the tables easier for your users to read. Follow these steps:

Create a new ColdFusion page and name it displayParksState.cfm.

Using the Bindings panel, create a new recordset named parkQuery. In the simple layout of the RecordSet dialog box, shown in Figure 8.4, select exampleapps from the Data Source menu.

Figure 8.4. In the Recordset dialog box, you filter the query results by returning only the records in which the STATE column equals the STATE URL variable.

From the Table menu, select tblParks. In the Columns section, select the Selected radio button, and holding down the Ctrl key, select the PARKNAME, CITY, STATE, REGION, and PARKTYPE columns.

In the Filter menu, select STATE, = for the operator, and URL Parameter, and enter STATE. This name corresponds to the menus in filterParks.cfm. Click the OK button.

Place your cursor in the Body section. In the Application toolbar of the Insert panel set, click the Dynamic Table button. The Dynamic Table dialog box appears.

In the Dynamic Table dialog box, shown in Figure 8.5, select parkQuery from the Recordset menu. Select the All Records radio button in the Show section. Enter 0 in the Table Border, Cell Padding, and Cell Spacing text boxes. Click the OK button, and the dynamic table appears in the Body section.

Figure 8.5. In the Dynamic Table dialog box, you select the recordset for Dreamweaver to use to create the table.


If you specify a number of records to display at a time, you must create recordset navigation functionality to display all the records. For more information, see Chapter 9, “Creating Recordset Navigation.”

The table consists of two rows and five columns. That’s the same number of columns as you selected when you created the recordset.

Dreamweaver automatically creates a header row for you and populates the row with the column names. In addition, a Repeat Region server behavior for the parkQuery recordset generates the table row for each record in the recordset.

In the Document toolbar, click the Show Code and Design Views button to split the screen to reveal the code.

In the Code View pane, find the CFOUTPUT statement for the Repeat Region server behavior. Modify the opening CFOUPUT tag to look like the following:
<cfset varTemp = "true"> 
<cfoutput query="parkQuery"> 
    <cfif varTemp EQ "true"> 
        <cfset backColor = "##FFFFFF"> 
        <cfset varTemp = "false"> 
        <cfset backColor = "##CCCCCC"> 
        <cfset varTemp = "true"> 
    <tr bgcolor = "#backColor#"> 
        <td> <p>#parkQuery.PARKNAME#</p></td> 
        <td> <p>#parkQuery.CITY#</p></td> 
        <td> <p>#parkQuery.STATE#</p></td> 
        <td> <p>#parkQuery.REGION#</p></td> 
        <td> <p>#parkQuery.PARKTYPE#</p></td> 

In the example, the CFSET tag creates the varTemp variable and sets it equal to "true". The CFIF tag evaluates whether it is equal to "true". If it is, the backColor variable is set to white, and the varTemp variable is set to "false". If the varTemp variable is not equal to "true", the CFELSE tag executes, which sets the backColor variable to gray and sets the varTemp variable to "true".

Finally, in the TR tag that creates the table row, the bgcolor attribute is set to the value of the backColor variable. Therefore, the background color alternates for every record row.

Save your work.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint