IBM Rational Application Developer Version 7.5 Portal Toolkit: Part 2. Web 2.0 portal development support for features in IBM WebSphere Portal Version 6.1

IBM® WebSphere® Portal Version 6.1 introduces new features, such as client-side aggregation, Friendly URLs, and static page aggregation. WebSphere Portal V6.1 provides new themes, which include a Web 2.0-based theme. IBM® Rational® Application Developer Version 7.5 provides the tooling support for these new features. This article describes these features and tools.

Share:

Gaurav Bhattacharjee, Staff Software Engineer, IBM Corporation

Author photoGaurav Bhattacharjee is a staff software engineer at IBM India Software Labs in Delhi, India. He works with the Rational Application Developer Portal Tooling team in the WebSphere Portal Lotus Collaboration Software group.



19 May 2009 (First published 19 May 2009)

Also available in Chinese Vietnamese

Rational Application Developer and WebSphere Portal

IBM® Rational® Application Developer Version 7.5 is part of the IBM® Rational® Software Delivery Platform. It is an integrated development environment (IDE) that provides a unified environment for designing, building, testing, and deploying, all from the same workbench. In turn, your portal site development and portlet application development is made faster and easier by portal tooling components.

This article shows you the new features that help you design a portal site that targets IBM® WebSphere® Portal Version 6.1. This article focuses on customizing and editing support for the new themes provided by WebSphere Server, including the following:

  • PortalWeb2 theme
  • Support for the Friendly URL feature

This article concludes by briefly discussing the static page aggregation (SPA) tooling support provided by Rational Application Developer.


Web 2.0 theme support

Rational Application Developer enables you to edit the structure, settings, and artifacts of a portal project. The portal project stores the portal configuration in an XML file in the PortalConfiguration folder, and stores the Web artifacts in the PortalContent folder. You can visually edit the XML file using the Portal Configuration editor, and Web artifacts using the Theme editor. This article also covers PortalWeb2 theme editing, which is the Web 2.0-based theme that is provided by WebSphere Portal.

Portal tooling in Rational Application Developer provides the tooling support for rendering and editing the new themes provided by WebSphere Portal. Users can create their own themes based on these themes. The two basic themes provided by the portal server and supported by WebSphere portal tooling are Portal and PortalWeb2.

Introduction to themes

The main themes covered in this article are the Portal theme and the PortalWeb2theme.

Portal theme

The Portal theme in WebSphere Portal is a new look-and-feel for the portal, and it is based on the traditional Java™Server Pages (JSP) server-side aggregated theme.

The portal theme is the conventional JSP-based theme, and it replaces the IBM theme in WebSphere Portal.

PortalWeb2 theme

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


The Portal Web 2.0 theme extends conventional JSP- or servlet-based portal themes by adding a Java™Script-based client-side aggregation (CSA). CSA uses asynchronous Java™ and XML (AJAX) techniques with portal model Representational State Transfer (REST) services. In this way, CSA provides a more responsive user experience and a lower load on the server.

The PortalWeb2 theme is based on the Portal theme, but is enabled to use the CSA
aggregator.

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.

Differences between Portal theme and PortalWeb2 theme

The basic difference between these two themes is that the Portal theme only supports the
server-side aggregation (SSA) mode. In this mode, the request for a page goes to the

server side, and the markup is generated on the server side and then given back to the

user. The PortalWeb2 theme, on the other hand, supports both SSA and CSA.

Table 1 lists the major differences between SSA- and CSA-based themes.

