Easy Rich Internet Applications With ColdFusion 8

The term Rich Internet Application (RIA) was coined by Macromedia (now Adobe) in 2002. An RIA is a web application -- it runs inside a web browser, but looks and feels more like a desktop application. Gartner analysts Mark Driver, Ray Valdes, and Gene Phifer describe RIAs as "the next evolution of the Web" (PDF, 56KB).

Some of the properties that differentiate an RIA from a traditional web application are:

• a richer user experience
• cross-browser consistency
• the ability to load data without having to refresh the page

Several different technologies can be used to create RIAs, including Adobe Flash, Adobe Flex, and Ajax. With ColdFusion 8, Adobe has given developers new tools to quickly and easily create RIAs that are either based on the Flash platform, or use plain old HTML and rely upon Ajax. This article will focus on the new Ajax family of tags and functions; I'll guide you with step-by-step instructions through the challenge of building your first RIA -- a simple user manager application -- using Adobe ColdFusion 8.

Requirements

If you'd like to play along at home, here's what you'll need:

• ColdFusion 8 (try or buy)
• the code archive for this article (zip, 72Kb)

To follow along at home, download and unzip the code archive to the web root of your local development environment (the files exist in the RIA folder).

Getting Started

Before we get started, we need to set up a ColdFusion data source. Our application will make use of another ColdFusion 8 feature -- an Apache Derby database. Apache Derby is a Java relational database management system that can be embedded within an application. By making use of Derby for our database, we minimize the need to install any additional software, thus ensuring compatibility across multiple operating systems.

Our first step is to set up a data source that will be used by ColdFusion to read and retrieve information from the database. Here's how we set up a data source:

1. Log into the ColdFusion Administrator.


2. Navigate to Data & Services and click on Data Sources.


3. In the form at the top of the page, enter the text "RIA" (without the quotes) in the field labeled Data Source Name.


4. In the field labeled Driver, select Apache Derby Embedded.


5. Click the Add button.


6. On the next screen, you'll be asked for the absolute path to the database folder. Set your path to the following: {path to web root}/RIA/database/RIA.


7. Add a brief description (this step is optional).


8. Finally, click the Submit button to create the data source.

Viewing the Demo Application

We're now ready to take our demo application for a test run. Point your web browser to http://{web root}/RIA, and you should see a page that looks similar to Figure 1.

You'll notice that our grid is nicely formatted -- it displays alternating colors for the rows of data (known as zebra stripes), pagination controls, and even allows for column sorting (you can test this by clicking on the header of the column you wish to sort).

To launch a user detail window, click the New User button, or double-click any row in the grid -- a User Information dialog box will launch, as illustrated in Figure 2.

You'll notice that the form appears within a modal window -- a window that prevents a user from interacting with the underlying page. Enter or change some user data, and click Save User -- doing so will close the window, and the data grid will be updated to reflect your changes.

Let's break the code that we used to create this page into small chunks. We'll starts with the code for displaying the grid, which is located in the file index.cfm.

Displaying a Grid with <cfgrid>

Normally, displaying a grid or table that has sortable columns and pagination requires a considerable amount of code (even with other frameworks). But with ColdFusion 8, it's as simple as using the following ColdFusion tags:

<cfgrid  
name="userGrid"  
 format="html"  
 pagesize="5"
preservePageOnSort="true"            bind="cfc:com.user.UserService.getAllUsers( {cfgridpage}, {cfgridpagesize}, {cfgridsortcolumn}, {cfgridsortdirection})"
sort="true"
stripeRows="true">
 
 <cfgridcolumn name="USERID" header="ID" display="false" />
 <cfgridcolumn name="FIRSTNAME" header="First Name" width="200" />
 <cfgridcolumn name="LASTNAME" header="Last Name" width="300" />
 <cfgridcolumn name="EMAILADDRESS" header="Email" width="220" />
 <cfgridcolumn name="PHONE" header="Phone" />
</cfgrid>

That's all we need to do! There's no JavaScript -- there's not even any HTML. All we need are a few lines of ColdFusion code. Let's look at what each of the attributes in the cfgrid tag represents.

• name - This attribute specifies the name of the grid. This also how you reference the grid within JavaScript.
• format - This attribute determines the format that ColdFusion should use to build the grid. To create an AJAX grid, as we've done in the above example, specify "HTML".
• pageSize - This attribute defines the number of items to display per page.
• bind - This attribute tells ColdFusion from where to retrieve the data that populates the grid. In the above example, we're telling ColdFusion to use the method named getAllUsers in a ColdFusion Component (CFC) named UserService in the com/user/ directory. Note that when we're invoking CFCs in ColdFusion, we use the dot notation to specify the path to the CFC. Also note that we're passing in some arguments to the getAllUsers method, namely {cfgridpage}, {cfgridpagesize}, {cfgridsortcolumn}, and {cfgridsortdirection}. These variables describe the current state of the grid, and how we need to retrieve our information to sort or paginate the grid.
• sort - This attribute tells ColdFusion that the columns are sortable.
• preservePageOnSort - This attribute controls whether the current page should be redrawn when the user performs a sort of the data (for example, when a user is viewing page 2, and they resort the data, show page 2 of the new dataset). If you don't set this value, the grid will be reset to page 1 whenever the grid is sorted.
• stripeRows - This attribute tells ColdFusion to alternate the row colors.

There are many other attributes that can be used to dictate how the grid will look and behave. For more information, check out the LiveDocs for the cfgrid element.

The next group of tags, <cfgridcolumn>, provides ColdFusion with information about the columns that we wish to display.

• name - This attribute contains as a value the name of the element (query column) that will be used to populate this column.
• header - This attribute is the text that is displayed in the column header.
• width - This attribute specifies the width of the column.

Note: The userID is not displayed
You may notice that our data source retrieves a userId column, but hides it with the attribute display="false". The value of userId is used to uniquely identify this user in our database -- we need this value for a selected row so that we can retrieve and display all of the user's information in the User Information window.

There are many other attributes that can be set to dictate how a grid column will look and behave. For more information, check out the LiveDocs help for <cfgridcolumn>.

Let's now take a look at the CFC that's referenced in the bind attribute of our <cfgrid>. There are several methods here that we use to retrieve and save individual users. There's also a method that retrieves all of our users in order to populate the <cfgrid>, and it's this code that we'll dissect next.