Display dynamic information on Web pages with JavaServer Faces > Module 2: Add advanced features >
< Previous | Next >

Lesson 2.1: Format a data table

The data table on the all_records.jsp page has a utilitarian appearance. It displays all of the records in the database and links to the other pages as it was intended to do, but it is not very attractive. In this exercise, you will improve this data table by adding a pager, style rules, and pictures of the items for sale.

Rename column headers

In many cases, you do not want the column headers in your data table to be the exact column names from the database. The following steps show you how to rename data table column headers to something more appropriate.
  1. Double-click the all_records.jsp page in the Project Explorer view
  2. Click the Maincategory column header in the data table.
  3. In the Properties view, click the h:outputText tab and change the Value text field from Maincategory to Category.
  4. If you want to, rename the other columns.
  5. Save the page.

Format output components

You can also format the output components. In these steps, you will format the {PRICE} output component to appear as a currency value instead of as an ordinary number.
  1. Click the {PRICE} output component on the page.
  2. In the Properties view, find the Type drop-down list and select Currency. Now the price of each item will be shown in the currency style instead of as an ordinary number. Other styles and formats are available for different types of data such as percentages, dates, and times. You can also customize the format of an output component to show a type of data not listed in the Properties view, such as a telephone number.
  3. Save the page.

Sort the data

Right now, the data is not listed in any order. To provide the users with a more organized list of ads, order the record list by category so that similar items will be grouped together.
  1. Right-click all_recordlist (ADS) in the Page Data view (Window > Show View > Page Data) and click Configure from the context menu. The Configure Relational Record List window opens. If a warning message appears and says that a connection to your database could not be established, then you left the server running after testing the Web site. If this happens, click cancel in each dialog and stop the server as explained in the section "Stopping the server" in Testing the Web site.
  2. Select Retrieve existing record or record list from scope and Reuse metadata definition from an existing record or record list and then click Next.
  3. In the next window, click to select ADS, then click Next.
  4. On the right side of the next window, click Order results. This opens the Orders window.
  5. In the Available columns pane, click MAINCATEGORY.
  6. Click the > button to move the MAINCATEGORY column into the Order by pane. The window should look like this:
    Order by tab on the Configure Relational Record List window.
  7. Click Close to close the Orders window.
  8. Click Finish to apply the changes. Now, the data will be ordered by category. You can sort by any column in the database.

Add a pager

Rather than display every record at once in our data table, you can use a pager. A pager automatically splits the records into pages of a set size without creating any new JSP files in your project.
  1. Click anywhere inside the data table.
  2. In Properties view, click h:dataTableEx from the list of HTML tags at the left of the view.
  3. Click the Display options tab under h:dataTableEx.
  4. In the Rows per page field, enter 5.
  5. Click the button next to Add a web style pager. A picture of what the pager will look like appears at the bottom of the data table. The visualization of the pager in Page Designer is a placeholder image and does not actually reflect how many pages will be displayed, as this can only be determined when the page loads in a browser.
  6. Save the page. You can experiment with the different styles of pagers and the page statistics component to find the right fit for the page if you want.

Lay out the components in a group box as a list

