Exercise 1.5: Creating an update page

Before you begin, complete Exercise 1.4: Creating new records.

At this point, you have created pages for viewing and creating listings for the Web site. In this exercise, you will create a page that allows users to update and delete listings. The update page will look almost exactly like the create page except that on the update page, the input fields will display data from an existing record for the user to change.

First, you will create a relational record, which represents an existing record from the database. Next, you will create a JavaServer Faces update form for this relational record and after a few small changes, your page will be ready to test.

 

 

Create the update relational record

  1. Open the update_record.jsp file by double-clicking it in the Project Explorer view.
  2. Delete the default text Place content here.
  3. In the Palette view, click on the Data drawer to expand it.
  4. Drag the Relational Record component from the Palette onto the blank content area. The Add Relational Record window opens.
  5. In the Name field, type update_record.
  6. Under Create controls for, click Updating an existing record.
  7. Make sure the Add input/output controls to display the Relational Record on the web page option is selected.
  8. Click Next.
  9. In the Table box, click the W5SAMPLE.ADS table.
  10. Click Next. The Column Selection and Other Tasks page opens.

 

 

Filtering the results

A relational record can show only one record from the database. Therefore, filter the database table so only one record appears for the user to edit. (You didn't need to filter the database in the previous exercise because you created a new record and thus there were no results from the database to filter.) Since each record in the database has a unique ID number, you will filter the results to the one with a given ID number.

  1. Under Tasks, click Filter Results. The Filters window opens and inserts the default filter condition ID = #{param.ID} in the Filter column.

    The Filters window looks like this:

    The Filters window

    This code filters the records in the database so only the record with the specified ID number will appear in the relational record. You will learn more about this condition in the Inserting a Hyperlink section later in this exercise.

  2. Click Close.
  3. Click Next. The Configure Data Controls page opens.
  4. In the Fields to display section, clear the check box next to every field name except for those you want to display in your input form:

    • ID
    • TITLE
    • DESCRIPTION
    • MAINCATEGORY
    • PRICE
    • PHONE

  5. By clicking Up or Down, reorder the field names from top to bottom as follows:

    1. ID
    2. TITLE
    3. DESCRIPTION
    4. MAINCATEGORY
    5. PRICE
    6. PHONE
  6. For the ID field, select Output field from the drop-down list in the Control Type column.

    Although you want users to be able to view a record's ID number, you do not want them to be able to update it. Making the ID field into an Output field will help you avoid the problem of duplicate IDs.

  7. Click Options. The Options window opens.
  8. Make sure the Submit button option is selected.
  9. Type Update in the Label field.
  10. Click OK.
  11. The Add Relational Record window should look like this:

    Add Relational Record window

  12. Click Finish to generate your update form on the page, as shown below:

    Current Page Appearance

 

 

Programming the update button

Again, you will add code to refer the user to the all_records.jsp page to display the changed record along with all the other records.

  1. Click the Update button that you just created on the Web page.
  2. Open Quick Edit view.
  3. In Quick Edit view, click to place the cursor directly before the code return "";
  4. Press Enter. A new line appears before return "";
  5. Right-click on the blank line, and then choose Insert Snippet > Go To Page from the context menu. The Edit GotoPage Action window opens.
  6. From the drop-down list, select all_records.jsp as the target page.
  7. Click OK.
  8. The event code for your button should look like this:

    Code Example

    Now, once the user updates a record, the page will send the browser to the all_records.jsp page to see that the record has been updated. The delete button should also refer the user back to the all_records.jsp page.

  9. Repeat steps 1-7 to edit the code in the same way for the Delete button on the Web page.
  10. Save the page.

 

 

Inserting a hyperlink

Now, you will create links on the all_records.jsp page so the user can select a database record to update. #{param.ID} represents the ID number of the record that the update page will update. When the user clicks a record's link, that record's ID number will be sent to the update_record.jsp page as the #{param.ID} parameter. Then, the filtered relational record you just inserted into the update_record.jsp page will display only that record for updating.

  1. In the Project Explorer view, double-click the all_records.jsp file to open it in the Editor.
  2. Click anywhere inside the data table.
  3. Open the Properties view.
  4. In the Properties view, click h:dataTable from the list of HTML tags at the left of the view.
  5. At the far right of the Properties view, click Add to add a new column.
  6. Type Update in the new column's Label field and press Enter. A column named Update is generated in the data table.
  7. With the new column selected in Properties view, click Move Down until the Update column is at the far right of the data table.
  8. In the Palette view, click the Faces Components drawer to expand it.
  9. Drag a Link component from the Palette onto the Update column that you just created. The Configure URL window opens.
  10. In the URL field, type update_record.jsp as the target link and type Update Listing in the Label field.
  11. Click OK. The Update Listing hyperlink appears in the Update column.
  12. Click the link icon Link Icon beside the Update Listing hyperlink in the Update column.
  13. In Properties view, click the Parameter tab, located just under the hx:outputLinkEx tag at the left side of the view.
  14. Click Add Parameter and then type ID in the Name field.

    You need to bind the ID parameter to the ID column in the input form. Binding the hyperlink parameter to the ID column of the data list means that when the hyperlink is clicked, the request parameter will be the ID of the record in the list.

  15. Select the Value field, and then click the Select Page Data Object button in the field. The Select Page Data Object window opens.
  16. Under Data Objects, click the ID column from the all_recordlist(ADS) Record List, as shown below:

    Select Page Data Object window

  17. Click OK.

    Now when the user clicks the Update Listing link, the Web site will allow the user to update information about the classified ad.

  18. Save the file and test the page if you would like. Remember to open all_records.jsp first, because this is the page that links to update_record.jsp.

In this exercise, you learned how to create Web pages that update records in a database. Now you are ready to begin Exercise 1.6: Filtering a relational record list.