Creating the Web site navigation and related pages
In this section, we use the Web Site Navigation Designer to construct the page navigation and page skeletons for the RedBank Web site. At the end, we will have a working skeleton of the application, where we can navigate from page to page using the tabs below the page header and the ancestor tabs. The pages will not have any actual content, but this is added later.
We will create the navigation pages and corresponding HTML or JSP page for each of the following pages (Table | -1).
Table 13-1
|
Navigation label
|
HTML or JSP file
|
|
itsohome
|
welcome.html
|
|
rates
|
rates.html
|
|
insurance
|
insurance.html
|
|
redbank
|
redbank.html
|
|
listaccounts
|
listAccounts.jsp
|
|
accountdetails
|
accountDetails.jsp
|
|
listtransactions
|
listTransactions.jsp
|
|
showexception
|
showException.jsp
|
Web pages of the RedBank application
Prior to the creation of the Web pages we have to import resources to provide the correct look and feel for Web pages used in our example, such as, images and CSS files. Import those resources following the next steps:
| Expand RAD75BankBasicWeb Æ WebContent and from the context menu select Import.
|
|
| Select General Æ File System and click Next.
|
|
| In the From directory type c:\7672code\webapp, select the images and theme folders, and click Finish.
|
|
| The itso_logo.gif and c.gif images and the grey.css file are imported.
|
Creating navigation HTML and JSP pages
To define the site navigation and create the HTML and JSP page skeletons, perform the following steps in the Web Site Designer:
Select New Page from the Palette and click into the navigation diagram to add the first page.
|
|
After the new page is added, the navigation label can be entered in the navigation diagram or in the Properties view under Navigation label. Type itsohome. Save the navigation diagram.
|
|
Double-click the itsohome page to create the HTML file associated.
|
|
In the New Web Page dialog, enter the following values:
|
Folder: /RAD75BankBasicWeb/WebContent
|
|
Template: Expand Basic Templates and select HTML/XHTML
|
|
Launch the Document Markup dialog by clicking Options and verify the following values, Markup Language=HTML, Document Type=HTML 4.01 Transitional.
|
|
Select Style Sheets and add gray.css as style sheet, removing the Master.css.
|
|
Click Close and Finish to create the HTML page.
|
|
The welcome.html page opens in the editor. Close this editor.
|
|
| Define the navigation root.
|
In our example, itsohome (welcome.html) is the navigation root. By default, when a page is created it is set as a navigation candidate, which is the desired format for all other pages.
To make this change, select itsohome in the Web Site Navigation Diagram, and from the context menu select Set Navigation Æ Set Navigation Root.
|
| Add three static pages as children of itsohome. From the itsohome context menu on Page Designer, select Add Æ New Page Æ As Child. Perform this three times and type the navigation labels as rates, redbank, and insurance.
|
|
| Double-click each page and type the file names as rates.html, redbank.html, and insurance.html. Leave the template HTML/XHTML selected (note that the gray.css style sheet is selected by default). Close the editor that opens.
|
|
| Create a new group named RedBank.
|
Page groups are used to logically build or organize pages into a movable block of related pages. In the RedBank example, the JSPs under redbank.html are grouped together.
|
Select the redbank page, right-click, and select Add Æ New Group Æ As Child. A Group box appears below the redbank page.
|
|
Select the group and in the Properties view, Group tab, type RedBank as the group name.
|
|
Save the navigation diagram.
|
|
| Create the dynamic pages (JSPs) listaccounts, accountdetails, listtransactions, and showexception.
|
|
From the context menu of the RedBank group, select Add Æ New Page Æ Into Group.
|
|
After the New Page is added, notice you can type the navigation label in the Navigation page or in the Properties view as Navigation label. For the first page, type listaccounts.
|
|
Double-click the listaccounts box to create the JSP file associated with the navigation label.
|
|
In the New Web Page dialog, enter the following items and then click Next:
|
|
File name: listAccounts.jsp
|
|
Template: Expand Basic Templates and select JSP.
|
|
Click Options and verify the gray.css cascade style sheet.
|
|
Note: You can provide options to automatically generate servlet stubs methods and to add extra fields to the web.xml file. For this example, the default options are fine.
|
|
Click Finish to create the page. Close the editor that opens.
|
|
| Repeat the steps to add the accountdetails (accountDetails.jsp), listtransactions (listTransactions.jsp), and showexception (showException.jsp) pages.
|
|
Important: The spelling and capitalization of the JSP file names must be exact as shown.
|
|
| The showexception page only appears when there is a problem and is not part of the standard navigation. Therefore, select the showexception page, and clear Show in Navigation in the Properties view.
|
|
| Change the Page Title column of each JSP through the Navigation view, Detail tab, to: List Accounts, Account Details, List Transactions, and Show Exception. This action changes the <title> tag in the source code of each JSP.
|
|
| Save and close the navigation diagram.
|
The completed Web Site Navigation is shown in Figure | -17.
Figure 13-17 Web Site Navigation after adding pages