Exercise 5.4: Visualizing the flow structure of your Web application

Before you begin, you must complete Exercise 5.3: Linking the update complete page to the inquiry page.

A Web diagram is a view that helps you visualize the flow structure of a Struts-Based Web Application. Because of the indirectness involved with a Struts application, being able to visually see the application's flow can help you to better understand the application.

Struts

Before you create a Web diagram, let's first look at what Struts is all about. First, Struts is a set of Java classes and JSP tag libraries that provide a conceptual framework for developing Web applications. The Struts technology is open source and was developed as part of the Apache Software Foundation's Jakarta project.

Second, Struts provides numerous, custom JSP tags that are simple to use but are powerful in the sense that they hide information. The Page Designer does not need to know much about form beans, for example, beyond the bean names and the names of each field in a given bean.

Third, you can use the diagram editor to show all or part of a Struts application. For example, suppose you have a three-part Struts application. One part handles the login process, one part handles product inquiries, and a third part handles product updates. In this case you could draw three diagrams to represent this system, or you could draw the entire system in a single diagram. Because one diagram can be included inside another, it would probably make more sense to represent this Struts application using a set of three diagrams.

Now, that you know what Struts is, you can go ahead with this exercise.

You will now update the Web diagram from the previous Web Tools tutorial (Build a Web user interface for an RPG application using iSeries Web Tools) to show the new visual components of the Web application you just created.

An empty Web diagram should have been generated for you during project creation.

To create a Web diagram:

  1. If you don't see Web Diagram in the editor, in the Project Explorer view, expand WSSLABxx.
    Locate Web Diagram under WSSLABxx in Project Explorer view
  2. Locate and double-click Web Diagram.

You will now see the Web Diagram in the editor.
Web Diagram

Now, let's update the Web diagram:

  1. Locate custList.jsp under WSSLABxx and then WebContent in the Project Explorer.
  2. Click custList.jsp and drag it to Web Diagram. You will notice the cursor change from Drag and drop to Drag and drop.
  3. In the Web diagram, right click custList.jsp.
  4. Click Draw > Draw All From on the pop-up menu.

    You will now see the getCustomerNumber interaction.

  5. Right-click getCustomerNumber and click Draw > Draw All From.


    Web diagram update with getcustomer number interaction

  6. Right-click result.jsp.
  7. Click Draw > Selected on the pop-up menu.
  8. Select the custDispUpdate interaction.

    You will now see the custDispUpdate interaction.

  9. Right-click custDispUpdate interaction.
  10. Click Draw All From on the pop-up menu.

    You should now see the following graphical representation of the Web interaction so far.

    You may want to rearrange the objects in the editor if the objects are overlapping.
    Web diagram update with custDispUpdate interaction

  11. Right-click custDispUpdateResults.jsp.
  12. Click Draw > Selected on the pop-up menu.
  13. Select the custDoUpdate interaction.
  14. Right-click custDoUpdate interaction.
  15. Click Draw All From on the pop-up menu.

    You now see the complete graphical representation of all the Web interactions that you created in all the previous exercises.

    You may want to rearrange the objects in the editor if the objects are overlapping.
    Web diagram update with custDoUpdate interaction

  16. Save and close Web Diagram.

You have seen the flow structure of your Struts-based Web application.

Module recap

You have completed Module 5. Creating the update complete output page. You have learned how to:

Now that you have created the update complete output page, you are ready to begin Module 6. Running the Web application.