# Step 3: Create a Simple Navigation Page Flow

In this step, you will create a Page Flow that provides navigation from one JSP to another. Then, instead of designating the JSP files as the content url for the portlet, you will designate the .JPF file as the portlet's content node. The Page Flow supports JSP transitions within the portlet.

The tasks in this step are:

- Create a Page Flow Called simpleFlow
- Test the Page Flow in a portlet

Create a Page Flow called simpleFlow

1. Right-click a project in your web application and create a new folder; name the folder "portlets".
2. Right-click on the portlets folder and select New > Page Flow.
   The Page Flow Name dialog appears. You will use this dialog to create a basic Page Flow called "simpleFlow".
3. Name the page flow "simpleFlow" and click Next.
   The Select Page Flow Type window appears.
4. Accept the default (Basic page flow) and click Create.

   The page flow is generated and the PageFlow editor, in the Flow View, appears.

   Note that the basic page flow has a begin action and an index.jsp presentation page.

5. Click Page in the palette, and drag a new page onto the PageFlow editor.
6. Name the page "page2.jsp".
7. Connect the two pages by doing the following:
   1. Click Action in the palette and drag a new action onto the PageFlow editor.

      The New Action window appears.

   2. Name the acton "goToPage2" and click OK.

      An icon for the goToPage2 action appears in the Page Flow editor.

   3. Connect index.jsp to goToPage2 by placing your pointer near the index.jsp icon, clicking to create the connection, and dragging to goToPage2.
   4. Connect goToPage2 to page2.jsp (as described in step c., above). A red error indicator will appear under index.jsp. This will be fixed later in this procedure.
8. Create another action from the palette and name it "goToPage1" on the New Action window. Click OK.

   The goToPage1 action appears in the Page Flow editor.

9. Using the procedure described in step 7, connect the goToPage1 action to index.jsp and then connect page2.jsp to goToPage1.
10. Correct the error indicators on index.jsp by doing the following:
    1. Double-click index.jsp to open the JSP editor (ensure you are in the Source View).
    2. Change the text within the <p> </p> elements to "PageFlow Page1".
    3. Drag and drop the goToPage2 action from the data palette onto index.jsp, at the end of "PageFlow Page1." The paragraph block will look like this:
       <p>
       PageFlow Page1
       <netui:anchor action="goToPage2">show_goToPage2</netui:anchor>
       </p>
    4. Save and close index.jsp.
11. Correct the error indicators on page2.jsp by doing the following:
    1. Double-click page2.jsp to open the JSP editor (ensure you are in the Source View).
    2. Change the text within the <p> </p> elements to "PageFlow Page2".
    3. Drag and drop the goToPage1 action from the data palette onto page2.jsp, at the end of "PageFlow Page2." The paragraph block will look like this:
       <p>
       PageFlow Page2
       <netui:anchor action="goToPage1">show_goToPage1</netui:anchor>
       </p>
    4. Save and close page2.jsp.

    Your page flow should now look like the following picture. Move the icons into the configuration below to make sure the relationships are correct.

12. Test the page flow in the test browser by doing the following:
    1. Click the Start button ().

       The page flow will appear in the Test Browser:

2. Click show goToPage2.

   The page2.jsp appears.

3. Click show goToPage1 to return to PageFlow page 1.

Test the Page Flow in a Portlet

1. Create a portal and drag simpleFlowController.jpf into it.

   The Portlet Wizard appears.

2. Accept the Portlet Wizard defaults and click finish to create the portlet.
3. Save the portal and then view it in a browser by choosing Portal > Open Current Portal.

JSP Examples

The JSPs should appear roughly as follows:

index.jsp

    <%@ page language="java" contentType="text/html;charset=UTF-8"%>
    <%@ taglib uri="netui-tags-databinding.tld" prefix="netui-data"%>
    <%@ taglib uri="netui-tags-html.tld" prefix="netui"%>
    <%@ taglib uri="netui-tags-template.tld" prefix="netui-template"%>
    <netui:html>
        <head>
            <title>
                Web Application Page
            </title>
        </head>
        <body>
            <p>
            PageFlow page 1
            <netui:anchor action="goToPage2">show_goToPage2</netui:anchor>
            </p>
        </body>
    </netui:html>

page2.jsp

    <%@ page language="java" contentType="text/html;charset=UTF-8"%>
    <%@ taglib uri="netui-tags-databinding.tld" prefix="netui-data"%>
    <%@ taglib uri="netui-tags-html.tld" prefix="netui"%>
    <%@ taglib uri="netui-tags-template.tld" prefix="netui-template"%>
    <netui:html>
        <head>
            <title>
                Web Application Page
            </title>
        </head>
        <body>
            <p>
            PageFlow Page 2
            <netui:anchor action="goToPage1">show_goToPage1</netui:anchor>
            </p>
        </body>
    </netui:html>

Click one of the following arrows to navigate through the tutorial: