How the Pieces Fit Together

Previous sections of this chapter introduce you to the various parts of the application: the JSP pages, the backing beans, the listeners, the UI components, and so on. This section shows how these pieces fit together in a real application.

Chapters 17-21 of this tutorial use the Duke's Bookstore application (see The Example JavaServer Faces Application) to explain basic concepts of creating JavaServer Faces applications.

The example emulates a simple online shopping application. It provides a book catalog from which users can select books and add them to a shopping cart. Users can view and modify the shopping cart. When users are finished shopping, they can purchase the books in the cart.

Figure 17-3 shows how three components from two different pages of the Duke's Bookstore application are wired to back-end objects and how these objects are connected to each other on the server side. These pages and objects are described in Table 17-3.

The bookcashier.jsp page represents a form into which customers enter their personal information. The tag that represents the name component on the bookcashier.jsp page renders a text field. When a user enters a value in the field, the name component fires a value-change event, which is processed after the user submits the form. The NameChanged value-change listener handles this event. The tag representing the name component on the page binds the component's value to the name property of the CashierBean using the value-binding expression #{cashier.name} from its value attribute.

The bookcashier.jsp page also includes a selectBooleanCheckbox tag that displays the fanClub component. This tag binds the fanClub component instance to the specialOffer property of CashierBean using the value-binding expression #{cashier.specialOffer} from its binding attribute. When the customer clicks the Submit button on the page, the submit method of CashierBean checks if the customer has ordered more than $100 (or 100 euros) worth of books. If he or she has, the fanClub component and its label are rendered. This component allows the customer to choose to become a member in the Duke fan club as a reward for ordering more than $100 (or 100 euros) worth of books.

The fanClub component's tag binds the component instance rather than its value to a backing bean property because CashierBean must have access to the rendered property of the fanClub component so that it can dynamically set the property to true. Because the component instance rather than the component value is bound to the backing bean property, the backing bean can manipulate the component properties more readily. Binding a Component Instance to a Bean Property provides more information on component binding.

The bookcatalog.jsp page represents a form in which all the books in the database are displayed in a table. The UIData component generates this table, which contains a row for each book. See The UIData Component for information on how the UIData component works. Each row also includes a button called Add to Cart, which the customer clicks to add the book to the cart. The commandButton tag that renders each Add to Cart button references the add method of CatalogBean using the method-binding expression #{catalog.add} from its action attribute.

When one of the Add to Cart buttons on the bookcatalog.jsp page is clicked, the add method of CatalogBean is invoked. This method updates the shopping cart.

The ShoppingCart object is a model object, whose purpose is to handle application data, including retrieving data from the database.