Extending and enhancing your WebFacing project with a Web interaction

In this section, you enhance the WebFacing project. When the list of items is displayed, you want to click on an item image to find details for that item. To do this, you use the Web Interaction wizard to invoke an RPG program to retrieve the item's details and display them on another web page. You will perform the following steps:

First, you need to define the server information:

  1. Switch to the Web perspective.
  2. In the Navigator view, right-click Project501 and select Specify iSeries Web Tools run-time configuration.
  3. Enter your iSeries server name, user ID, and password.
  4. Type Retailstor in the Library field and then click Add.
  5. Click Finish. Click Finish again if necessary.

Before you create the Web interaction, you need to copy over the correct styles and style sheet so that Project501 displays the proper JSP file format. (You would not need to perform this task if you completed the exercise, (Optional) Manually customizing the cascading style sheet). You first copy over the styles folder, and then you copy over the DetailPageResults.jsp:

  1. In the Navigator view, expand SV000501 > Web Content.
  2. Right-click Styles and select Copy.
  3. Scroll up in the Navigator view until you see your Project501 again.
  4. Expand the project, right-click Web Content, and select Paste from the pop-up menu. Click Yes to overwrite the existing styles.
  5. Scroll back down to SV000501 > Web Content.
  6. Right-click DetailPageResults.jsp and select Copy.
  7. Scroll back up until you see your Project501 again.
  8. Expand the project, right-click Web Content, and select Paste from the pop-up menu.

Note the new elements added underneath Project501's Web Content folder.

Now you can create the Web interaction:

  1. Click File > New > Other.
  2. In the New dialog, click Web on the left side, and then click Web Interaction on the right side. Click Next.
  3. In the Web Interaction name field, enter DetailPage and click Next.
  4. Select the Generate Input JSP radio button.
  5. Select the Use output pages radio button (if it is not selected already) and click Add.
  6. From the Output JSP dialog, expand Web Content, select DetailPageResults.jsp, your pre-formatted output page, and click OK.
  7. Click Next.

Now, you can add programs and parameters to your interaction. You need to add 11 parameters to the same program. Instead of adding each parameter with its individual values manually, you can add them in a slightly faster way:

  1. Select Use an iSeries ILE program if it is not selected already.
  2. Click Add Program.
  3. In the Program alias field, enter DetailPage.
  4. For the Program object field, click Browse.
    1. Expand iSeriesserver > *LIBL > RETAILSTOR.
    2. Click DETAILPAGE.*pgm.rpgle (the first file underneath RETAILSTOR) and click OK.
  5. Back in the Web Interaction wizard, click OK (towards the lower-right).

    Note that DetailPage is added on the left side of the wizard under Program call definitions.

  6. In the Program call definitions section in the left pane of the wizard, click DetailPage to select it.
  7. Click Add Parameter.
  8. Beside Specify database reference field towards the bottom of the wizard, click Specify.
  9. Expand iSeriesserver > *LIBL > RETAILSTOR > INVENTORY.*file.pf-dta > INVFORMAT to display a list of 13 parameters. You need to add the following 11 by clicking each one once and clicking Add, or holding down the CTRL key and clicking each one, and then clicking Add: PRODNO, PRODNAME, COLOR, RPRICE, IMAGE, STYLE, SQTY, MQTY, LQTY, XLQTY, XXLQTY. Basically, you are selecting all of the fields except PPRICE and QTY.
    This screen capture shows the Specify Database Reference Field dialog, with the applicable parameters selected.
  10. Click Close.

You now need to change the usage for 10 of the 11 parameters to "output" (all parameters except PRODNO).

  1. Still in the Web Interaction wizard, click PRODNAME to select it.
  2. In the Usage combo box, switch the selected value to output and click OK. Repeat this step (with the previous step) for all of the parameters except the first one (PRODNO). This is what your workspace should look like once you have adjusted all of the parameters. Note that the icon to the left of the a parameter shows if it is of type input, input & output, or output.
    This screen capture shows the Web Interaction wizard, with emphasis on the parameters added and their usage.
  3. Click Next to look at the Input Form preview.
  4. Click Finish to create the Web interaction.
  5. Select Yes to all or OK and Finish again if you receive any messages.


[ Top of Page | Previous Page | Next Page | Table of Contents ]