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.
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.
The main themes covered in this article are the Portal theme and the PortalWeb2theme.
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.
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
| SSA | CSA | |
|---|---|---|
| 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 method | All 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 file | mainMenu.jsp | mainMenu.xsl |
| Top navigation file | topNav.jspf | topNavRender.xsl |
| Side navigation tree file | sideNav.jspf | sideNavRender.xsl |
| Portlet render area file | Home.jsp | mainContentRenderLayout.xsl |
| IBM skin file | Control.jsp | IBM.xsl |
| NoSkin file | Control.jsp | NoSkin.xsl |
Figure 1 shows which part of the portal project corresponds to which files.
Figure 1. Part-specific files in a portal project
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
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
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
The functionality for new themes includes enhanced editing.
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.
- Navigate to the Edit Menu and Select Edit Theme , as shown in Figure 5
Figure 5. The Edit Theme option
This option is also present as a pop-up menu in the Portal Configuration editor in Rational Application Developer.
- Just right-click and choose this option, as shown in Figure 6
Figure 6. The Edit Theme option
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
Editing CSA XSL files
You can also edit CSA files in the XSL editor.
- To do that, open the Portal Configuration editor.
- 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
You can choose any of the XSL files for editing.
- 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
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
- Once again, open the Portal Configuration editor.
- Select either of the pages (Page1 or Web 2.0 ).
- Right-click any of the pages and select Edit Top Navigation , as shown in Figure 10
Figure 10. The Edit Top Navigation option
- 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
- 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
- Right-click Page1 in the Portal Configuration editor and select Insert Page > As Child .
- 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
- Right click MyChildPage and select Edit Side Navigation , as shown in Figure 13
Figure 13. The Edit Side Navigation option
- 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.
- 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.
- 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
Now you can choose the appropriate file for editing.
- Choose either Home.jsp (for the SSA-supported theme) or mainContentRenderLayout.xsl (for the CSA-supported theme).
To edit the Portlet Skin files, you first have to add a portlet in your page.
- Right-click the Portlet Render area and select Insert Portlet > As Child .
- Select a portlet to add to the configuration (for example, the Login Portlet).
- Next, click over the Login portlet in the Portlet Render area.
- Right-click and Select Edit Skin , as shown in Figure 15.
- 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 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.
- Go to Project Explorer and expand the portal project that you created earlier.
- Open Portal Configuration.
- Open the Outline view and select the Home, as shown in Figure 16.
Figure 16. The Outline view of the Portal Configuration editor
- 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
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.
- Enter a Friendly URL name (in this example,
MyHome)
Figure 18. Providing a Friendly URL name for Home
- Next, click Page1 under Home in the Content Root, as shown in Figure 19.
Figure 19. Page1 selected in the Outline view
- 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
Figure 21 shows the above friendly URL provided for a page running on a browser.
Figure 21. Friendly URL in browser
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.
- 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
This launches a static page creation dialog, as shown in Figure 23.
Figure 23. The New page with static layout dialog
- 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.
- 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.
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.
Learn
- Learn more in the IBM WebSphere Portal Version 6.1 Information Center where you can find information about planning, installing, configuring, administering, developing, and troubleshooting.
- Visit the Rational software area on developerWorks for technical resources and best practices for Rational Software Delivery Platform products.
- Explore the Rational Application Developer Version 7.5 Information Center to find in-depth information.
- Subscribe to the IBM developerWorks newsletter , a weekly update on the best of developerWorks tutorials, articles, downloads, community activities, webcasts and events.
- Subscribe to the developerWorks Rational zone newsletter . Keep up with developerWorks Rational content. Every other week, you'll receive updates on the latest technical resources and best practices for the Rational Software Delivery Platform.
- Subscribe to the Rational Edge newsletter for articles on the concepts behind effective software development.
- Browse the technology bookstore for books on these and other technical topics.
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