Table 1. Differences between SSA and CSA modes
SSACSA
User response Slower because everything is aggregated on the server side, and it involves a full page refresh.Fast, because it uses AJAX techniques to retrieve the content. Rather than updating and refreshing the entire page for every user interaction, the CSA aggregator only updates the parts of the page that have actually changed.
Page request Each page request goes to the WebSphere Portal engine.The first time a user selects a page with a PortalWeb2 theme. The portal loads the theme and initializes the CSA aggregator. From then on, page changes are handled by the CSA aggregator rather than by a full Page refresh.
Rendering methodAll of the navigation elements and the page layout are aggregated on the server side, and markup is given back to the browser for rendering.The CSA aggregator uses XSLT to render the navigation elements and the page layout on the client side.
Main menu filemainMenu.jspmainMenu.xsl
Top navigation filetopNav.jspftopNavRender.xsl
Side navigation tree filesideNav.jspfsideNavRender.xsl
Portlet render area fileHome.jspmainContentRenderLayout.xsl
IBM skin file Control.jspIBM.xsl
NoSkin fileControl.jspNoSkin.xsl

Figure 1 shows which part of the portal project corresponds to which files.

Figure 1. Part-specific files in a portal project
portal project screen with navigation bar

Click here for a larger view of Figure 1.

Note: For both SSA and CSA, Default.jsp is the key. When you first access a portal page to which the PortalWeb2 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, and so on), and the content of the page itself (such as rows, columns, and portlets).

Working with themes in Rational Application Developer

When you use Rational Application Developer to work on your site, the first thing that you need to do is to import the portal configuration and resources from your portal server, or to create a new portal project. Rational portal tooling provides the Import Portal wizard, which creates a portal project in your workspace and copies your portal configuration and resources from that server into your current project. It also provides the New Portal Project wizard, which creates a new portal project in your workspace.
Although starting from the import is preferable, for this use case you will use the New Portal Project wizard to see the new functionality that has been added to provide support for WebSphere Portal Server V6.1. Figure 2 shows you the initial page of New Portal Project wizard

Figure 2. The New Portal Project wizard
name, contents, version, and target runtime

As shown in Figure 2, WebSphere Portal is the version that you will use for this portal project. The Select the portal server version dropdown and the Target Runtime list include WebSphere Portal v6.1 server. The Target Runtime dropdown also lists the same.The next page in the wizard (Select Theme), shown in Figure 3, displays the thumbnails of the two basic themes provided by WebSphere Portal Server V6.1 (as mentioned previously).

Figure 3. The theme selection page
Theme name on top, select thumbnail below

After you create a new portal project, Rational Application Developer displays the rendered portal project (as it would look like when run in a browser). Figure 4 shows what a newly created WebSphere Portal V6.1 project looks like in Rational Application Developer (assuming that you selected the PortalWeb2 theme).

Figure 4. A rendered portal project with the PortalWeb2 theme applied
blank project with Place portlet here text

The functionality for new themes includes enhanced editing.

Editing themes

This section discusses the enhanced theme editing operations that Rational Application Developer provides for both SSA- and CSA-based themes.

Editing the Main JSP file (Default.jsp)

To edit the JSP files, first open the Portal Configuration editor.

  1. Navigate to the Edit Menu and Select Edit Theme, as shown in Figure 5
Figure 5. The Edit Theme option
menu command

This option is also present as a pop-up menu in the Portal Configuration editor in Rational Application Developer.

  1. Just right-click and choose this option, as shown in Figure 6
Figure 6. The Edit Theme option
popup menu item

This opens the Default.jsp for editing, as shown in Figure 7. Now you can edit and customize Default.jsp as per your requirements.

Figure 7. Default.jsp in the Page Designer
tab labeled Default


Editing CSA XSL files
You can also edit CSA files in the XSL editor.

  1. To do that, open the Portal Configuration editor.
  2. Go to the Edit Menu and Select Edit Theme XSL files, as shown in Figure 8. This lists all of the CSA based XSL files that are available for editing.
Figure 8. The Edit Theme XSL files option
menu command

You can choose any of the XSL files for editing.

  1. For example, choose mainMenu.xsl. This opens the XSL file in the XSL Editor, as shown in Figure 9.
Figure 9. The mainMenu.xsl file in the XSL editor
tab with file name

The following sections illustrate how Rational Application Developer portal tooling supports listing the theme files for both top navigation and side navigation.

