Client-side data caching using Faces Client Components
Faces Client Components allow one to reduce the number of round trips between the browser and the server by using a technique called client-side data caching, which creates a Web page that contains data and Faces Client Components. The Faces Client Components access the data in the Web page instead of accessing 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 goes to the next page, the Data Grid displays the next 10 products from the data that is in the Web page without requiring a page refresh. 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 Graph and Web Services components. No other browser plug-ins are required. Four Faces Client Components work specifically with client data:
- Data Grid
- Tree View
- Graph
- 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. Most of the Faces Components also work with client data.
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 that the controls can bind to. 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.
Some benefits of the Faces Client are:
- Easy to use Faces JSP tools that allow page designers to drag Faces Client components on a Web page. No extensive programming knowledge needed.
- More responsive Web pages and reduced bandwidth result in fewer round trips to the server.
- Rich controls that can interact with others.
- Data Grid allows any column to be sorted instantaneously and includes paging controls, such as next, previous, first, last.
- Tree View expands and collapses to show hierarchical relationships.
- Events in one control trigger reactions in other controls.
- Low maintenance for the client. The client software is a browser: Microsoft® Internet Explorer 5.5 and higher; Mozilla 1.3 and higher; Netscape 6 and higher.
- Built on standards and open source: JavaScript, HTML, JSF (JavaServer Faces), and EMF (Eclipse Modelling Framework). A standards based infrastructure allows developers to create additional controls.
- No browser plug-ins required, except Macromedia Flash. All resulting Web pages are written in JavaScript and HTML.