Exercise 4: Enhancing the look of the Trip Search Results and Trip Detail pages

The Trip Maintenance application now provides a useful drill-down mechanism for locating trips. Although this application is functionally sound, its appearance could be improved, including formatting dates and dollar amounts, and making long lists easier to read.

Formatting dates and dollar amounts

ColdFusion provides several functions to improve application appearance. These include the DateFormat and DollarFormat functions that format dates and currency variables.

To format the dates and dollar amounts:

  1. To format the Trip Detail page dollar and date fields, open the tripdetail.cfm file in the my_app directory in your editor and make the following changes:
    Existing code Replacement code 
    #departureDate#

    #DateFormat(departureDate, "mm/dd/yyyy")#

    #returnDate#

    #DateFormat(returnDate, "mm/dd/yyyy")#

    #price#

    #DollarFormat(price)#

    #baseCost#

    #DollarFormat(baseCost)#
  2. Save the file.
  3. To format the currency and date fields on the Trips Search Results page, open the tripsearchresult.cfm file in your editor and make the changes for departureDate, returnDate, and price indicated in the table.
  4. Save the file.

To view the application's new appearance:

  1. View the tripsearchform.cfm page in the my_app directory in your browser.
  2. In the Trip Location drop-down list, select Begins With and enter the value C.
  3. Click Search.

    The Trip Search Results page appears:


    This image shows a picture of debugging information appended to the bottom of a form page.

  4. In the Trip Search Results page, click the link for Riding the Rockies.

    The properly formatted Trip Detail page appears:


    This image shows a picture of the Trip Detail page.

ColdFusion 9 | ColdFusion 8 | ColdFusion MX 7 | ColdFusion MX 6.1 | ColdFusion MX | Forums | Developer Center | KnowledgeBase | Bug Reporting

Version 7

 

Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/coldfusion/7/htmldocs/00000145.htm