# Step 3: Create a Portlet and Edit the Login Form

In this step, you first create a Portlet from the new page flow and then edit the login form.

1. In the Portal Designer, drag the Page Flow file, called userLoginController.jpf, into a place holder in a portal.
2. In the Create Portlet dialog, click Yes.
3. From the Portlet Details screen, click Finish to create the userLoginController portlet and place it in the portal.

4. Open login.jsp in Source view and make sure the Username text box is above the Password text box. The code that inserts these text boxes should look like this:

              <tr class="tablebody">
                   <td>Username:</td>
                   <td>
                     <netui:textBox dataSource="{actionForm.username}"/>
                   </td>
            </tr>
            <tr class="tablebody">
                   <td>Password:</td>
                   <td>
                      <netui:textBox dataSource="{actionForm.password}" password="true"/>
                   </td>
            </tr>

5. Open login.jsp in the Design View and select the Password text box. Then, in the Properties Editor, scroll down the list of General Properties to set Password equal to true. This will cause any input in this field to be masked.

6. For debugging purposes, the next step shows how to add some code to show which user is logged on. Open index.jsp in the Source View, adding the following code to the end, just before the last two lines:

                 <% if (request.getRemoteUser() != null) { %>
                   <BR>you are logged in as: <%=request.getRemoteUser()%>
                   <br>
                   <%
                 }
                 else
                 {
                   %>
                   <BR>you are not logged in
                 <%
                 }
                 %>

The index.jsp should read as follows, with the inserted code shown in red:

    <%@ 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-template:template templatePage="/resources/jsp/template.jsp">
        <netui-template:setAttribute value="Index" name="title"/>
        <netui-template:section name="bodySection">
            <p class="pagehead">
                &nbsp;Page Flow: yyyFlow
            </p>
            <table width="100%" cellpadding="0" class="tablebody" cellspacing="0">
                <tr>
                    <td valign="top">
                        <table width="100%" class="tablebody">
                            <tr class="tablehead">
                                <td>Actions With No Parameters</td>
                            </tr>
                        </table>
                    </td>
                    <td valign="top">
                        <table width="100%" class="tablebody">
                            <tr class="tablehead">
                                <td>Input Forms For Actions With Parameters</td>
                            </tr>
                            <tr>
                                <td>
                                    <netui:anchor action="loginLink">
                                        login
                                    </netui:anchor>
                                    <netui:form action="logout">
                                    <netui:button type="submit" value="logout" action="logout"></netui:button>
                                    </netui:form>
                                </td>
                            </tr>
                        </table>
                        <br/>
                        <br/>
                    </td>
                </tr>
                <tr class="tablehead">
                    <td align="left" colspan="2">
                        Results Area
                    </td>
                </tr>
            </table>
            <br/>
            <%Object res = request.getAttribute ( "results" );%><%=(res == null ? "<i>none</i><br/>" : ( res + "<br/>"))%>
            <% if (request.getRemoteUser() != null) { %>
                <BR>you are logged in as: <%=request.getRemoteUser()%>
                <br>
                <%
              }
              else
              {
                %>
                <BR>you are not logged in
              <%
              }
              %>
        </netui-template:section>
    </netui-template:template>

7. Click Ctrl+S to save your work.
8. In the directory tree of the Application window, double-click the .portal file to give it focus.
9. In the WebLogic Workshop menu, choose Portal-->Open Current Portal.

10. Click on Login, and at the login page, enter weblogic/weblogic. (The password field should be masked. )

11. Verify that the next page displays the current logged-in user.

12. Click logout, and verify the page displays the "you are not logged in" message.

    Congratulations! You have created a portlet that uses a Page Flow and an EJB control.

Related Topics

WebLogic Portal Tutorials

WebLogic Workshop Portal Extensions Samples

Click on the arrow below to go back in the tutorial: