Previous Section  < Day Day Up >  Next Section

5.1 Sample Application Overview

The sample application is a web-based expense report system. Employees enter their expense reports and submit them for approval; a manager looks at the reports and either accepts or rejects them. All users have to log in before they can access the application.

The main user interface consists of a single screen, shown in Figure 5-1. Employees and managers both use this screen, but different options are enabled depending on who's logged in.

Figure 5-1. The expense reports screen
figs/Jsf_0501.gif

The screen is divided into three main areas: a menu area at the top, a report list area to the left, and a report details area to the right. The menu area contains buttons for operations that affect the report displayed currently in the report details area. Its content differs depending on whether the user is an employee or a manager. An employee gets buttons for creating a new report, deleting the current report, and submitting the current report for approval. The buttons are enabled or disabled depending on the report's status. For instance, as long as the report has the status New (i.e., no entries have been added to it yet), all buttons are disabled; when at least one entry has been added (status Open), all buttons are enabled; when the report has been submitted (status Submitted), only the New button is enabled. If a manager is logged in, the menu area contains additional buttons for accepting or rejecting the report. These buttons are enabled only if the current report is submitted for approval.

The report list area provides access to existing expense reports. It contains two subareas. The filtering criteria area contains fields for a date range, report status choices, and a Filter button for applying the criteria. There's also an implicit filtering criteria: a regular employee sees only her own reports, but a manager sees reports owned by any employee.

The report list area contains a table with all reports matching the filtering criteria. The table rows can be sorted by clicking on the column labels. To make a report the current report, with the details shown in the report details area, the user clicks on the report title in the table.

The report details area is where the expense report information is edited or viewed (depending on its status). An expense report consists of a title and a number of entries, each with a date, an expense type, and an amount. This information is entered in the report entry subarea and added to the current report by clicking the Add button. The entry list area shows all entries in the report. For each entry, there's a Delete button for deleting the entry from the report and an Update button for updating the entry. The fields and the buttons in the report details area are enabled only when the report can be edited, i.e., when its status is New, Open, or Rejected.

The application is close to something that you could use in real life, even though you'd probably need to add a few features, such as a more sophisticated security model that limits a manager's approval rights to reports owned by her employees, and maybe integration with a payroll system. What's more important here, though, is that its user interface is representative of an application that benefits from using JSF.

    Previous Section  < Day Day Up >  Next Section