Download PDF Home History |  | API Search Feedback FAQ

> ## 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.

> Table 17-3 JSP Pages and Objects of Duke's Bookstore
> JSP Page or Server-side Object | Description
> --- | ---
> `bookcashier.jsp` | A form that allows customers to fill out their information, including their name, when ordering books from the Web site.
> `bookcatalog.jsp` | Displays a table containing all the books from the database and allows the user to add a book to the shopping cart.
> `CashierBean` | The backing bean for the `bookcashier.jsp` page.
> `CatalogBean` | The backing bean for the `bookcatalog.jsp` page.
> `name` component | A component represented by the `name` tag on the `bookcashier.jsp` page.
> `fanClub` component | A component represented by the `fanClub` tag on the `bookcashier.jsp` page.
> `NameChanged` value-change listener | Handles the event of users entering their name in the `name` text field rendered by the `name` tag on `bookcashier.jsp`.
> `ShoppingCart` | Holds the data for all the books that the user has added to the shopping cart.

> Figure 17-3 Duke's Bookstore Application Objects

> 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.

Download PDF Home History |  | API Search Feedback FAQ

All of the material in The J2EE(TM) 1.4 Tutorial is copyright-protected and may not be published in other works without express written permission from Sun Microsystems.