The portal Web 2.0 theme

The Web 2.0 theme of the portal provides an improved user experience and better performance.

The portal Web 2.0 theme extends conventional JSP or servlet based portal themes by adding a Javascript-based Client-Side Aggregation (CSA). Using AJAX techniques with Portal Model REST services, CSA provides a more responsive user experience and lower load on the server.

How the Web 2.0 theme works

When the User first accesses a Portal page to which the portal Web 2.0 theme is assigned, the CSA aggregator is initialized via its Default.jsp, just like a traditional SSA theme. The basic HTML structure of the page is defined, except for the contents of the theme navigation elements, such as the navigation menus, page tabs, side navigation tree, etc. The contents of the page itself remain empty. During this internal preparation phase, the contents of the page itself remain empty.

Once the page loads in the browser, the CSA aggregator is initialized via a JavaScript onload() function. The CSA aggregator then makes multiple AJAX requests to the portal to retrieve the contents of the theme navigation elements, the page content layout, and then the contents of the portlets on the page themselves.

After the initial loading of the page, subsequent user actions are handled by the CSA aggregator. Rather than updating and refreshing the entire page on every user interaction, the CSA aggregator only updates the parts of the page that have actually changed. If the user interacts with a portlet, only that portlet with its new contents will be requested and updated on the page. If a user selects a new page from the theme navigation links, only the affected navigation elements are updated, and the new page contents are rendered.

Comparison of the Web 2.0 theme to traditional themes

Version 6.1 WebSphere Portal Express includes two new themes:

Portal: The Portal theme is a new look and feel for the portal, and is compatible with the new Theme Customizer portlet, which allows end users to easily customize the visual styles and layout of the theme. It is a traditional JSP server side aggregated theme.
PortalWeb2: The PortalWeb2 theme is based on the Portal theme, but is enabled to use the CSA aggregator.

The two themes can serve as examples of what is required to add the CSA aggregator to an existing Server Side Aggregation (SSA) theme. You can determine what was added or modified in the PortalWeb2 theme by using a comparison tool. Here is a brief summary of the differences:

Default page markup: The primary difference in the theme JSPs is that the Portal theme renders the page navigation with custom JSP tags, whereas the PortalWeb2 theme simply includes empty division ( <div> ) tags that are later populated by the CSA aggregator.
head_csa.jspf: Changes to the theme required for CSA are consolidated as much as possible into the head_csa.jspf. This includes initialization and bootstrapping of the CSA aggregator, and all other variables or references required in CSA.
web2 dir: The common JavaScript framework for CSA is stored in a common location for use by all Web 2.0 themes and portlets. The path is [wps.war root]/web2. Reference: [link to javascript documentation]