Accessibility

Table of Contents

Easy rich Internet applications with ColdFusion 8

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 [3] Derby database. Apache Derby is a Java [4] 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.

Figure 1: A grid, automatically generated by ColdFusion, displays a list of users

Figure 1. The complete demo application

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.

Figure 2. A User Information window launches from the data grid

Figure 2. The Detail window in the application for the user's information

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.