Exercise 4.1: Generating the output page from the Web Interaction wizard

You will create the update record page using the Web interaction wizard.

Creating the update record page

To create the update record page:

  1. Open the Web perspective.
  2. Locate your Web project in the Project Explorer.
    Project Explorer view
  3. Right-click your project and click New > Other on the pop-up menu.
    New > Other

    The Select page opens.
    New Dialog

  4. In the left pane of the Select page select Web.
  5. In the right pane of the Select page, select Web Interaction.
  6. Click Next.

    The Web Interaction wizard opens.
    Web Interaction Wizard

  7. In the Web Interaction name, type custDispUpdate.
  8. Click Next.

    This next page is where you specify the input and output pages.
    Input and Output page
    You want to get from the current results page to the update page. So you use the result page as an existing input page and let the Web Interaction wizard generate an update page for you.

  9. Leave the Use input pages radio button selected and click Add.
  10. Select result.jsp on the Input dialog and click OK.

    This is the page your original Web Interaction generated; you are now linking it with another Web Interaction.

  11. Click the Generate output JSP radio button to tell the Web Interaction wizard to make an output page.
  12. Click Next.

    On the next page, you will need to add another program instance and define the input and output parameters for this Web Interaction.

    You will notice that the structure and the program from your previous Web Interaction are visible, and available for your use.

Adding a program

To add a program:

  1. Click Add Program.

    The service program has several procedures that we have already coded for you. One of these procedures is dispUpdate. It gets the customer detail data from a database file given a customer number.

  2. To invoke procedure dispUpdate fill the dialog as shown and click OK when finished.
    Add a program
  3. Click OK when finished.

    You will see that the program has been added under the Program call definitions.

Adding parameters

To add parameters:

  1. Click Add Parameter.
  2. The input parameter is customer number. To define this parameter fill in details as shown:
    Add a parameter
  3. Click OK when finished.

    Now you need to add the structure you defined earlier.

  4. Click Add Parameter.
  5. The procedure returns a structure with detail data. To define this parameter fill in the details as shown:
    Adding a structure
  6. Click OK.

    Your wizard page should now look like this:
    Completed parameters

    You can see the new parameters you have defined for this interaction.

  7. Click Next.

    The input parameter page opens.
    Linking the input page parameter

    Now you will link the input page field to the program parameter.

  8. Under Input page fields, select the CSTRUC_CUSTNO parameter.
  9. Under Input parameters, select the cnumber parameter.
  10. Click the Link button in the middle of the page.

    You have just linked a field on the input page to the input parameter of our program.

  11. Click Next.

    Now its time to design the output page.
    Changing the output page title

    First you will change the output page title.

Designing the output page

To design the output page:

  1. In the Properties table, select the Page tab.
  2. Change the value of the Page Title property to Update Customer Record.

    Now you need to change the field labels to make sense and to make the fields editable.

    By default the output data is displayed as a label when the Web Interaction wizard generates the html for the page. Since you want to allow changes to the data you need to change all field attributes from Input Style: Label to Input Style: Text Entry.

  3. Click the Fields tab.
    Changing a field label and making it editable
  4. Under Output parameters, select custRec.CUSTNO.
  5. In the Properties table, change the value of the Label property to Customer Number.
  6. Select Text Entry from the Input Style list.
  7. Repeat for the following by changing their Label fields to their respective names in the table below, and by changing all their Input Style fields to Text Entry.
  8. Make sure that the length of the field shown in the Size and Data Type fields are the same.
    CUSTNA Customer Name
    REPNO Representative Number
    CONTAC Contact
    CPHONE Phone Number
    CFAX Fax Number
    CADDR Address
    CCITY City
    CCOUNT Country
    CZIP Zip

    Your page should now look like this:
    Finished page

  9. You don't want to allow the custRec.CZIPLO field to be updated. Clear it's check box.
  10. Click Finish.
  11. Navigate to your new page custDispUpdateResults.jsp and double-click the file.

    The Page Designer opens.

  12. Select the text field for the Customer Number.

    The customer number field needs to be protected so no changes can be made to it.
    Setting the field to Read-only

  13. In the Properties pane, set the field to Read-only. Select the Read-only check box.

    You don't want to allow the user to change the customer number.

  14. Save and close the JSP.

You have created the update record page, added a program, added parameters and designed the output page and now you are ready to begin Exercise 4.2: Linking to the update record page.