C H A P T E R 5 - Tutorial--Section 1.2 Create Login Page

C H A P T E R 5

Tutorial--Section 1.2 Create Login Page

This chapter describes how to add your first Web Application Framework page to the application infrastructure you created.

Task 2: Create the Login Page

Create the first page of the application.

Add a ViewBean

1. Select the main module folder from the Web Application Framework Apps Explorer tab.

This figure shows the Web Application Framework Explorer, with the main module folder selected and its property sheet displayed. The Add Page (ViewBean) button of the toolbar has been clicked.

2. Click the Add Page (ViewBean) button on the Web Application Framework toolbar

Or:

a. Select the IDE's menu option File -> New.

b. Expand Web Application Framework node

c. Select Page (ViewBean)

d. Click Next.

Or:

a. Right-click the main module folder.

b. Select Add.

c. Select Page (ViewBean).

The Select View Type panel displays.

This figure shows the View Type panel of the New Page (ViewBean) Wizard.

3. Enter LoginPage in the Name field (to replace <default>).

4. In the base components list, select Basic ViewBean.

5. Click Next.

The Associate JSP panel displays.

This figure shows the Associate JSP panel of the New Page (ViewBean) Wizard.

6. Accept all defaults but check the box Use formatting to beautify fields on JSP option.

7. Click Finish.

The ViewBean is created.

Note - There are additional steps in the Page wizard. However, those steps involve model field binding which is not required for the LoginPage. In a later task, you will use these additional steps.

The left side of the figure shows the application layout. The right side of the figure shows the code in the two servlet classes that were created.

8. Double-click LoginPage.

The generated source code displays in the IDE's source editor.

Note - Because you elected to create a JSP when you created the LoginPage, a JSP was added to the Documents folder in a directory structure that mirrors the ViewBean's package structure (/jatotutorial/main). For convenience, a link to the JSPs that use the LoginPage are placed in the JSP Pages node, which is under the LoginPage node.

Add Display Fields to the Login Page

1. Expand the LoginPage node.

2. Select the Visual Components node under the LoginPage node.

This figure shows the Visual Components node in the Web Application Framework Explorer.

3. In the Web Application Framework Component Palette, click the Static Text Field option.

This figure shows the Component Palette of the Web Application Framework, with the contents of the Visual Components Palette displayed..

A static text visual component is added to the Visual Components node.

The default name is staticText1.

This figure shows a static text visual component that has been added to the Visual Components node in the Explorer.

4. Right-click the staticText1 field name.

5. Select Rename.

6. Rename the field to message.

7. Add two more display fields.

The following table contains a list of the two visual component types with each of their names and the initial value for the Button type.

Type	Name	Initial Value
Text Field	customerNum
Button	login	Object Type: String Object Value: Login

Type

Name

Initial Value

Text Field

customerNum

Button

Object Type: String

Object Value: Login

The three display fields display under the Visual Components node of the LoginPage.

This figure shows three display fields under the View Components node of the LoginViewBean.

Adding display fields to the Page also adds the appropriate JSP tags for the display fields to the JSPs that are using this Page.

8. Set the button's Initial Value property by selecting the login node.

9. Click in the Initial Value property value entry area.

10. Enter the string Login.

The button's value is the string that displays on the button in the browser.

This figure shows the Initial Value property field for the login node. Login has been entered as the initial value.

11. Open the LoginPage's JSP to see the tags for the three display fields.

a. Expand the JSP Pages node under the LoginPage node.

b. Double-click the LoginPage JSP to open it in the IDE's source editor.

This figure shows the LoginPage JSP and how to open it.

12. Format your JSP layout however you want.

Note - Because you checked the option in the page wizard to beautify the JSP page contents, some basic HTML formatting may have been applied to get you started. Exactly what additional formatting is provided automatically depends on what kinds and conditions of child view components are added to the parent view component. In this case, you will probably want to modify things a bit more because no additional formating was provide as we had added this simple visual components manually.

You can edit it directly in the IDE's source editor, or you can use your favorite WYSWIG HTML editor.

Here is an example of some minimal JSP changes (only pertinent code is shown here). Some HTML source code appears in bold type below for emphasis.

<jato:form name="LoginPage" method="post">

<table border=0 cellspacing=2 cellpadding=2 width="100%">

<tr>

  <td align=right valign=middle width="20%"></td>

  <td align=left valign=middle><jato:text name="message"/></td>

</tr>

<tr>

  <td align=right valign=middle width="20%"><b>Customer Num:</b></td>

  <td align=left valign=middle><jato:textField name="customerNum"/></td>

</tr>

<tr>

  <td align=right valign=middle width="20%"></td>

  <td align=left valign=middle><jato:button name="login"/></td>

</tr>

</table>

</jato:form>

Add Code to the Login Button

1. Right-click the login button.

2. Select Events -> handleRequest

This figure shows the Events -> handleRequest options on the login node's contextual menu.

The LoginPage.java file opens and the handleLoginRequest method stub is inserted.

3. Implement the login button handle request code.

Replace the following default code:

getParentViewBean().forwardTo(getRequestContext());

with the code shown in bold below:

public void handleLoginRequest(RequestInvocationEvent event) {

    // Retrieve the customer number

    String custNum = getDisplayFieldStringValue(CHILD_CUSTOMER_NUM);

    String theMessage = "";

    // Check the customer number

    if (custNum.equals("1") || custNum.equals("777") ||

            custNum.equals("410")) {

        theMessage = "Congratulations, " + custNum +

                ", you are now logged in!";

    } else {

        theMessage = "Sorry, " + custNum +

                ", your customer number was incorrect!";

    // Set the output status message

    getDisplayField(CHILD_MESSAGE).setValue(theMessage);

    // Redisplay the current page

    forwardTo();