JavaServer Faces Client components allow you to create more responsive Web pages and reduce the number of trips between the browser and the server. Faces Client components use a technique called client-side data caching, which allows the Faces Client components to access the data in the Web page instead of accessing the data on the server. The result is a Web page that lasts longer and responds faster.
For example, a user is browsing a catalog of 100 products. Using the Faces Client components, you can create a Web page that contains the 100 products and a table called a Data Grid that displays 10 products at a time. The entire data set of all 100 products is contained in the page when the page is first accessed; however, only a subset, 10 products, is displayed. When the user advances to the next Web page, the Data Grid displays the next 10 products from the data that is in the client-cache without requiring a page refresh or a trip to the server. Faces Client components use JavaScriptâ„¢ functions to control the displayed data.
The Faces Client components are based on JavaScriptâ„¢, HTML, and Macromedia Flash for the Chart and Web Services components. No other browser plug-ins are required. Four Faces Client components work specifically with client data: Data Grid, Data Tree, Chart, and Web Service. The Faces Client components can interact with each other, so you can place several Faces Client components on the same page and define events that allow components to interact. For example, a list of accounts can be displayed in a Tree that is linked to a Data Grid. When the user highlights an account in the Tree, the Data Grid displays the transactions for that account. When the user selects a different account, the Data Grid displays the set of transactions for the selected account without return trips to the server or reloading the page.
In most Web pages, the data is merged into HTML controls. When a user wants to view data that is not displayed on the page, the browser sends a request to the server. The server retrieves the data, merges it with HTML, and sends a new page to the browser. With a Faces Client Web page, the data is maintained separately from the controls. The data is organized in a formal model to which the controls can bind. The data is stored as JavaScript objects at the top of each Web page. This design allows several controls to bind to the same data. A user can view different parts of this data, such as different accounts, without a round trip to the server.