Lesson 1.2: Editing your Web diagram

Before you begin, you must complete Lesson 1.1: Creating a Struts project.

A Web diagram is a file that helps you visualize and change the flow of a Web application such as a Faces or Struts-based application. In this Lesson, you will open the DayOfWeek Struts project's Web diagram, set the diagram's grid settings, and edit the diagram. The following terms pertain to Web diagrams:

• The Web diagram editor is a visual editor for editing Web diagrams.
• A node is an icon that represents a resource such as a Web page, Java bean, or Web application.
• A connection is a line that connects two nodes. Web diagrams can have four categories of connections: Faces, Java, Struts, and Web.
• A node or connection is termed realized if the resource that it represents exists. It is termed unrealized if the resource does not exist in the project.

Opening the Web diagram

When you create a Struts-enabled dynamic Web project, a Web diagram is automatically created but not opened. Follow these steps to open the diagram:

1. In the Project Explorer view, expand Dynamic Web Projects > DayOfWeek.
2. Double-click Web Diagram. The Web diagram editor opens Web Diagram, which is an alias for the diagram.gph file.

Setting the grid settings

By default, a Web diagram has no alignment grid. You can display a grid and turn on the snap-to-grid option, which aligns the nodes in the diagram to the grid and organizes the Web diagram.

1. Right-click in the Web diagram and click Snap > Show grid from the popup menu to display an alignment grid.
2. Right-click in the Web diagram again and click Snap > Snap to grid on.

Creating the Web diagram nodes

In this section, you will add nodes to the Web diagram that represent two Web pages, a form bean, and an action mapping. When you are finished, the Web diagram will look like the following image:

1. In the Palette view, click the Web Parts drawer to open it.
2. Drag a Web Page node from the Palette view onto the left side of your Web diagram.

   The new Web page node appears on your Web diagram with the default name page.jsp selected.

3. Type this name for the new Web page:

   index.jsp

   Tip: When you create a new node in a Web diagram, the name of that node is automatically selected so you can immediately type in a name for that node. If you click anywhere else, the name will no longer be selected. If you want to change the name of a node and it is not selected, right-click on the node and choose Rename from the popup menu.

4. Drag another Web page node from the Palette onto the right side of the Web diagram.
5. Type this name for the second new Web page:

   output.jsp

6. Click the Struts Parts drawer on the Palette view to open it.
7. Drag an Action Mapping node from the Palette view onto the Web diagram, directly between the two Web pages.
8. Type this name for the new action mapping:

   computeDay

   The Web diagram now shows an action mapping between the two Web pages named /computeDay. The Web diagram has added the forward slash mark to the name of the action mapping.

9. Drag a Form Bean node from the Palette view to the Web diagram, directly below the action mapping. The Form Bean Attributes window opens.
10. In the Form Bean Attributes window, type this text in the Form Bean Name field:

    dateData

    Leave the Form Bean Scope field set to request.

11. Click OK.
12. Save the Web diagram.

    The Web diagram should now look like the following image:

    

Connecting the nodes in the Web diagram

Now that the nodes are placed on the Web diagram, the next step is to connect the nodes. When you are finished, the diagram will look like the following image:

1. From the Palette view, click Connection.

   Now, your mouse cursor is set up to create a connection between the next two nodes you click.

2. Click the index.jsp node on the Web diagram.

   Now there is a line between your mouse cursor and the index.jsp node. This line represents a connection from the index.jsp page to another node.

3. Click the /computeDay action mapping node.

   There is now a dotted line from the index.jsp node to the /computeDay node, representing a connection between these two nodes.

4. In the same way, connect the computeDay action mapping to the dateData form bean.

   Next, you will connect the computeDay action mapping to the output.jsp node with a local forward.

5. From the Palette view, click Connection.
6. Click the /computeDay action mapping.
7. Click the output.jsp node. The Choose a connection window opens.
8. From the Choose a connection window, expand Local Forward.
9. Click <new>.
10. Click OK.
11. Type this text as the name of the new local forward:

    success

    Naming the new local forward connection works the same way as naming the new nodes. When the connection is created, its name is selected and you can type it immediately. If you click somewhere else, the connection is no longer selected and you must right-click on it and choose Rename from the popup menu.

    Finally, you will connect the computeDay action mapping to the index.jsp node with a local forward.

12. From the Palette view, click Connection.
13. Click the computeDay action mapping.
14. Click the index.jsp node. The Choose a connection window opens.
15. Expand Local Forward.
16. Under Local Forward, click <new>.
17. Click OK.
18. Type this text as the name of the new local forward:

    failure

19. Save the Web diagram.

    The Web diagram should look like the following image:

    

Now you are ready to begin Lesson 1.3: Creating and editing a form bean.