This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs for the special pre-order price, click here for more information. Aimed at everyone from enterprise developers to self-taught scripters, Real-World AJAX: Secrets of the Masters is the perfect book for anyone who wants to start developing AJAX applications.

An AJAX UI Versus Server-Side Presentation
JSP, JSF, special tags, configuration files, and tld files are all replaced by client-side HTML templates, components, and controllers. We only need a controller servlet on the server side.

Secret Sauce in AJAX UI
The following list re-emphasizes the features that make AJAX a compelling rich client technology.

1. Use of HTML pages as templates or tiles.
2. Overlaying data on the top of the HTML pages using a set of wrapper components on the client side.
3. Use of fully qualified names for data binding (an XPATH equivalent but a much simpler notation).
4. JavaScript as a programming language.
5. HTML and CSS - declarative, popular, and familiar tag languages - an excellent foundation for page layout.

AJAX Pages and Workflows
This section discusses AJAX pages and UI workflows in abstract terms. The purpose is to lay a foundation for ensuing examples in the following sections.

An AJAX UI starts with a page. Let's call it a main-page. Depending on the application, there may be more than one main page. For now, assume that a main page is the starting point of an application scenario. Once the design for one scenario is understood, putting together more scenarios, independent or interrelated, is a matter of building page hierarchies.

Now let's look at a typical main page for an AJAX UI. It consists of the following components as shown in Figure 5.5.

1. A header area for displaying a logo image and the title of the page
2. A top navigation bar to select sub-pages based on application functions or business objects
3. A side sub-navigation bar used for navigating to different sub-pages or doing some global operations such as search
4. A main display area where the sub-pages are displayed based on the user selection
5. A message area at the bottom where the status and error messages are displayed

Once the main page is displayed, one of the following things will happen based on user selection.

1. The content of the main area will change and the highlighted options in one or both navigation bars might change.
2. The entire page will be replaced by a new page.
3. The client may request new data from the server and display the new data in the page.
4. The client may fi nd the new data in the local cache and display it on the page.
5. A new window (dialog) may pop up over the current window.

The control fl ow and data fl ow above dictates how AJAX pages for an application are structured. Figure 5.6 can help visualize this interaction and the corresponding physical structure of the pages in an AJAX application.

This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs, click here to order.