View layer
The view layer of the RedBank application is composed of four HTML files and four JSP files. The application home page is the index.html containing a link to four HTML pages (welcome.html, rates.html, insurance.html, and redbank.html).
| The welcome.html, rates.html, and insurance.html are simple static HTML pages showing information, without forms or entry fields.
|
|
| The redbank.html contains a single form that allows a user to type in the customer ID to access customer services, such as accessing balance, and performing transactions. Note that although the account number is verified, security issues (logon and password) are not covered in this example.
|
|
| From redbank.html, the user is shown the lisAccounts.jsp page, which shows the customer's details, a list of accounts, and a button to log out.
|
|
| Selecting an account brings up the accountDetails.jsp, which also shows the balance for the selected account and a form through which a transaction can be performed. This screen also shows the current account number and balance, both dynamic values. A simple JavaScript code controls whether the amount and destination account fields are available, depending on the option selected. One of the transaction options on the accountDetails.jsp is List Transactions, which invokes the listTransactions.jsp.
|
|
| If anything goes wrong in the regular flow of events, the exception page (showException.jsp) is shown to inform the user of the error.
|
|
| These four JSP pages (listAccounts.jsp, accountDetails.jsp, listTransactions.jsp, and showException.jsp) make up the dynamic pages of the RedBank application.
|
Refer to Figure | 3-17 for a diagram showing the planned structure of pages within the RedBank application. The diagram was created using the Web Site Navigation Designer tool.