# Creating JSP Pages

You are now going to create two pages:

- A login page which you use to enter your username and password.

- A welcome page that displays your name being passed using the managed bean.

## Creating a Login JSP Page

First you will create a login JSP page which passes a variable value to a second page using the Java bean.

1. Right-click the WebContent node in the Project Explorer and select New > JSP file, as shown in Figure: JSP File Option on WebContent Context Menu.

   JSP File Option on WebContent Context Menu

   The New JSP File wizard opens.

2. In the New JSP File wizard enter `login.jspx` as the File name, as shown in Figure: New JSP File Wizard.

   New JSP File Wizard

   Click Next.

3. In the Select JSP Template page of the wizard, shown in Figure: Select JSP Template Page of New JSP File Wizard, notice the variety of JSP templates available for JSP, JSF, and ADF development.

   Select JSP Template Page of New JSP File Wizard

   Select different templates and see in the Preview pane which statements are generated for each option.

4. Click the JSP Templates link at the bottom right of the wizard. This opens the Web> JSP Files > Editor > Templates page of the Preferences dialog, as shown in Figure: JSP Templates Page of Preferences Dialog.

   JSP Templates Page of Preferences Dialog

   In this dialog you can select any template and see its content in the Preview pane.

   You can customize a template for your own needs using the Edit button, or you can create your own template using the New button.

   In this case you are going to use an existing template, so click Cancel.

5. In the Select JSP Templates page of the New JSP File wizard, select ADF Rich Faces Page - Basic (xhtml, xml syntax) (the first template in the list), and click Finish.

6. The page is created and it opens in the editor, as shown in Figure: login.jspx in Editor.

   login.jspx in Editor

7. The buttons on the toolbar shown in Figure: Visualization Buttons on Toolbar allow you to choose between Design, the Source or split views.

   Visualization Buttons on Toolbar

8. Locate the Palette View which you opened in Setting the Workbench Perspective for an Application. If necessary, choose Window > Show View and choose the palette from the list of Eclipse Views. Drag it to the upper right pane and drop it there.

   Palette Pane

   This shows you how easy it is to customize the layout of the IDE.

9. The palette displays all the available library components.

10. Explore the content of the various libraries. Click on an item to expand it. For example the ADF Data Visualizations node shows all of the GUI components available to represent data such as Bar, Pies or Gauges, as shown in Figure: ADF Data Visualizations Node.

    ADF Data Visualizations Node

11. Notice that the last item in the Palette is the Data Palette. Expand it and see that its content is related to the available variables, as shown in Figure: Data Palette.

    Data Palette

    Variables displayed in the Data Palette range from local Page Variables declared within the current jsp to JSF Managed Beans available to the whole application. The Data Palette enables easy navigation to variable and class declarations as well as Drag and Drop onto the page.

## Creating a Navigation Case and a Welcome Page

You are now going to create a navigation case that navigates quickly to a second page.

To create these two components:

1. In the code of the login page, delete the af:Form tags, as shown in Figure: login.jspx in Editor.

   login.jspx in Editor

2. In the Palette, open the ADF Faces library, scroll down and select the Form tag. Drag and drop it in place of the previous Form tag location using the tag drop editor facility.

3. In the Form Type page of the New Form Type wizard, shown in Figure: New Form Type Dialog, select Generate a form with content from managed beans. In the Form bean field click Browse .

   New Form Type Dialog

4. In the Choose Bean/Bean Property dialog shown in Figure: Choose Bean/Bean Property Dialog, select `loginBean` and click OK.

   Choose Bean/Bean Property Dialog

5. On the Form Type page of the New Form wizard, click Select a value next to Form action to open the Select Action Outcome dialog.

6. In the Form action field define a navigation case quickly. In the Select a navigation case dialog, click the button.

7. In the New Navigation Case dialog, enter `login` as the Outcome. In the Destination page field, click the Create a new JavaServer Page button to create a new page quickly, as shown in Figure: New Navigation Case Dialog .

   New Navigation Case Dialog

8. In the New JavaServer Page dialog, type `welcome.jspx` as the name for the page, as shown in Figure: New JavaServer Page Dialog.

   New JavaServer Page Dialog

   Click Next to make sure the used template is the same as the one used for the login page. Click Finish.

9. In the New Navigation Case dialog, click OK, and click OK again to return to the Form Type dialog.

10. In the Form Type dialog, click Next.

11. The username and password fields are already selected, click Next.

12. In the Form fields, notice that both variables are rendering as Text Field, as shown in Figure: Form Type Dialog. Select the password variable and using the drop-down list change the Rendering property to Password field. The same way, set the userName as TextArea.

    Form Type Dialog

    If necessary, using the up and down arrows on the right, move one of the field so that `userName` appears on top, as shown in Figure: Form Type Dialog.

    Form Type Dialog

    Click Next. You could define in this new step an error message using resource bundle, but click Finish.

13. In the Menu toolbar, click the appropriate button to show the design page view exposing the two fields and the Submit button that you just created, as shown in Figure: Login Page

    Login Page

14. Click the Preview tab at the bottom of the Page editor to have a closer view of the rendering of the page in a Browser, as shown in Figure: Login Page.

    Login Page

15. The Project Explorer now contains the new files, as shown in Figure: Project Explorer.

    Project Explorer