-C H A P T E R

C H A P T E R 5

Tutorial--Section 1.2
Create Login Page

This chapter describes how to add your first Sun ONE 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 Sun ONE Web Apps Explorer.

This figure shows the Sun ONE Web Apps Explorer.

2. Click the Add Page button on the Sun ONE Application Framework toolbar

Or:

a. Select the Sun ONE Studio menu option File -> New.

b. Expand Sun ONE Application Framework (JATO) node

c. Select Page (ViewBean)

d. Click Next.

Or:

a. Right-click the main module folder.

b. Select Add.

c. Select Page (ViewBean).

3. Expand the Sun ONE Application Framework folder.

4. Select View.

5. Click Next.

The View Location panel displays.

This figure shows the View Location panel.

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

7. In the View beans tab, select Basic ViewBean.

8. Click Next.

The Associate JSP panel displays.

This figure shows the View Summary panel.

Accept all defaults.

9. Check the Use formatting to beautify fields on JSP option.

10. 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 figure shows the application layout. The right figure shows the code in the two servlet classes that were created.

11. Double-click LoginPage.

The generated source code displays in the Sun ONE Studio editor.

Note - Because you elected to created 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 node of the JSP, which is under the LoginPage node.

Add Display Fields to the Login Page

12. Expand the LoginPage node.

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

This figure shows the Visual Components node in the Sun ONE Web Apps Explorer.

14. In the Sun ONE Application Framework Component Palette, click the Static Text Field option.

This figure shows the Sun ONE Application Framework Component Palette.

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.

15. Right-click the staticText1 field name.

16. Select Rename.

17. Rename the field to message.

18. 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.

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

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

21. Enter the string Login.

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

This figure show the Initial Value property value entry area.

22. 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 Sun ONE Studio editor.

23. 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 formatting was applied to get you started. However, you will probably want to modify things a bit more.

For example, adjust the customerNum label so that it is proper case, and remove the unnecessary label for the button and the static text message field.

You can edit it directly in the Sun ONE Studio 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

24. Right-click the login button.

25. Select Events -> handleRequest

This figure shows the Events -> handleRequest menu options.

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

26. 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();