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.
-
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.
The New JSP File wizard opens.
-
In the New JSP File wizard enter
login.jspxas the File name, as shown in Figure: New JSP File Wizard.Click Next.
-
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 different templates and see in the Preview pane which statements are generated for each option.
-
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.
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.
-
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.
-
The page is created and it opens in the editor, as shown in Figure: login.jspx in Editor.
-
The buttons on the toolbar shown in Figure: Visualization Buttons on Toolbar allow you to choose between Design, the Source or split views.
-
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.
This shows you how easy it is to customize the layout of the IDE.
-
The palette displays all the available library components.
-
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.
-
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.
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:
-
In the code of the login page, delete the af:Form tags, as shown in Figure: login.jspx in Editor.
-
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.
-
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
. -
In the Choose Bean/Bean Property dialog shown in Figure: Choose Bean/Bean Property Dialog, select
loginBeanand click OK. -
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. -
In the Form action field define a navigation case quickly. In the Select a navigation case dialog, click the
button. -
In the New Navigation Case dialog, enter
loginas the Outcome. In the Destination page field, click the Create a new JavaServer Page button to create a new page quickly, as shown inFigure: New Navigation Case Dialog . -
In the New JavaServer Page dialog, type
welcome.jspxas the name for the page, as shown in Figure: 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.
-
In the New Navigation Case dialog, click OK, and click OK again to return to the Form Type dialog.
-
In the Form Type dialog, click Next.
-
The username and password fields are already selected, click Next.
-
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.
If necessary, using the up and down arrows on the right, move one of the field so that
userNameappears on top, as shown in Figure: Form Type Dialog.Click Next. You could define in this new step an error message using resource bundle, but click Finish.
-
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 -
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.
-
The Project Explorer now contains the new files, as shown in Figure: Project Explorer.
