Exercise 1.2: Preparing for portlet development and defining the application flow

Before you begin, you must complete Exercise 1.1: Setup.

In the previous exercise, we created the AuctionPortlet project to contain the portlets that will be developed in this tutorial. To prepare for creating the user interface and adding data to specific Faces portlets, we will define the application flow using the Web Diagram editor. A Web diagram is only one method for defining the application flow, but it is especially suited for visual development of Faces-based portlet applications.

Creating a Web diagram to construct the application flow

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 portlet application. The Web diagram editor is a visual editor for editing Web diagrams. When you add nodes, connections, and other components to a Web diagram, it is referred to generically as drawing the diagram.

A Web diagram consists of nodes and connections between nodes. A node is an icon that represents a resource such as a portlet JSP page or a JavaTM bean. If the resource exists, the node is called realized; if the resource does not exist, the node is called unrealized. Realized nodes are shown in color with their names in boldface. Unrealized nodes are shown as gray icons.

We will add three JSP nodes to the Web diagram. One will be considered a master node, which will allow the navigation to two linked details nodes.

  1. When you created the Auction portlet project, the wizard automatically created a default Web diagram file called diagram.gph. In the Project Explorer, expand the Dynamic Web Projects and AuctionPortlet folders, and then double-click Web Diagram

    The file will open in the editing pane with some instructions about how to use the Web diagram editor.
    New Web diagram

  2. The active view on the right-side of the workspace is a palette, which contains a number of drawers that contain objects that you can drop on the Web diagram. You will add Web page objects onto the UserAdmin.gph file from the palette. The palette provides "sticky" drag and drop behavior, meaning that after you click on the object in the palette, you don't have to hold down the mouse button during the dragging operation. Just move the cursor to the Web diagram, and click again to drop the object.

    To create the first node, you can drag UserAdminView.jsp, the initial JSP view page created with the AuctionPortlet project, from the Project Explorer to the editor. Because this file has already been created, it is displayed as a realized object.

  3. Drag and drop a Web page object to the editor. Change the name of the Web page to UserAdminCreate.jsp.
  4. Repeat the previous step to create a Web page called UserAdminUpdate.jsp.

    Note: You can drag the nodes to re-position them.

  5. Next you will create connections between the Web page nodes to specify the flow of data in the portlets:
    1. Select Connection from the UserAdminView.jsp pop-up menu. From UserAdminView.jsp, drag the connection to the UserAdminCreate.jsp node.
    2. Select Web Page Link from the Choose a connection dialog, and click OK.
    3. Select Connection from the UserAdminCreate.jsp node pop-up menu, and drag the connection back to the UserAdminView.jsp node.
    4. Select Faces Outcome from the Choose a connection dialog, and click OK.
    5. Type view over the highlighted <new> to name the new connection.
    6. Select Connection from the UserAdminView.jsp pop-up menu. From UserAdminView.jsp, drag the connection to the UserAdminUpdate.jsp node.
    7. Select Faces Outcome from the Choose a connection dialog, and click OK.
    8. Type update over the highlighted <new> to name the new connection.
    9. Select Connection from the UserAdminUpdate.jsp node pop-up menu, and drag the connection back to the UserAdminView.jsp node.
    10. Select Faces Outcome from the Choose a connection dialog, and click OK.
    11. Type view over the highlighted <new> to name the new connection.
    12. Save the Web diagram.
    The diagram should look similar to this:
    Web diagram skeleton

The links that have been defined will prime the portlet pages with the proper linkages, so that user-initiated data will flow through the application properly. When the UserAdminView page requests a user creation or update action, the appropriate form is opened. After the necessary information is submitted by these forms, the new user information becomes available to the UserAdmin portlet query function.

Now you are ready to begin Exercise 1.3: Developing the UserAdmin page.

Terms of use | Feedback
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.