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:
- define the server information
- copy over the correct style sheet
- create the interaction
- add programs and parameters to the interaction
- change the usage of the parameters
First, you need to define the server information:
- Switch to the Web perspective.
- In the Navigator view, right-click Project501 and select
Specify iSeries Web Tools run-time configuration.
- Enter your iSeries server name, user ID, and password.
- Type Retailstor in the Library field and then click
Add.
- 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:
- In the Navigator view, expand SV000501 > Web Content.
- Right-click Styles and select Copy.
- Scroll up in the Navigator view until you see your Project501
again.
- Expand the project, right-click Web Content, and select
Paste from the pop-up menu. Click Yes to
overwrite the existing styles.
- Scroll back down to SV000501 > Web Content.
- Right-click DetailPageResults.jsp and select
Copy.
- Scroll back up until you see your Project501 again.
- 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:
- Click File > New > Other.
- In the New dialog, click Web on the left side, and
then click Web Interaction on the right side. Click
Next.
- In the Web Interaction name field, enter DetailPage
and click Next.
- Select the Generate Input JSP radio button.
- Select the Use output pages radio button (if it is not selected
already) and click Add.
- From the Output JSP dialog, expand Web Content,
select DetailPageResults.jsp, your pre-formatted output
page, and click OK.
- 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:
- Select Use an iSeries ILE program if it is not selected
already.
- Click Add Program.
- In the Program alias field, enter DetailPage.
- For the Program object field, click Browse.
- Expand iSeriesserver > *LIBL > RETAILSTOR.
- Click DETAILPAGE.*pgm.rpgle (the first file
underneath RETAILSTOR) and click OK.
- 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.
- In the Program call definitions section in the left pane of the wizard,
click DetailPage to select it.
- Click Add Parameter.
- Beside Specify database reference field towards the bottom of
the wizard, click Specify.
- 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.

- Click Close.
You now need to change the usage for 10 of the 11 parameters to "output"
(all parameters except PRODNO).
- Still in the Web Interaction wizard, click PRODNAME to select
it.
- 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.

- Click Next to look at the Input Form preview.
- Click Finish to create the Web interaction.
- Select Yes to all or OK and Finish again
if you receive any messages.
[ Top of Page | Previous Page | Next Page | Table of Contents ]
Copyright IBM Corporation 1992, 2003. All Rights Reserved.