Editing top navigation artifacts

  1. Once again, open the Portal Configuration editor.
  2. Select either of the pages (Page1 or Web 2.0).
  3. Right-click any of the pages and select Edit Top Navigation, as shown in Figure 10
Figure 10. The Edit Top Navigation option
menu command
  1. Now click topNav.jspf. This opens the topNav.jspf file for editing in Page Designer, as shown in Figure 11. As indicated previously in Table 1, this file corresponds to the Top Navigation area in an SSA-supported theme. Now you can edit the .jspf file.
Figure 11. topNav.jspf file in the Page Designer
tabs along top of screen
  1. Similarly, you can edit the corresponding top navigation XSL file by selecting topNavRender.xsl as shown in Figure 10. This opens the XSL file in the XSL editor. As indicated previously in Table 1, this file corresponds to the Top Navigation area in a CSA-supported theme. Now you can edit the XSL file per your requirements.

Editing side navigation artifacts

  1. Right-click Page1 in the Portal Configuration editor and select Insert Page > As Child.
  2. Create a child page (for example) MyChildPage such that the structure looks like that shown in Figure12.
Figure 12. Child page added to Page 1
tab labeled Portal Configuration
  1. Right click MyChildPage and select Edit Side Navigation, as shown in Figure 13
Figure 13. The Edit Side Navigation option
menu command
  1. Now click sideNav.jspf. This opens the sideNav.jspf file for editing in the Page Designer. As indicated previously in Table 1, this file corresponds to the Side Navigation area in an-SSA supported theme. Now you can edit the .jspf file.
  1. Similarly, for the side navigation for a CSA-based theme, right-click sideNavRender.xsl. This opens the file sideNavRender.xsl for editing in XSL editor. As indicated previously in Table 1, this file corresponds to the Side Navigation area in a CSA-supported theme. Now you can edit the XSL file per your requirements.

Editing Portlet Render Area files

Similar to editing top and side navigation files, you can edit the Portlet Render area files and the Skin files, for both SSA- and CSA-based themes.

  1. To edit the Portlet Render area files, right-click the Portlet Render Area (the area where the text Place portlet here appears) inside MyChildPage and Select Edit Portlet Render Area, as shown in Figure 14.
Figure 14. The Edit Portlet Render area
menu command


Now you can choose the appropriate file for editing.

  1. Choose either Home.jsp (for the SSA-supported theme) or mainContentRenderLayout.xsl (for the CSA-supported theme).

Editing Portlet Skin files

To edit the Portlet Skin files, you first have to add a portlet in your page.

  1. Right-click the Portlet Render area and select Insert Portlet > As Child.
  2. Select a portlet to add to the configuration (for example, the Login Portlet).
  3. Next, click over the Login portlet in the Portlet Render area.
  4. Right-click and Select Edit Skin, as shown in Figure 15.
Figure 15. Edit skin
menu command
  1. Select any one of the listed files to open and edit it in the respective editor. As shown previously in Table 1, the Control.jsp file belongs to the SSA-supported theme and IBM.xsl file is the IBM skin’s XSLT file for CSA supported theme.

This concludes the discussion about the enhanced themes editing and rendering support provided by Rational Application Developer portal tooling.


Friendly URL tooling support

Friendly URL is a new feature in WebSphere Portal Server V6.1 which allows you (as a portal administrator) to provide URL mapping for the portal pages. As you create the URLs, you can define human-readable names for them. These are easy to remember, and are therefore more user-friendly. This allows users to enter a complete portal URL into the browser address bar to navigate to a particular page.

Rational portal tooling provides you with a more robust way of providing the friendly URLs when you design the portal pages.

This section illustrates how to do this in the Portal Configuration editor.

  1. Go to Project Explorer and expand the portal project that you created earlier.
  2. Open Portal Configuration.
  3. Open the Outline view and select the Home, as shown in Figure 16.
