Using a Web diagram to generate a Web interaction

You can use a Web diagram to visually represent a Web interaction and then invoke the Web Interaction wizard to generate the necessary Java classes for the interaction. This can be done several ways:

  1. Create a Web diagram

    You can create a Web diagram in the following ways.

    • When you create a dynamic Web project the first time, the option Web diagram is selected by default on the Features page of the New Dynamic Web Project wizard.

      When you click Finish in the wizard to create the Web project, a default Web diagram named diagram.gph opens in the editor view. A note in the Web diagram provides initial instructions.

    • You can also explicitly create a Web diagram in a Web project as follow:
      1. Right-click the project name in the Project Navigator view and select New > Other.
      2. In the wizard, expand Web, select Web Diagram, and click Next.
      3. Enter a name for the diagram in the File name field (the .gph file extension is automatically applied to the name), and click Finish to create the file in your project. The file opens on a free-form surface in the editor view.
  2. Create a new Web interaction representation

    After you create a Web diagram, you can add JSP file nodes and a Web Interaction Action Mapping node to the free-form surface in the editor view to represent the Web interaction that you want to generate.

    1. Under Web Parts in the Palette view on the right, select Web Page, then click on the free-form surface to create a JSP file node icon.
    2. Type a new name for the JSP file in the name field below the icon (for example, type /custInput.jsp), and press Enter.
      Note: Although the Web diagram will allow multiple pages with the same name, you must use different names in order to create Web interactions.
    3. Add another Web page icon on the free-form surface, update the name (for example, type /custOutput.jsp), and press Enter.
    4. Select Web Interaction Action Mapping in the Palette on the right, then click the free-form surface to create an action mapping node.
    5. Type a new name for the action in the name field below the action mapping node (for example, type /retrieve), and press Enter.
    6. Arrange the icons on the free-form surface by dragging and dropping custInput.jsp to the left, custOutput.jsp to the right, and drag and drop the action mapping node between and slightly above the two JSP nodes.
    7. Select Connection in the Palette view, click custInput.jsp, place the mouse pointer on the action mapping node and left-click to draw the connection line.
    8. Select Connection in the Palette view, click the action mapping node retrieve, then move place the mouse pointer to custOutput.jsp and left-click to draw a connection line.
      Note: Since the JSP files and the Action class represented in the Web diagram do not exist in the Web project, they are considered unrealized. The JSP nodes are gray in color, and the dashes in the connection lines indicate that they are not realized.
    9. Invoke the Web Interaction wizard from the Web diagram by right-clicking the Web Interaction Action Mapping node and selecting Open iSeries Web Interaction wizard.

      The first page of the wizard uses the name of the action mapping node in the Web diagram as the interaction name. The second page of the wizard indicates that the JSP files, whose names you entered in the Web diagram as your input and output pages, will be created by the wizard.

    10. Complete the remaining pages of the wizard. (See Generating the JSP files for a Web interaction for information about using the wizard to generate JSP files.)
    11. Click Finish.
    After the iSeries Web Interaction wizard has created the JSP files and generated the iSeries classes for the interaction, you can view the interaction in the Web diagram. Since the JSP files and the Action class now exist in the Web project, they appear in the Web diagram as realized resources. The JSP nodes are no longer gray in color, and the connection lines to and from the action mapping node are solid lines.
  3. Use existing JSP files in the Web diagram to generate a Web interaction

    If you had previously created JSP files in your Web project , you can use a Web diagram to generate a Web interaction as follows. (See Designing Web application pages for information about creating JSP files.)

    1. Create a new Web diagram in your Web project.
    2. In the Project Navigator view, drag and drop a JSP file that you want to use as the input page for the interaction onto the free-form surface of the Web diagram. This creates a realized JSP file node.
      Note: If you have the JSP file already opened in a editor view, and if you selected the Link Editor button at the top of the Project Explorer view, when you try to drag and drop the JSP file, you are switched to the editor view for the JSP file, which prevents the drag and drop action. You need to toggle the Link Editor button off before you can successfully perform the drag and drop.
    3. In the Project Explorer view, drag and drop a JSP file that you want to use as the output page for the interaction onto the free-form surface of the Web diagram. This creates a realized JSP file node.
    4. Right-click on the free-form surface and select New > Struts Parts > Action Mapping, then left-click the free-form surface to create a Web Interaction Action Mapping node. The action mapping node is gray in color to indicate that the action is not realized, that is, it does not exist in the Web project.
    5. Type a new name for the action in the name field below the action mapping node and press Enter.
    6. Right-click the JSP node that represents the input page, select Connection, place the mouse pointer on the action mapping node and left-click to draw the connection line.
    7. Right-click the action mapping node, select Connection, place the mouse pointer on the JSP icon that represents the output page and left-click to draw a connection line.
    8. To invoke the iSeries Web Interaction wizard, right-click the Web Interaction Action Mapping node and select Open iSeries Web Interaction wizard. The wizard pages are populated with the data in the Web diagram and with the fields and controls within the forms in the JSP files.
    9. Click Finish to generate the Web interaction, to add code to the JSP files, and to generate the Action class used by the interaction.
    The Web diagram is updated as a result of the creation of the Web interaction. The connection lines to and from the JSP files and the action mapping node are solid, and the action mapping node no longer includes the + symbol. This indicates that the resources exist in the Web project, and are depicted as realized in the Web diagram.