+

Search Tips   |   Advanced Search


Web 2.0 theme


Overview

The portal Web 2.0 theme, PortalWeb2, adds Javascript-based Client-Side Aggregation (CSA) that uses AJAX techniques with Portal Model REST services

Note that the Web 2.0 theme is deprecated in Portal 7, replaced by a new Page Builder 2 theme, which handles CSA/SSA more seamlessly and does not require XSLT knowledge.

The Web 2.0 theme supports only the skins IBM and Noskin.

The Web 2.0 theme does not support server side click-to-action by using the <c2a:encodeProperty/> JSP tag for IBM portlets. However, it supports client side click-to-action by using live text tags.

The WebSphere Portal and Lotus Web Content Management 6.1.x Performance Tuning Guide provides information about tuning the Web 2.0 theme. For the Web 2.0 theme, there are a few differences for tuning the base portal environment that you, or your system adaministrator, should be aware of.


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 initial page that is loaded contains only the basic HTML structure of the page. This has empty placeholders to indicate where the CSA aggregator should place the theme navigation elements, such as navigation menus, page tabs, side navigation tree, etc., and the content of the page itself, such as rows, columns and portlets.

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 page is initially loaded, 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 (PortalWeb2) to traditional themes (Portal)

WebSphere Portal v6.1.5 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. PortalWeb2 is also compatible with the new Theme Customizer portlet.

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. The following is a list of element ID attributes:

wptheme-applicationName

This is the container for the title of the current top level page.

wptheme-topnav

This is the container for the first row of page navigation tabs.

wptheme-secondaryNav

This is the container for subsequent rows of page navigation tabs.

sideNav

This is the container for the side navigation tree.

breadcrumbtrail

This is the container for the breadcrumb navigation.

mainContent

This is the container for the page contents.

head_extras.jspf

Changes to the theme required for CSA are consolidated as much as possible into the head_extras.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/themes/html/dojo. Javascript code documentation for the CSA framework is available at the following portal directory location: wps.war root/themes/html/dojo.


Parent topic:

Web 2.0 user interface features