Portal Express, Version 6.0
Operating systems: i5/OS, Linux, Windows
Themes
For most requests, the portal page is rendered starting with Default.jsp in the /themes directory. The only exception is when the request has been modified by a parameter...
newWindow="true"
In this case, the page is rendered using Plain.jsp. Plain.jsp is normally used to render portlet help or for portlets that use the iFrame skin.
You can add a elements to the HTML portal page and rearrange the layout by Creating your own theme and changing the layout in Default.jsp and the JSPs that are included. The following sections illustrate the order and layout in which the portal page theme is built using the JSPs that are provided after installation. Use this information to learn how to include some of these components as you build your own themes.
- Head
- Banner
- Top navigation
- Side navigation
- Footers
- Palettes
- Context menus
- Drag and drop feature
- Theme policy
- Screens
- Default themes
- <portal-theme:cacheProxyUrl/> JSP tag
Theme policy is used to control how a theme is rendered on a page.
A policy is created and stored using the XML configuration interface. Once stored, it can be applied to a page either through the XML configuration interface using the page metadata attribute com.ibm.portal.ThemePolicy or through the Properties portlet. Theme policy is inherited so it only needs to be set on a page which requires a different policy than its parent. For more information refer to Theme policies.
Foreground and background colors can be set using the default.properties file.
Head
Head.jspf provides the necessary header information to correctly render the portal page. This file is used to link the style sheets and client-side scripts as well as set the page title and the text direction.
Banner
Banner.jspf includes the user interface elements across the top of the page. This includes the following:
Main menu Dropdown menu with navigation links to top level pages and user actions such as Log In and Log Out Breadcrumb trail (banner_crumbtrail.jspf) Current page selection path to the current page. Search controls (banner_searchControl.jspf) Search form to various search scopes. Toolbar actions (banner_toolbar.jspf) Set of buttons to access various flyout panels and actions.
Top navigation
topNav.jspf creates one or more rows of navigation tabs. Theme policy values control whether the top navigation is rendered and how many rows are rendered.
Side navigation
sideNav.jspf creates an expandable tree of navigation nodes. The side navigation renders any navigation levels that have not been rendered by the top navigation. See Working with portal navigation for more information.
Footers
footer.jspf renders a section across the bottom of the portal page. By default, this includes quick links to commonly accessed areas of portal. The links rendered are internal URLs which are children of the portal page with the unique name ibm.portal.Quick Links.
Palettes
Flyout.jspf contains a hidden document division (<div/>) which is used by actions in the banner's toolbar to display content which is dynamically displayed and hidden as needed.
Context menus
The context menus in the IBM theme and skin (the default) are loaded asynchronously. The contents of the menu are controlled by a JSP in the /themes/html/IBM directory.The following information describes which JSP is used to control specific menus:
| Menu | Controlling JSP |
|---|---|
| Main menu | mainMenu.jsp |
| Page menu (on selected page) | pageContextMenu.jsp |
| Portlet menu | portletContextMenu.jsp |
The page and portlet context menu icon can only be seen if you hover over the upper right corner of the portlet and page title.
The URLs to these JSPs are created using the <portal-navigation:url themeTemplate="mainMenu"/> where the themeTemplate attribute is the name of the JSP to load (without the file extension). As a result, it is important to note that any URL created in one of these controlling JSPs must have the theme template reset, either by using the themeTemplate attribute on the urlGeneration tag or by using the available public APIs. For more information, refer to Tags used by the portal JSPs.
Context menus are disabled until a page fully loads. In more detail, the context menus on the page (for example, Main menu, Page menu, and any portlet menus in the default IBM theme) are initially disabled and then re-enabled in an onload handler. This event occurs because clicking on a context menu before the page is completely loaded (that is, when portlet JSPs are still compiling) causes an error and the menu does not load.
Drag and drop feature
The drag-and-drop feature lets you quickly change the placement of individual portlets using your skins. The drag-and-drop feature lets you move a custom portlet from its current position by dropping it to another position on a page. This lets you quickly change the arrangement of your custom portlets on a page.
For more information on using this feature, refer to Drag and drop zones.
Theme policy
Theme policies control how a theme renders for a particular page. The attributes of the theme policy assigned to the current page are consumed by the theme JSPs to control what gets rendered, as well as how it is rendered. Refer to Theme policies for more information.
Screens
The selected screen is rendered by the <portal-core:screenRender/> tag. See Screens for information about how the rest of the portal page is composed.
Default themes
For HTML, the following themes are provided by WebSphere Portal Express.- IBM theme - This is the default theme for WebSphere Portal Express and is a full-featured theme that demonstrates all available theme functionality.
- Minimal theme - This theme, located in the root themes/html directory, is a minimal "safe" fallback that includes only the minimum required to render a functioning portal. It does not include all of the functionality available in WebSphere Portal Express, such as drag and drop and context menus. This theme is not intended for normal use, and is not explicitly defined as a theme by name, but rather only exists as a fallback should there be a problem with the main portal theme, and also as an example of a minimal theme.
- Portal Web 2 theme - This theme showcases Web 2.0 functionality in WebSphere Portal Express. Taking full advantage of AJAX and JavaScript, this theme features a rich user experience on the client with partial page updates and inline portlet editing.
If the IBM theme directory is either deleted or renamed, the portal resource loader uses the themes/html/Default.jsp. In this case, you should also use the fallback skin. To do this, rename the skins directory.
For example, the skins\html\IBM directory should be renamed skins\html\IBM1.
If you have a broken theme, you can rename the theme and skin directories which are causing the problem to get to a working minimal theme.
<portal-theme:cacheProxyUrl/> JSP tag
The switch to using JSPs for style sheets provides a great advantage in the reduction of the number of files that must be maintained or generated when a style sheet is updated. However, a performance concern is introduced in that the output of the compiled JSPs needs to be cached to avoid having to be generated on each request. WebSphere Portal Express provides the <portal-theme:cacheProxyUrl/> JSP tag to solve this problem.
The <portal-theme:cacheProxyUrl/> tag creates a URL to the caching proxy servlet. The URL created is fully cacheable and includes information about the requesting client. The CC/PP client profile is used for gathering information about the client for the URL. The purpose of this tag is to link .CSS files into the JSP. For more information, refer to Tags used by the portal JSPs.
For security reasons, the cache proxy servlet will only serve URLs pointing to resources located in the themes, skins, and screens directories. This makes all resources underneath these directories public. Also, any URLs containing the ".." characters will not be served.