Instead of having exactly one output component in each column of the data table, it is possible to combine elements within columns to produce a more attractive layout. You will use a group box to arrange the components, similar to how you would use a hidden HTML table. Specifically, after adding the image component to visually enhance the site, you will take most of the textual information about each ad and place it into a single data table column, which will then be labeled DETAILS.
  1. Click the Enhanced Faces Components drawer in the Palette to open it. Drag a Panel - Group Box component into the TITLE column of the data table. The Select Type window opens.
  2. Choose Box as the group box type in the Select Type window and click OK. This group box lays out components placed within it in a single column or row and can be oriented either vertically or horizontally.
  3. Click the group box to select it.
  4. Using the Properties view, change the Orientation to Vertical.
  5. Drag the {TITLE} component into the list group box. The instructional text in the group box disappears once you add a component to it.
  6. Drag an Image component from the Enhanced Faces Components drawer of the Palette into the list group box. It helps to drop the image component onto the bottom edge of the group box in order to ensure that the image will be placed below the title.
  7. Click the image component that you just added.
  8. Use the Size area of the Properties view to set the Width to 60 pixels and the Height to 50 pixels. This ensures that no matter what size the images are in the database, they will always appear as 60x50 on the page.
  9. Bind the image component to the PHOTO column of all_recordlist by dragging the PHOTO column from the Page Data view onto the image component. This will cause the image component to display the image data found in the PHOTO column of each record. If the PHOTO (ByteArray) column is not listed, right-click all_recordlist (ADS) in the Page Data view and select Configure from the menu. Click OK to close the URL window if it opens. In the Configure Relational Record List window, click Next. Select ADS and then click Next. Click to check the box next to PHOTO (ByteArray) and then click Finish.
  10. Click the graphic you inserted. On the hx:graphicImageEx tab of the Properties view, click the Select Page Data Object button next to the Type field. The Select Page Data Object window opens.
  11. Click to expand all_recordlist (Service Data Object) > all_recordlist (ADS).
  12. Click IMAGETYPE (String).
  13. Click OK, then save the page.
Your page should now look like this:
Current page appearance.

Refine layout with a group box grid

A group box can also organize components in a format like a table. A list type group box can only have one row or column, but a grid type group box can have any number of rows and columns. In these steps, you will move the {PRICE} and {PHONE} components into the DESCRIPTION column of the data table and include labels for them.
  1. Drag a Panel - Group Box component from the Enhanced Faces Components drawer of the Palette into the DESCRIPTION column of the data table. The Select Type window opens.
  2. Click Grid as the type of component to add and click OK.
  3. Click the new grid group box.
  4. Use the Properties view to set the number of Columns for this group box to be 2.
  5. Drop an Output component from the Faces Components drawer of the Palette into the grid group box. This output component will be a label for the description of the item for sale. Each output component will have a label like this in the left cell of the table.
  6. Click the Output component (it appears in Page Designer as outputText) and use the Properties view to assign it a Value of Description:
  7. Drag the existing {DESCRIPTION} component to the bottom edge of the grid group box. If you are having trouble dragging the components to the right place in the group box, try holding the mouse button down and watching the cursor. The location of the cursor in the group box indicates where the component will appear when you let go of the mouse button. For this exercise, you should release the mouse button when the cursor is to the right of the previous component.
  8. Drag another Output component from the Palette and drop on to the right side of the group box.
  9. Use the Properties view to assign it a Value of Price:.
  10. Drag the existing {PRICE} output component on the right of the Price output text.
  11. In the same way, drag a new Output component for the label for the {PHONE} component and label it Phone:.
  12. Drag the existing {PHONE} component into the grid group box to the right of the Phone output text. Your page should now look like this:
    Current page appearance.
  13. Delete the empty PRICE and PHONE columns of the data table. To delete a column, click the column and open Properties view. Then, click h:dataTable from the list of HTML tags at the left of the view, select the column you want to delete from the list at the right of the view, and click Remove.
  14. Click the header of the Description column and use the Properties view to change its Value field to Details. The page should look like this:
    Current page appearance.
  15. Save the page and test it. If you are not familiar with running applications on the server, refer to Lesson 1.3: Test the Web site.
When you test the page, it should look like this:
Current page appearance during testing.

Any ads that do not have an associated image will display a broken link. In the next lesson, you will learn how to add a file upload component to the page to add or change an ad's image.

Lesson checkpoint

You have completed Lesson 2.1. In this lesson you have learned how to format your data table in various ways.

You learned how to:
  • Change the column headings.
  • Sort the data in your table.
  • Add a pager to break the data into several smaller Web pages.
  • Use group boxes in various ways to change the layout of the table on the Web page.
< Previous | Next >