# Step 2: Create and Configure a Page Flow

In this step, you will create a Portal Control Page Flow using the Page Flow Wizard and then configure the page flow by directly modifying methods in Source View.

1. From a Portal Web application (such as portalApp) within WebLogic Workshop, create a new Page Flow by right-clicking on the portlets directory within the current Portal project (such as samplePortal) and selecting New -> Page Flow.
2. The Page Flow Wizard appears. Name this new Page Flow "userLogin", and click Next.
3. At the Select Page Flow Type prompt, select Page Flow from a Java Control, select the User Login, and Click Next.
4. From the Select Actions prompt, select the login() method, which returns the ProfileWrapper type. Click Create.
5. The resulting Page Flow should appear in Flow View.
6. Press Ctrl+S to save your work. Notice that in addition to the userLoginController page flow file, the wizard has also generated index.jsp and login.jsp.
   The wizard has created a page flow with all the necessary elements in place, but they must be configured to fit your application. The pageflow needs to be modified to pass in the "request" to the methods. By default, the pageflow will create a formbean property for every parameter.
7. Open the userLoginController.jpf in Source View, and within the control method login, replace the existing code with the code in red:

   com.bea.p13n.usermgmt.profile.ProfileWrapper var = myControl.login(
   aForm.username, aForm.password, super.getRequest() );

8. Now open the userLoginController.jpf in Action View, and from the Data Palette, open the control (it should be called myControl), and drag the logout() method into the Page Flow.

   Double-clicking on the logout action will open the Source View to the logout method, shown below:

       /**
         * @jpf:action
         */
       protected Forward logout(LogoutForm form)
       {
          myControl.logout(form.getRequest());
          return new Forward( "success" );
       }

9. Modify the logout method by adding the following code shown in red:

        /**
          * @jpf:action
          * @jpf:forward name="success" path="index.jsp"
          */
        protected Forward logout(LogoutForm form)
        {
          myControl.logout(this.getRequest());
          return new Forward( "success" );
        }

10. From the Action View, the userLoginController.jpf should now look like this:

11. Press Ctrl+S to save your work.
12. Next, double-click on the index.jsp and open Source View. Just below the login form, add a logout button:

        <netui:anchor action="loginLink">
           login
        </netui:anchor>
        <netui:form action="logout">
           <netui:button type="submit" value="logout" action="logout"></netui:button>
        </netui:form>

    The code in red above places a button of type "submit" in the bottom of the page, associates it with the logout action, wraps it inside a netui:form that invokes the action="logout".
13. Save the index.jsp file.

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