< Previous | Next >

Lesson 1.6: Create an update page

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 Enterprise Explorer view.
  2. Delete the default text Insert content here.
  3. In the Palette view, click the Data and Services drawer to expand it.
  4. Drag the SDO 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, expand W5SAMPLE and select ADS.
  10. Click Next. The Add Relational Record page opens.

Filter the results

A relational record can show only one record from the database. Therefore, you must 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. The Add Relational Record page has a list of task links. 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:
    Filter 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 Add a row action section later in this exercise. Click Close.
  2. Click Next. The Configure Data Controls page opens.
  3. 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
    • MAINCATEGORY
    • TITLE
    • DESCRIPTION
    • PRICE
    • PHONE
  4. By clicking Up or Down, reorder the field names from top to bottom as follows:
    • ID
    • TITLE
    • DESCRIPTION
    • MAINCATEGORY
    • PRICE
    • PHONE
  5. For the ID field, select Display number from the drop-down list in the Control Type column. Although you want users to be able to view a record 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.
  6. Click Options. The Options window opens. Make sure the Submit button option is selected. Type Update in the Label field. Click OK. The Add Relational Record window should look like this:
    Add Relational Record window.
  7. Click Finish to generate your update form on the page, as shown below:
    Updated form page.

Program the update and delete buttons

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. Right-click the Update button that you just created on the Web page and select Properties. The hx:commandExButton tab is displayed in the Properties view.
  2. Click Add Rule. The Add Navigation Rule window opens.
  3. From the Page drop down, select all_records.jsp. In the This rule is used by box, click This action only. Ensure the field contains: #{pc_Update_record.doUpdate_recordUpdateAction}. Click OK.
  4. Repeat steps 1-3 to edit the code in the same way for the Delete button on the Web page. Ensure the This rule is used by field contains: #{pc_Update_record.doUpdate_recordDeleteAction}
  5. Save the page.

Add a row action

Now, you will add a row action to the table on all_records.jsp 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 row, that record 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 Enterprise Explorer view, double-click the all_records.jsp file to open it in the editor. Click anywhere inside the data table. Open the Properties view.
  2. In the Properties view, click the Row Actions tab under hx:dataTableEx from the list of HTML tags.
  3. Click Add an action that's performed when a row is clicked. The Configure a RowAction dialog opens. Select Clicking the row sends a request to the server with row information sent as parameters then click OK. A column is added to the data table.
  4. In the Properties view, click the hx:requestRowAction tab.
  5. Click Add Rule. The Add Navigation Rule dialog opens.
  6. From the Page drop down, select update_record.jsp. In the This rule is used by box, select This action only. The this action only field is automatically populated by #{pc_All_records.doRowAction1Action} which was created when you added the row action. Click OK. If the field is not automatically populated with the above method, type the method in the field and add the following to ClassifiedsTutorial/Java Resources: src/pagecode/All_records.java:
    public String doRowAction1Action() {
				return "";
}
  7. In the Properties view, click the Parameter tab under hx:requestRowAction. Click Add Parameter then type ID in the Name field. You need to bind the ID parameter to the ID column. Binding the row action to the ID column of the data list means that when the row is clicked, the request parameter will be the ID of the record in the list.
    1. Click Value then click the Select Page Data Object button.
    2. In the Data Object tab, expand all_recordlist (Service Data Object) > all_recordlist (ADS) and select ID (java.lang.Integer).
    3. Click OK.
Now when the user clicks a row, the Web site will allow the user to update information about the classified ad. 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.

Lesson checkpoint

You have completed Lesson 1.6. In this lesson, you learned how to create Web pages that update records in a database.
< Previous | Next >
Feedback