This article outlines the steps involved in creating an application using JavaServer Faces. It is excerpted from chapter two of the book JavaServer Faces, written by by Hans Bergsten (O'Reilly, 2004; ISBN: 0596005393).
Imagine building a flight reservation application with a web interface. The user first enters the departure and destination airports and dates, and preferences such as ticket type, airlines, and number of stops. This information is then validated and the user is presented with matching flight choices. When the user picks his preferred flights, the application ensures that the seats are available and marks them as reserved, calculates the cost, verifies credit card information, and finalizes the purchase.
People who are not computer gurus use applications like this, so the user interface must be intuitive and easy to use, error messages must be understandable, and the underlying problems must be simple to correct. For instance, the interface may let the user pick the destination airport by first asking for a country, state, or city name, and then present a selection of airports matching the criteria, provide calendars for choosing the dates, and display tables with flights to choose from. And the interface must be easy to enhance with accumulated user feedback and usage log analysis. The backend code requirements are also complex: accessing real-time flight schedules and reservation information, interfacing with credit card companies, and providing secure tracking of all transactions.
Clearly, this is not an application that can be slapped together without careful design. Applying the Model-View-Controller (MVC) principles briefly introduced in Chapter 1, we first break the application into classes that represent the business data and logic (the Model, including things like Customer, Airport, Flight, Seat, and so on), the user interface (the View, including things like Departure Input Field, Airport List, and so on), and the code that ties it all together (the Controller).
The View can be implemented in many different ways, using both client-side and server-side technologies. For instance, any of the traditional Java server-side technologies like JSP, Velocity, or plain servlets can render an HTML page with input fields, selection lists, and tables representing calendars. For complex user interfaces like this, however, the traditional technologies tend to result in pages with so much code that it becomes hard to make purely visual changes, such as changing the layout of a table.
With a JSF-based implementation, separate objects represent each user interface element, each keeping track of its UI state (e.g., brief or detailed display, number of rows to display, and the current start index) and its application data (e.g., the selected flight). The user interface objects also know how to render themselves in a way that can be customized based on developer or user settings, or even on the device type making the request. User actions, such as switching from brief to detailed display by clicking a button, are represented as events that can be handled either by the user interface object itself or an external event listener provided by the application developer. This type of event-driven component model has made it easier to develop very complex user interfaces for standalone applications over the years and, with a few twists, it simplifies web application development as well.