Web 2.0 theme

 

+

Search Tips   |   Advanced Search

 

The Web 2.0 theme, PortalWeb2, extends JSP and servlet based themes by adding Javascript-based Client-Side Aggregation (CSA).

CSA uses AJAX techniques with Portal Model REST services to provide...

PortalWeb2 supports the following skins:

PortalWeb2 does NOT support server side click-to-action using <c2a:encodeProperty/> JSP tag for IBM portlets. PortalWeb2 supports client side click-to-action by using live text tags.

 

How the Web 2.0 theme works

When the User first accesses a Portal page to which the portal PortalWeb2 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 PortalWeb2 to traditional themes (Portal)

WebSphere Portal V6.1 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 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

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

Container for the title of the current top level page.

wptheme-topnav

Container for the first row of page navigation tabs.

wptheme-secondaryNav

Container for subsequent rows of page navigation tabs.

sideNav

Container for the side navigation tree.

breadcrumbtrail

Container for the breadcrumb navigation.

mainContent

Container for the page contents.

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/themes/html/dojo

Javascript code documentation for the CSA framework is available at the following portal directory location:

wps.war/root/themes/html/dojo

 

See...

 

Parent topic

Web 2.0 user interface features