Exercise 5.10: Visualizing the flow structure of your Web application

Before you begin, you must complete Exercise 5.9: Ensuring the customer number field cannot be modified.

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 create a Web diagram that will show you the 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 populate the Web diagram:

  1. Locate inquiry.jsp under WSSLABxx and then WebContent in the Project Explorer.
  2. Click inquiry.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 inquiry.jsp.
    inquiry.jsp: Draw > Draw All From
  4. Click Draw > Draw All From on the pop-up menu.

    You will now see the custInquiry interaction.

  5. Right-click custInquiry and click Draw > Draw Selected.
  6. Select the result.jsp check box
    result.jsp checkbox
  7. Click OK.

    You should now see the graphical representation of the Web interaction that you've created in a previous exercise.
    Web diagram

  8. 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 a Web application. You have learned how to:

You have created your Web application. Continue to Module 6. Running the Web application.