Figure 16. The Outline view of the Portal Configuration editor
Layout and Content Root expanded
  1. Next, right-click and select Properties to open the Properties view, which shows the Label tab. This Label tab contains a Friendly URL name field in which you can specify the friendly URL for the current Label, as shown in Figure17.
Figure 17. The Properties view
tabs at top of screen

Click here for a larger view of Figure 17.

The name that you enter here is for the Home label, which is the parent of the pages such as Page1

and the Web 2.0 page. You must enter a Friendly URL name for the parent if you want to

access a page with a friendly URL name.

  1. Enter a Friendly URL name (in this example, MyHome)
Figure 18. Providing a Friendly URL name for Home
Unique name, friendly name, and active variable
  1. Next, click Page1 under Home in the Content Root, as shown in Figure 19.
Figure 19. Page1 selected in the Outline view
Content Root and Home are expanded
  1. Right-click and select Properties to open the Properties view, which shows the Page tab. This Page tab has a Friendly URL name field in which you can specify the friendly URL for the current page, as shown in Figure 20 (in this example MyPage).
Figure 20. Providing a Friendly URL name for Page1
Unique name, Friendly name, and Active checkbox

Figure 21 shows the above friendly URL provided for a page running on a browser.

Figure 21. Friendly URL in browser
https://localhost:10035/wps/myportal/MyHome/MyPage

Static page aggregation tooling support

Static page aggregation (SPA) is another new feature in WebSphere Portal Server V6.1. SPA allows you to use static HTML files as portal pages.

Working with static content pages has the following advantages:

  • As a Web designer, you can create a portal page by using standard Web authoring tools. These can be HTML editors or even simple text editors. You don't need any knowledge of JSP to create an HTML.
  • You have more control over the layout of the page than by using the portal layout model.
  • You can include portlets as dynamic elements, and include containers as placeholders for portlets in your pages.
  • You can update an existing static page by uploading a modified HTML file while preserving the portlet customization on that page.

Static pages can be rendered in the portal in the following two ways:

  • As standalone Web pages that control the complete browser area
  • As part of the portal content area (in this case the portal still controls the banner and navigation area.


Rational Portal tooling provides the necessary tooling support for SPA. It enables you to create, update, and manage static HTML pages for portals. The complete SPA tooling support is covered in a separate article. This article only gives a brief overview.

  1. To create a SPA page, right-click Page1 or Web 2.0 and Select Insert Static Page > As Child, as shown in Figure 22.
Figure 22. Insert Static Page option
menu command

This launches a static page creation dialog, as shown in Figure 23.

Figure 23. The New page with static layout dialog
dialog to specify static layout of portal page
  1. Specify the HTML file name in the File name field.

One noteworthy function in this dialog is the Create using existing ZIP or HTML page check box. If you have already created an HTML file and would like to use it as a static HTML file in WebSphere Portal, then you can use this option. All you need to provide is a valid HTML file or a .zip file that contains an HTML file in it. If you do not select the check box, then a new HTML file is created in the workspace that contains a basic HTML skeleton.

  1. Click Finish to open the HTML file in Page Designer for editing. Now you can perform more actions, like changing the HTML structure of the HTML page.

Another important functionality is the ability to add portlets to this HTML page. Rational portal tooling provides the necessary support for the same.

As mentioned previously, more specific details are out of the scope of this article, and are covered in a separate article.


What you have learned

This article introduced the portal tooling support provided by Rational Application Developer V7.5 for the new features such as SPA, friendly URLs, and Web 2.0 themes provided by WebSphere Portal V6.1. The information in this article should enable you to develop Portal sites quickly and efficiently with the new features provided by WebSphere Portal.

Resources

Learn

Get products and technologies

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Rational software on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Rational, WebSphere
ArticleID=388006
ArticleTitle=IBM Rational Application Developer Version 7.5 Portal Toolkit: Part 2. Web 2.0 portal development support for features in IBM WebSphere Portal Version 6.1
publish-date=05192009