Exercise 1.2: Working with the relational record list and data table components

Before you begin, complete Exercise 1.1: Importing the required resources.

The sample Web site uses dynamic Web pages to access data sources, such as databases, and display information from those data sources on the page. In this exercise, you will set up the all_records.jsp page to display all the classified ads in the database. In the next few exercises, you will connect the other pages to the database so that you can create new classified ads, edit old ads, and show a filtered list of ads.

This tutorial uses two components that connect pages to databases using Java Server Faces: relational records and relational record lists. These components represent the data in a database so the data can be displayed on the page in the form of a data table or an ordinary HTML table. These components use data access JavaBeans; Learn more about data access beans or Learn more about JavaServer Faces and Faces components.

• Relational records connect to only one record from a database. In this case, a relational record represents a single classified ad from the sample database. Using a relational record, you can create a new record, edit an existing record, or delete an old record.

• Relational record lists connect to more than one record from a database. In this case, a relational record list represents anywhere from two to all of the classified ads in the sample database. Using a relational record list, you can display all of the records or a selection of the records.

• Data tables display the data from a relational record list on the page. Data tables simply designate a place for the record lists; they do not format the data into rows and columns in the same way that an HTML table does. Relational records use ordinary HTML tables instead of data tables. Learn more about data tables.
  

 

Create a new relational record list

In these steps, you will create a relational record list to represent all of the classified ads in the database. Then you will connect to the database and select the table that holds the information you need in the relational record list. Finally, you will display this relational record list on the page in a data table.

1. In the Project Explorer view, expand Dynamic Web Projects > ClassifiedsTutorial > WebContent.

2. In the WebContent folder, double-click all_records.jsp. The all_records.jsp file opens in the editor.

3. Delete the default text Place content here.
4. In the Palette view, click on the Data drawer to expand it.
5. Drag the Relational Record List component from the Palette onto the blank content area.

   You may be prompted to save the all_records.jsp file. If so, click OK.

   The Add Relational Record List window opens.

6. In the Name field, type all_recordlist.

   Relational record list and relational record names must conform to Java standard naming conventions for variable names (for example, they cannot contain any spaces).

7. Make sure that the Add data controls box is checked.

   When the Add data controls box is checked, the wizard will create a data table to display the record list on the page. Otherwise, the wizard will only create the record list and not any representation of that data on the page. For now, the wizard will create the default data table and you will customize it later. The Add Relational Record List window should look like this:

   

8. Click Next.
9. In the Connection name field, click New to create a new database connection.

   The New Connection dialog appears. Notice that the Connection name field is automatically populated with the name ClassifiedsTutorial_Con1.

10. Click Create New DB Connection. The New Database Connection window appears.
11. Click Next.

 

Specifying the database connection information

You must tell the record list where to find the data you want it to represent. This is done with the New Database Connection window. In this case, you will specify the Cloudscape database that was included in the file you imported in exercise 1.1. Once created, this connection will be used for the entire Web site, so you will only need to do this once for the tutorial.

1. In the New Database Connection window, under Select a database manager, expand Cloudscape and click V5.1.
2. Click the top Browse button. This is the Browse button next to Database location. The Browse for Folder window opens
3. Under Select a database directory, navigate to the following directory: <workspace-folder>\ClassifiedsTutorial\WebContent\cloudscapesampledata\database, where <workspace-folder> is the directory containing the workspace you are currently working in.
4. Click the database folder and then click OK.

   You do not need to add a user ID or password to access the database. The New Database Connection window should look like this:

   
5. Click Finish. You return to the New Connection window.
6. In the New Connection window, click Finish. You return to the Add Relational Record List window.

   Now that you have created a connection to the Cloudscape database, you need to choose a table or the record list to represent. The Add Relational Record List window shows the tables in the database. For most of this tutorial, you will use the W5SAMPLE.ADS table.

7. Click the W5SAMPLE.ADS table in the Table field.

   

   The remaining pages in the wizard let you exclude columns from your record list and perform advanced options, such as defining the primary key, adding relationships to other tables, and specifying filter and sort conditions. You will learn more about these pages in later exercises.
8. Click Finish.

 

Tuning the default data table

The Page Data view now shows a list of columns in the ADS table, and the all_records.jsp file contains the visualization of this data inside a data table. Right now, the default data table contains too much information. For this tutorial, you need to show only the title, description, category, price, and phone number of each classified ad. Follow these steps to trim and reorganize the data table:

1. Click anywhere in the data table.
2. Open the Properties view.

   The Properties view is typically at the bottom center of the workbench. If you can't find the Properties view, go to the menu bar and click Window > Show View > Properties.

3. In the Properties view, click h:dataTable from the list of HTML tags on the left of the view.
4. At the right side of the view, click the ID column under Label and then click Remove. The ID column is removed from the data table.
5. Repeat this process to remove every column in the data table except for the following: TITLE, DESCRIPTION, MAINCATEGORY, PRICE, and PHONE. The Properties view should now look like this:

   
   

   Your page should now look like this:

   

   The order of the columns is not appropriate for a Classified ad. This order will be more meaningful:

   1. TITLE

   2. DESCRIPTION

   3. MAINCATEGORY

   4. PRICE

   5. PHONE
6. To reorder the columns, return to the list of columns in the Properties view. Click the TITLE label and click Move Up until TITLE moves to the top of the list. The TITLE column is now the first column in the data table.
7. Similarly, select the other columns one at a time and reorder them. The Columns section of the Properties view should look like this:

   

8. Save the page.

   In the next exercise, Exercise 1.3: Testing the Web site, you will see how this page will look on a real Web server.

   There are many options for formatting data tables and JavaServer Faces components. Some of these options are covered in the next module, Module 2: Adding advanced features. You can also explore the Properties view on your own for the various JavaServer Faces components on the page (for example, the data table and the individual output components).

You are ready to begin Exercise 1.3: Testing the Web site.