Exercise 2.2: Formatting a data table

You must complete either all of Module 1: Creating Web pages with data connections or Exercise 2.1: Importing the required resources before you are ready to begin formatting the 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 things like a pager, style rules, and pictures of the items for sale.

 

 

Renaming 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, change the Value text field from Maincategory to Category.
  4. If you want, rename the other columns.
  5. Save the page.

 

 

Formatting JSF 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, change the Type from Decimal to Currency.
  3. 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.

  4. Save the page.

 

 

Ordering 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 and click Configure from the context menu. The Configure Data 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 Stopping the server in Exercise 1.3: Testing the Web site.

  2. On the Conditions tab of this window, click the Order by tab.
  3. In the Available columns pane, click MAINCATEGORY.
  4. Click the > button to move the MAINCATEGORY column into the Order by pane.

    The window should look like this:

    Configure Data List window

  5. Click Close to apply the ordering changes.

    Now, the data will be ordered by category. You can sort by any column in the database.

 

 

Adding 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:dataTable from the list of HTML tags at the left of the view.
  3. In Properties view, click Display options from the list of tags at the left.
  4. In the Rows per page field, enter 5.
  5. Click 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.

 

 

Laying 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 in a similar way that 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. Drag a Panel - Group Box component from the Faces Components drawer of the Palette into the TITLE column of the data table. The Select Type window opens.
  2. Choose List as the group box type in the Select Type window and click OK.

    A list 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 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.
  10. On the Basics 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 the + symbol to expand the all_recordlist relational record list.
  12. Click IMAGETYPE (String).
  13. Click OK.
  14. Save the page.

    Your page should now look like this:

    Current Page Appearance

 

 

Laying out the components in a group box as a 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 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 page's 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. The page should now look like this:

    Current Page Appearance

  13. Drag the existing Update Listing hyperlink and drop it into the DESCRIPTION column, but not inside the grid group box.

    The best way to do this is to click and hold on the link icon itself and drag it directly below the grid group box. This way, both the text label and the link icon will move, keeping the link functional. If only the link or only the text moves, the link will no longer work. If this happens, click Edit > Undo from the menu bar and try again.

  14. Delete the empty PRICE, PHONE, and UPDATE columns of the data table.

    To delete a column, click on 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.

  15. 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

  16. Save the page.

 

 

Applying style sheet rules

Not only are cascading style sheets (CSS) one of the best ways to control the look and feel of a Web site, they can also control the look and feel of individual JavaServer Faces components. In the next section, you will use the CSS file provided in the project to change the appearance of this page. Specifically, you will apply a rule to the column headers and apply two rules to the rows to create an alternating color effect that will distinguish each row in the data table.

  1. Select the data table by clicking on one of the column headers.
  2. In the Properties view, click h:dataTable.
  3. Click the All Attributes button at the top right of the Properties view.
  4. Under Attribute Name, click the headerClass item. This setting controls how the header row of the data table will look.
  5. Then, click the Select Class button that appears in the Value field by headerClass.

    The Select Class window opens, showing all of the styles available in the project's style sheets. Right now, there is only one style sheet in this project.

  6. Expand the style sheet and click .columnHeaderClass.
  7. Click OK.

    Select Class window

  8. Next, click the rowClasses item under Attribute name and then click on the Select Classes button in the Value field to open the Select Classes window again. The rowClasses option controls how the rows in the data table will appear.
  9. Expand the style sheet and this time choose both the .rowClass1 and .rowClass2 rules by holding the Ctrl key as you click them. These two rules have different color schemes and selecting them both will result in alternating row colors.
  10. Click OK.
  11. Finally, save your page and run it on the test server.

    If you are not familiar with running applications on the server, refer to Exercise 1.3: Testing the Web site.

    When you test the page, it should look like this:

    Current Page Appearance

Now you know a few tricks that you can use to transform a data table into something a little more exciting.

You are now ready to begin Exercise 2.3: Using the File Upload component.